0 votes
by (120 points)

So, what i want to do is something I haven't really seen or noticed anyone do before. I guess it's a bit special.
So, in the Story Stylesheet, I know you can adjust several UI elements for Sugarcube's Sidebar, such as changing the background colors of the Title or the font size of the caption.
What I've done is I've disabled the Story Title, Author and UI Bar Tray by using this code
 

#title, #menu, #ui-bar-tray {
 	display: none; 
}

Which was pretty simple. Now, what I would like to do is move the position of the Story Caption to the top, or close to the top, of the Sidebar. The closest thing I've found to an answer to this is by using 

#story-caption {
  background : #ddd;
  top: 100px;
}

The background is so I can see where the position of the story caption area is. Even so, in short, I just want the text in the story caption to reach the top of the sidebar area, where elements like the UI Bar Tray and Story Title might usually be. If that's not possible then, well
Heck

1 Answer

0 votes
by (158k points)

If you use the Inspect feature of your web-browser's built-in Web Developer Tools to look at the layout of the ui-bar-body element (1) you will see that that element has a default top margin of 2.5em.

You need to decrease that element's margin-top attribute if you want both of it's remaining visable child elements (story-caption and menu) to move upwards.

#ui-bar-body {
	margin-top: 0;
}


Now if you inspect the story-caption element you will see that it also has a default top margin, except this time it is 2em instead.

If you want this element to move even further upwards then you need to decrease this value as well, however this will be harder to do than the previous case because this element's default top margin is being applied by a more complex CSS selector.

#ui-bar-body>:not(:first-child) {
    margin-top: 2em;
}

 You can use the !important CSS Specificity exception to overcome this issue like so

#story-caption {
	margin-top: 0 !important;
}

Obviously you can assign either of the above margin-top examples a value other than zero.

(1) In Chrome this can be done by selecting the ui-bar-body element within the Elements tab of the Web Developer Tools panel, and then keeping the cursor hovering over that element.

by (120 points)
Looks like that worked, thank you very much!!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...