Hello all, I just started using twine last night and CSS isn't my strong point so perhaps you can help me with some of my problems that I can't solve myself.
1. My choices(tw-links) are oddly spaced apart, and I can't seem to solve this.
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.
4. Any idea how I can place a line between the text and the choices?
Thank to anyone who has any advice, my css is below, thanks.
tw-story {
color: red;
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;
border-bottom: 1px solid #ccc;}
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-sidebar{
display:none;
}
[img][/img][img][/img]
Comments
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.
You did not supply an example of the passage contents so I am going to assume you did something like the following: ... 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: Your tw-link.hover selector is wrong, it should be tw-link:hover You could use a hr element like so:
I changed the colour of the visited related selectors as requested and I repositioned/simplified the rest a little.
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.