Default CSS Stylesheets in Sugarcube

Comments

• idling

  June 2017 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();
  
• TheMadExile

  June 2017

  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.
  
• tau

  June 2017 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.
• TheMadExile

  June 2017 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:

  • SugarCube v2 Markup Language > Basic Formatting—you may also use HTML markup if you wish.
  • EDIT: SugarCube v2 CSS > Example Selectors may also help with a few things.

  
  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;
  }
  
• tau

  June 2017

  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.)
• TheMadExile

  June 2017 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.
  
• tau

  June 2017

  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.
• tau

  June 2017

  It works! Thank you so, so much for your help.