[Sugarcube] Changing the visuals for dummies

Gorlath

So, due to a certain issue, I've had to upgrade my sugarcube to version 2. As for why I wasn't using version 2 in the first place, my reason is very simple: I preferred how version 1 looked.

Now, since I have no choice but to use version 2, I must ask "How do I make Sugarcube Version 2 look like Version 1.0.34"?

More specifically, I want to know:
-How to disable the arrows at the top of the sidebar that allow one to go back in the story's timeline. (The arrow that hides the sidebar is fine to stay)
-How to change the font size and type back to 1.0.34's smaller, more pleasing style
-The Saves/Restart buttons are fine as is, but it would be nice to know how to create new buttons of that style for, say, an inventory button.

I'm assuming I have to change the CSS, but I am a total beginner when it comes to that.
I've looked at the CSS documentation on the sugarcube website and it might as well all be in greek because I can't make heads or tails of it.
Can anyone point me to the right spots?

TheMadExile

Gorlath wrote: »

-How to disable the arrows at the top of the sidebar that allow one to go back in the story's timeline. (The arrow that hides the sidebar is fine to stay)

Disable the history controls via the Config.history.controls property. For example: (goes in Story JavaScript)

Config.history.controls = false;

Gorlath wrote: »

-How to change the font size and type back to 1.0.34's smaller, more pleasing harder to read style

Fixed that for you.

Put something like the following in the Story Stylesheet:

html {
	font-size: 14px;
}

Gorlath wrote: »

-The Saves/Restart buttons are fine as is, but it would be nice to know how to create new buttons of that style for, say, an inventory button.

You're probably looking for the StoryMenu special passage.

Gorlath

Thanks for the reply.
Simply put, I just prefer how the smaller font size looks.

Oh, something else I forgot to ask in my above post:
Sugarcube 2 seems to push all the text out to the right a little bit instead of having it printed directly next to the UI bar. How can I left-align everything? Would that also be a thing in html{}?

greyelf

Gorlath wrote: »

Simply put, I just prefer how the smaller font size looks.

Have you ever asked your Readers (especially those with eye problems or smaller screens) if they like the smaller sized font? *smile*

Claretta

Can just give people an option or implement media-queries.

It's pretty easy. Eg put this code after the html entry in the sugarcube custom css

@media screen and (max-width: 1900px) {html{font-size: 16px}}

You can also use the <<addclass>> macro to add such a rule in an options screen. Eg

<<click "Supersize Me">><<addclass "html" "biggerfont">><</click>>

Then in css you'd write

html. {
	font-size: 14px;
}

html.biggerfont {
	font-size: 16px;
}