/>border-color: #000;<br />}<br />#ui-bar, #ui-body {<br />background-color: #eee;<br />border-color: #ccc;<br />}<br />#credits, #version {<br />color: #

Just put this in  your css file: <br />#ui-bar, #ui-body {<br />background: hidden;<br />background-attachment: fixed;<br />background-color: transparent;<br />border-col

If you're otherwise using the original colours, try adding this to your CSS: #ui-bar {<br />background-color: rgba(34,34,34,0.25);<br />width: 130px;<br />}

Put something like the following in a script tagged passage: $(&quot;#ui-bar #credits&quot;).empty().append('Fabriqu avec &lt;a href=&quot;http://twinery.org/&quot; target=&quo

You'll note there's no animation for visibility on the #ui-bar:not(.hide) ruleset (though I could have added one using step-start), which is because it would be pointless.  The UI bar needs to be visi

Thank you! Works perfect. The only thing that confuses me is what does the second set of times do in this part: <br />#ui-bar.hide {<br />opacity: 0;<br />visibility: hidden;<br /

Try the following CSS: (n.b. the use of the visibility property ensures that the UI bar is non-interactive while it's hidden) <br />#ui-bar.hide {<br />opacity: 0;<br />visibility: h

Sometimes I want the UI bar hidden to display background art without interference. I achieve this with: <br />#ui-bar.blank {<br />display: none;<br />}<br />&lt;&lt;ad

html {<br />/* Vertical colour gradient */<br />/* Fallback colour */<br />background-color: black;<br />}<br />html.title {<br />}<br />.title .passage a {&l

Though, the following, which only handles #ui-bar menu links and story links (not bearing the newlink class), might be a bit better: <br />$(document.body).on(&quot;mouseenter&quot;, &am

transparent;<br />} <br />#ui-bar, #ui-body {<br />background-color: #222;<br />color: #e6e6e6;<br />background: hidden;<br />background-attachment: fixed;<br

#ui-bar {

The following CSS will cause it to not be displayed: <br />#ui-bar {<br />display: none;<br />}<br />

Review Material (New Tab):  This example opens the passage to review in a new tab/window.  Note: For the newly opened tabs/windows, the example is currently setup to remove the UI bar (I figured that

3.5em 3.5em 3.5em 29em;<br />}<br />#ui-bar {<br />/* width: 14.5em; */<br />width: 22.5em;<br />}<br />

* The #ui-bar's style.

<br />@media screen and (max-width: 800px) {<br />#ui-bar footer {<br />margin-top: 1.5em;<br />}<br />}<br />

screen and (max-width: 800px) {<br />#ui-bar footer {<br />margin-top: 1.5em;<br />}<br />}<br />

/>margin: 3.5em;<br />}<br />#ui-bar {<br />left: auto;<br />right: 0;<br />width: 18em;<br />padding: 3.5em 3.5em 0 1.5em;<br />border: none;<br />

Moving the SugarCube side-bar (#ui-bar) from the left side to the right is not the hard part and can be done simply by unsetting its left property and assigning it a right one. (note: you may also wan