Help with Twine CSS

Comments

• greyelf

  March 2016 edited March 2016

  Please use the C button in the tool-bar above the Comment field to wrap your CSS/code examples within a code tag, it makes them easier to find/read.
  
  You need to state which Story Format you are using when you ask a question, as answers can be different for each one. Based on the CSS selectors in your example I am going to assume you are using Harlowe.
  

  1. My choices(tw-links) are oddly spaced apart, and I can't seem to solve this.

  You did not supply an example of the passage contents so I am going to assume you did something like the following:

  Some Text......
  [[First Option->Next Passage]]
  [[Second Option->Next Passage]]
  [[Third Option->Next Passage]]
  

  ... and you are wondering why there is a blank line between each of the option markup links.
  The reason is three fold: firstly the default line-height is 1.5em which adds a gap of 0.5em between each line of the output; secondly you probably added a line-break to the end of each option and all line breaks are converted into <br> elements; and thirdly you changed the tw-link element to be displayed as a block which forces the <br> element on to the next line in the output thus increasing the size of the gap.
  
  The simplest solution is to remove the line-breaks between the option markup links:

  Some Text......
  [[First Option->Next Passage]][[Second Option->Next Passage]][[Third Option->Next Passage]]
  

  2. My hover gradient isn't working.
  3. I would like to remove the link highlights that seem to be appearing when I hold my mouse over the links.

  Your tw-link.hover selector is wrong, it should be tw-link:hover

  4. Any idea how I can place a line between the text and the choices?

  You could use a hr element like so:

  Some Text....
  <hr>[[First Option->Next Passage]][[Second Option->Next Passage]][[Third Option->Next Passage]]
  
• ericgonzp

  March 2016

  Thanks a lot greyelf! All of your assumptions were correct. That fixed almost all of my issues but I still have problem #3. While the links are no longer highlighted as I was hopping, the visited links are by default blue and hover purple, any advice on how to fix this? Thanks
  

  tw-story {
      Border:2px solid #999900;
  	border-radius: 25px;
      padding:0px 50px 20px;
      font-family: 'Raleway', sans-serif;
  
  }
  tw-passage{
  	color: black;
  	font-size:18px;
      display: block;
      color: #555;
  	background-color: #FEFFED;
  }
  tw-link {
      padding: 1px;
      border: 1px solid #e5a900;
      color: #524f49;
      cursor: pointer;
  	display: block; 
  	width: 100%;
  	border-radius: 3px;
  	margin-bottom: 1px;
      font-weight:bold;
      font-size:16px;
  	background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
  }
  tw-link:hover {
      padding: 1px;
      border: 1px solid #e5a900;
      color: #524f49;
      cursor: pointer;
  	display: block; 
  	width: 100%;
      border-radius: 3px;
      margin-bottom: 1px;
      font-weight:bold;
      font-size:16px;
      background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
  }
  tw-link.visited {
      padding: 1px;
      border: 1px solid #e5a900;
      color: #524f49;
      cursor: pointer;
  	display: block; 
  	width: 100%;
      border-radius: 3px;
      margin-bottom: 1px;
      font-weight:bold;
      font-size:16px;
  	background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
  }
  tw-link.visited:hover  {
      padding: 1px;
      border: 1px solid #e5a900;
      color: #524f49;
      cursor: pointer;
  	display: block; 
  	width: 100%;
      border-radius: 3px;
      margin-bottom: 1px;
      font-weight:bold;
      font-size:16px;
      background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
  }
  tw-sidebar{
  	display:none;
  }
  
  
  
  
• greyelf

  March 2016

  Try the following CSS.
  I changed the colour of the visited related selectors as requested and I repositioned/simplified the rest a little.

  html {
  	font-family: 'Raleway', sans-serif;
  	color: #555;
  }
  tw-story {
  	font-size: 18px;
  	border: 2px solid #999900;
  	border-radius: 25px;
  	padding: 0px 50px 20px;
  }
  tw-passage {
  	background-color: #FEFFED;
  }
  tw-sidebar{
  	display: none;
  }
  tw-link, .enchantment-link {
  	display: block;
  	font-size: 16px;
  	color: #524f49;
  	background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
  	border: 1px solid #e5a900;
  	border-radius: 3px;
  	padding: 1px;
  	margin-bottom: 1px;
  }
  tw-link:hover, .enchantment-link:hover {
  	color: inherit;
  	background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
  }
  .visited {
  	color: inherit;
  }
  .visited:hover {
  	color: inherit;
  }
  
• ericgonzp

  March 2016

  It's perfect! Thanks a lot for all of your help, I couldn't have figured all of this out without you.
• ericgonzp

  March 2016

  Oh, not so perfect, sadly this amazing CSS, somehow prevent me from ''Bolding'' some key text.
• greyelf

  March 2016

  You need to explain which "key text" you are trying to bold.
• ericgonzp

  March 2016

  The button text, otherwise all other sections can bold perfectly.
• greyelf

  March 2016

  [[Link Text->Target Passage Name]]
  

  If by "button text" you mean the Link Text of your markup links, then in Harlowe that text has a font-weight of bold by default, which is why I did not set that property in the example CSS I gave you.
  
  You can see this yourself in the generated HTML by first using your web-browser's Inspect context menu item while the mouse cursor is over the link text to display the related HTML, and then scrolling the related CSS section downward until you first the relevant inherited CSS properties.