Try this: <br />@import url(http://fonts.googleapis.com/css?family=Playfair+Display);<br />body<br />{<br />background-color: #052C6E;<br />font-family: &quot;Playfai

#passages { color: #FFFFFF; !important }

You will also need to set the width in #passages and whatever id is associated with the secondary display window. Again, you might need to play about with the values somewhat to get the exact position

You could do something like this: <br />:: StoryInit<br />&lt;&lt;script&gt;&gt;<br />$(&quot;body #passages&quot;).on(&quot;click&quot;, &quot;ar

TheMadExile wrote: <br />:: StoryInit<br />&lt;&lt;script&gt;&gt;<br />$(&quot;body #passages&quot;).on(&quot;click&quot;, &quot;area[data-passag

#passages {

How do I select <a> elements in the #passages div with jQuery? I've been using .css to check if I'm selecting them by changing the color to red.

But for now, I'm hung up on something that's likely very simple. How do I select <a> elements in the #passages div with jQuery? I've been using .css to check if I'm selecting them by changing t

SugarCube's border there actually comes in two pieces, one on the right-hand side of #ui-bar and the other on the left-hand side of #passages.  Normally, this provides a better look than having it onl

/>height:100%;<br />}<br />#passages {<br />margin:0;<br />padding: 0;<br />height:100%;<br />}<br />.passage[data-tags~=nice] .header {<br />backgr

Using the first (delegated handler) option as an example (since it's the easiest): <br />:: StoryInit<br />&lt;&lt;script&gt;&gt;<br />$(&quot;body #passages&

Try changing your code to this: <br />$(&quot;#passages&quot;).on(&quot;mouseenter&quot;, &quot;.header&quot;, function() {<br />$(&quot;#ui-bar&quot;).show

One cool thing I discovered today...if you want your passage space to expand to the size of the browser window, set the height like this in the #passages class:

The problem, I think, isn't going to be that you need to adjust the CSS for your sidebar, but for the #passages container.

/>width: 8%;<br />}<br />#passages { <br />/* This is a container for all passages displayed on the page */<br />/* Passage width */<br />width: 85%;<br />/* Pa

main flow to a sidebar<br />$(&quot;#passages&quot;).addClass(&quot;sidebar&quot;);<br />$(&quot;.passage&quot;).addClass(&quot;flip&quot;);//add class to

There are other important elements that Sugarcane uses that aren't listed in the default SS. For example, the #passages element (not to be confused with the .passage class, no 's' at the end).

#passages {

The basics would be that you'd need to add a class to #passages (or something like that), which would disable the passage transition animation for the call to state.display(), and then remove the clas

#passages {