Customizing sugarCube sidebar

Douman

Hej folks,

I'm trying to understand how to change position of side-bar in sugarCube but that's just not possible for me...
From what i can see in SugarCube source code is that side bar belongs to #ui-bar and i wanted to move it to right part(including line too)
But i just cannot understand this CSS and how to change default style...

greyelf

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 want to move its padding and border)

Start with something like the following CSS:


:: Your Stylesheet Passage [stylesheet]
#ui-bar {
left: auto;
right: 3.5em;
padding: 0px 0px 0px 1.5em;
border-right: none;
border-left: 1px solid #FFF;
}


The hard part is reformating the other CSS elements like body and #passages as theses are what defines the overall page layout. So you will need to adjust their margins, paddings, borders, sizes, etc... until the page layout looks the way you want it.

Correction: Fixed value assigned to new left property based on TheMadExiles' comment.

Douman

Thank you. And it seems it causes bunch of problems... it will take me a while to adjust look of page

TheMadExile

This style set should get you most of the way there (for all devices, both normal and small format):


/* Basic styling for all */
body {
margin: 3.5em;
}
#ui-bar {
left: auto;
right: 0;
width: 18em;
padding: 3.5em 3.5em 0 1.5em;
border: none;
border-left: 1px solid #fff;
}
#ui-bar header, #ui-bar #story-caption,
#ui-bar nav, #ui-bar footer {
text-align: left;
}
#ui-bar ul {
padding: 0;
}
#passages {
margin-left: 0;
margin-right: 23em;
padding: 0;
border: none;
}


/* Basic mobile device styling */
@media screen and (max-width: 1280px) {
body {
margin: 3.5em;
}
}
@media screen and (max-width: 960px) {
body {
margin: 3.5%;
}
#ui-bar {
padding-top: 3.5%;
}
}
@media screen and (max-width: 800px),
screen and (max-width: 768px) {
body {
margin: 3.5%;
}
#ui-bar {
position: relative;
top: 0;
left: 0;
right: auto;
width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
border: none;
border-bottom: 1px solid #fff;
}
#ui-bar header, #ui-bar #story-caption, #ui-bar footer {
width: 60%;
}
#ui-bar nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
text-align: right;
}
#ui-bar ul {
margin: 0;
}
#ui-bar li {
margin-bottom: 0.5em;
}
#ui-bar li#menu-story {
margin-bottom: 0.7em;
line-height: 0.9;
}
#passages {
width: 100%;
margin: 0;
margin-top: 2em;
padding: 0;
border: none;
min-height: 100vh;
}
}


PS: @greyelf: The value unset is not a valid CSS property value.  For most properties, their default values are usually one of: auto, inherit, none, or 0.  In the case of the left property, auto is the appropriate value.


[EDIT]: Updated the styles a bit.

greyelf

TheMadExile wrote:

PS: @greyelf: The value unset is not a valid CSS property value.  For most properties, their default values are usually one of: auto, inherit, none, or 0.  In the case of the left property, auto is the appropriate value.

My mistake, I see now that only Firefox has implemented the unset recommendation so far.

TheMadExile

Considering the speed at which they generally implement CSS features, we can probably expect unset to be a truly usable feature sometime by the end of the decade (maybe).

Douman

TheMadExile,

That's very cool thank you