CSS - and Display in Sugarcube

Comments

• Gryphbear

  December 2016 edited December 2016

  Hmm, I guess my explanation isn't making much sense. lol.
  
  Passages 'inherit' the CSS from the parent Passage, right? meaning, if you do a <<display "PassageName">> inside the main Room/Passage that you clicked a link to get 'more info' on something. Then the Passage that's been modified with a CSS code to make it 'look different' would still inherit the Main Passage's CSS?
  
  I'm trying to make 'information blurbs' I guess you'd say, appear different than the main story, and appearing inside that.
  
  Main Story
  
  Blah blah blah (in Main Story Passage)
  
  <<display Link to "Info Blurb" Passage inside Main Story>>
  
  Blah blah Main Story continues...
  
  etc etc.
  
  (I want to make the <<display link>> code take the modified CSS from the Info Blurb Passage and display that CSS just for the info blurb passage alone, then continue with the standard CSS for the rest of the Main Story Passage? Is that possible?)
• greyelf

  December 2016

  The <<display>> macro inserts the content of named passage into the current passage, and it does it in a way that makes the inserted text appear as if it was originally part of the current passage.
  
  If you want to distinguish the inserted text from that of the current passage then you need to wrap that text in markup that identifies it. One way to do this is to use Custom Styles.
  
  1. The Info Blurb passage:
  You can use either the inline or the block formats depending on how you want to style the blurb content. The example uses a CSS class named blurb, you can use a different class name or an element ID if you want.
  
  1a. Inline

  @
  

  1b. Block

  @
  

  
  2. The current passage:

  Some text
  <<display "Info Blurb">>
  Some more text
  

  
  3. The CSS selector to use to style the blurb (based on 1a or 1b)
  If you change the class in point 1 or replace it with a element ID then you will need to change which CSS selector you use, also the following only changes the background colour but you can do what styling you want.

  .blurb {
  	background-color: grey;
  }
  
• Gryphbear

  December 2016 edited December 2016

  @--- markup@@ stuff.)
  
  Thanks. I'll try that now.
• Gryphbear

  December 2016 edited December 2016

  Okay. How do you make it appear - like if I want to click a link - and it appears below that? I was trying to do it with
  

  <<link "A chubby orc">>is lounging against the wall, smoking a cigar.<<replace ".extra">><<display "A Chubby Orc">><</replace>><</link>>
  

  
  (I realize that the code above is slightly incorrect and won't actually show the rest of the initial sentence, but I'll edit that part later.)
  
  I was assuming since .extra was the selector I used for the CSS and the Custom Markup... Unless "selectors" play a different role in the replace macro? like I need to add an # to extra - like
  
  @.extra; markup just makes it a dotted line around the link itself.
  

  <<replace "#extra">> text.... <</replace>> instead of ".extra"?
  

  
  I don't particularly need to wrap the link itself into a dotted border - but it does scream "CLICK ME" heh. But I'd like the result to be wrapped in the dotted border.
• Gryphbear

  December 2016

  I believe I've cracked the mystery so far. It partly was a matter of nesting <<link>> and <<replace>> to keep replacing the info blurbs with new blurbs and kinda giving a link in te new one to explore until you're done. This method should work better for me. Thanks. This is without resorting to 'extra' passages.
• Gryphbear

  December 2016 edited December 2016

  Okay, I sorta have one question - I have managed to do a decent 'info blurb' thing that takes place inside the same passage with <<link>> and <<replace>>, but my question is - can I make those collapsible ?

  @\
  

  
  I hope that's not too messy. My idea was to try to create collapsible info blurbs - but I'm not sure if that's possible with my coding above. I did hit enter on the code above just for clarity's sake, but it's all smushed into one block in my TWINE project. The best I can do with this is reintroduce the initial paragraph or whatever without the link - I realized I'd have to keep doing it over and over to create a collapsible effect but it'd waste space.
• TheMadExile

  December 2016

  If they don't need to be a one and done kind of thing, then it would likely be better and simpler to do something like a spoiler. For example:

  @
  

  You'll also need to add the following CSS to your styles:

  .hide { display: none; }
  
• Gryphbear

  December 2016 edited December 2016

  !! much simpler than what I was going for. lol. Thank you
  
  Edit: Works like a charm! Thankee.