Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Default CSS Stylesheets in Sugarcube

I've been working on a story for a while, and recently, I realized that using Sugarcube as opposed to Harlowe would better suit my needs.

However, now that I've switched, I realized that all of the CSS I had in the 'story stylesheet' area is now completely obsolete. It seems to be overwritten by another stylesheet hidden somewhere.

How can I remove or alter the default Sugarcube stylesheet(s)?
Or will I have to change my stylesheet to conform to Sugarcube's format?

Screenshots (ignore the broken image):

2415950090f182155cad0e349a9095.png
671725bb27273da0b481d06aa9dd43.png

The first one is how I'd like it to look, and the second one is with the overwritten Sugarcube CSS.

(Happens with both Sugarcube v1.0.32 and v2.18.0, as I tried both of them)

Comments

  • edited June 2017
    How exactly does your stylesheet look at the moment? Nothing should be overwritten, but if you are adding any custom fonts - those have to go at the very beginning of your stylesheet.

    To get rid of the UI-bar, you can put into you Javascript:
    UIBar.destroy();
    
  • As noted by idling, you're going to need to show your current (Harlowe specific) custom CSS before anyone could tell you how to modify it to work in SugarCube v2—do not use v1. It shouldn't be difficult, however, we can't help you if we don't know what you're working with. When you do, please use the code tag—it's C on the editor bar.
  • tautau
    edited June 2017
    Here's the complete contents of my stylesheet.
    body {
    	background-color: #dddddd;
    }
    
    tw-story {
    	width: 500px;
    }
    
    tw-passage {
    	font-family: courier new;
    	font-size: 16px;
    	color: #000000;
    	line-height: 1.5;
    	text-align: justify;
    }
    
    h1 {
    	font-size: 34px;
    	font-weight: 200;
    }
    
    b, strong {
    	font-weight: normal;
    	color: #000263;
    }
    
    i {
    	font-style: normal;
    	color: #630034;
    }
    
    tw-link {
    	color: #5207B5;
    	font-weight: 300%;
    }
    
    tw-link:hover {
    	color: #B536F5;
    }
    
    tw-sidebar {
    	display: none;
    }
    
    ul {
    	list-style: none;
    	text-align: justify;
    }
    
    img {
    	width: 300px;
    }
    

    (my apologies for some of the nonstandard ... choices, I guess, that I made here. I started this thing way before I learned CSS so I had to improvise).

    I would almost understand if things like tw-passage or tw-link were ineffective because of the whole 'tw' thing, but none of the standard elements (h1, b/strong, i, ul) are working either.

    Edit; didn't see TheMadExile's comment. I'll make sure to use v2 in the future as soon as I know I can change the CSS.
  • edited June 2017
    tau wrote: »
    I would almost understand if things like tw-passage or tw-link were ineffective because of the whole 'tw' thing, but none of the standard elements (h1, b/strong, i, ul) are working either.
    If they aren't working, then you're probably attempting to use Harlowe markup because there's no reason they shouldn't.

    Specific documentation you should probably check out:
    Place In Your Story JavaScript
    You could kind of do this with CSS as you were in Harlowe, however, this is a much better way to remove the UI bar—it doesn't leave any cruft lying around afterwards.
    UIBar.destroy();
    


    Place In Your Story Stylesheet
    Normally, I'd recommend prefixing most of your generic element styles with the #story selector, however, since you're getting rid of the UI bar it may not be necessary, so I won't bother in the example.
    body {
    	background-color: #ddd;
    }
    
    #passages {
    	width: 500px;
    }
    
    .passage {
    	color: #000;
    	font: 16px/1.5 "Courier New", serif;
    	text-align: justify;
    }
    
    h1 {
    	font-size: 34px;
    	font-weight: 200;
    }
    
    b, strong {
    	color: #000263;
    	font-weight: normal;
    }
    
    i, em {
    	color: #630034;
    	font-style: normal;
    }
    
    a.link-internal {
    	color: #5207B5;
    	font-weight: 300%;
    }
    
    a.link-internal:hover {
    	color: #B536F5;
    }
    
    ul {
    	list-style: none;
    	text-align: justify;
    }
    
    img {
    	width: 300px;
    }
    
  • Thank you very much! I appreciate the work.

    The JavaScript code gives me an immediate error upon testing, though, saying that the UIBar is not defined, and it ends up showing anyway. Is this normal?
    (The CSS itself works perfectly fine past that stage.)
  • edited June 2017
    tau wrote: »
    The JavaScript code gives me an immediate error upon testing, though, saying that the UIBar is not defined, and it ends up showing anyway. Is this normal?
    If you're using SugarCube v1, yes. That code will work correctly in SugarCube v2.

    PS: Check the CSS for updates. I made a few edits since first posting it and added another link.
  • I see, thanks. I'll switch to a v2.1 Twine again, because it won't let me unselect v1 Sugarcube even with v2 installed. I'll tell you how it goes.
  • It works! Thank you so, so much for your help.
Sign In or Register to comment.