Stylesheet issues in sugarcube

Comments

• greyelf

  May 2014

  There are a number of structural and element name differences between the HTML generate using Sugarcane and SugarCube.

  • The #sidebar and #title elements are named (id) #ui-bar and #story-title respectively.
  • Surgarcane uses <li> tags to break down the sub-parts of the side bar, where-as SugarCube does not.

  The easiest way to work out how to reference (using css selectors) the different parts of the screen is to learn to use the Inspect Element feature of your browser.
  
  In either Firefox or Chrome: Place the mouse cursor over the item you wish to look at, use the right mouse button to show the context popup menu and select the Inspect Element menu item to open the debugger frame at bottom of your browser window.
  
  
  Example 1: Sugarcane & Firefox:
  a. Place cursor over the text of the Story Title, and open the debugger frame.
  b. The second area of the frame shows the path to the currently selected element and will read something like the following:
  [quote]html > body > ul#sidebar > li#title.storyElement > span#storyTitle.storyElement
  c. The area below that is the source code area and will show you the actual html of the page with the tag representing the Story Title highlighted
  d. The area to the right shows the CSS rules being applied to the currently selected element.
  e. Looking at either the path or html you can see that the element named #storyTitle.
  
  
  Example 2: Sugarcube & Firefox:
  a. Place cursor over the text of the Story Title, and open the debugger frame.
  b. The second area of the frame shows the path to the currently selected element and will read something like the following:
  [quote]html > body#body > div#ui-bar > header#title > h1#story-title
  c. The area below that is the source code area and will show you the actual html of the page with the tag representing the Story Title highlighted
  d. The area to the right shows the CSS rules being applied to the currently selected element.
  e. Looking at either the path or html you can see that the element named #story-title
  
  
  Example 3: Sugarcane & Chrome:
  a. Place cursor over the text of the Story Title, and open the debugger frame.
  b. The first area is the source code area and will show you the actual html of the page with the tag representing the Story Title highlighted.
  c. The area below that shows the path to the currently selected element and will read something like the following:
  [quote]html  body  ul#sidebar  li#title.storyElement    span#storyTitle.storyElement
  d. The area to the right shows the CSS rules being applied to the currently selected element.
  e. Looking at either the path or html you can see that the element named #storyTitle.
  
  
  Example 4: Sugarcube & Chrome:
  a. Place cursor over the text of the Story Title, and open the debugger frame.
  b. The first area is the source code area and will show you the actual html of the page with the tag representing the Story Title highlighted.
  c. The area below that shows the path to the currently selected element and will read something like the following:
  [quote]html  body#body  div#ui-bar  header#title  h1#story-title
  d. The area to the right shows the CSS rules being applied to the currently selected element.
  e. Looking at either the path or html you can see that the element named #story-title.
  
  It would take too long to explain all the usages of the debugger, but I suggest you learn at least some of them as it could help with building your story.
  
  I hope this helps a little.
• TheMadExile

  May 2014

  KingCarnie wrote:

  
  What's going wrong? Also, if anyone has any resources specific to sugarcube that would be great.
  

  
  
  Have you tried reading its documentation?  A good primer and reference on CSS might be in order as well.
  
  As to what's going wrong, as noted by greyelf there are differences between SugarCube and the vanilla headers, so some of the selectors are different than what you have.  Beyond that, you also have several errors in your CSS and a few instance of smart/curly double-quotes.
  
  Try this:

  
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

body
{
background-color: #052C6E;
font-family: "Playfair Display";
font-size: 12px;
}
a { color: #35C0CD; } /* You may also want to change the a:hover and a:active colors */

#ui-bar #title { color: #35C0CD; }
#ui-bar #title:hover { color: #35C0CD; }
#ui-bar #story-title { font-size: 30px; }
#ui-bar nav li { color: #35C0CD; }

#passages { color: #FFFFFF; }
.passage { width: 600px; }

• TheMadExile

  May 2014

  greyelf wrote:

  
  The #sidebar and #title elements are named (id) #ui-bar and #story-title respectively.
  

  
  
  The note about #title is not entirely accurate.  Both SugarCube and the vanilla headers have a #title element, which refers to the container element housing all of the title-related elements (story title, subtitle, author, etc).  Additionally, most of the children of the #title container are the same as well, though their IDs differ (all IDs and classes in SugarCube follow the standard hyphenated format, while the vanilla headers continue to use the old camelCase format).
  
  #title and its children: VanillaSugarCube#title#titlena.#story-banner#storyTitle#story-title#storySubtitle#story-subtitle#titleSeparator#story-title-separator#storyAuthor#story-author
• KingCarnie

  May 2014

  Much thanks to both of you! Especially MadExile for the provided CSS (it worked perfectly!) and for the links. I had looked through some of the documentation for Sugarcube, but it is a tad intimidating for someone with no real experience using CSS or Java. I'm sure I'll manage to puzzle it all out though. I also definitely need to work through that CSS tutorial.