I’ve not had too many problems with changing the colours in my story’s stylesheet so far, but today I decided to change them again, and I found that not all colours work. Some of them turn the background grey instead of my intended colour, and a lot of them turn the text white. Even the code #000000 won’t work, still leaving the text white instead of black. I’ve turned off dark mode for the page on my browser so I know it’s not that. Does anyone know why this is happening?
Could you post the relevant CSS code?
(it’s hard to say what works/doesn’t work without seeing it. Thought most CSS issues stand from a missing ; at the end of a rule or targetting the wrong selector)
1 Like
Manon is right that we’ll need a little more information about how you are changing the colour. Be sure to post your code between surrounding triple graves/acutes (```).
One thing that you can do, in the meantime, is see if your colour changing code is actually making it’s way into the story’s CSS. To do this, use the browser’s inspector by (F12 key or) right-clicking on the text that should be a different colour and choosing Inspect. The inspector will reveal all the CSS styling that affects that single bit of text. You may also see where certain colours are being overridden and cancelling out other styles. It’s a little confusing at first, but it’s well worth learning this CSS debugging technique if you wish to style your stories further. I typically use orange or cyan as a test colour so I can spot the preview colour box right away in the inspector’s code.
If you don’t see your #000000 colour anywhere (overridden colours have a strike-through), then your colour style code is not valid CSS syntax and we can help you fix that. Curious, are you styling links or regular text? Links can be trickier sometimes.
Here’s the code I’m trying to use:
body {
background-color: #c2c2a3;
color: #003300;
font-family: Futura, sans-serif;
font-size: 125%;
}
There’s also when I tried to make the text black but it still turned out white.
body {
background-color: #c2c2a3;
color: #000000;
font-family: Futura, sans-serif;
font-size: 125%;
}
Also, it’s just regular text, I was going to move on to the links after I got this sorted.
The code provided seem correct. So there must either be:
- a sub element to the body who overrides it (like in
#story#passages.passage) - another
bodylater down your Stylesheet overriding it - some CSS code directly in your passage
Is that your whole CSS?
1 Like
You mentioned that your background isn’t always working as well as your text colour. Sounds like you have a piece of code that’s overriding things. Perhaps there is something in the header or footer passages that’s overriding your colours?
This is a perfect scenario to use the browser’s Inspector. Just saying. It will show you the exact colour value that’s being shown in your story. Then you can search your story code for that same colour value and locate the culprit CSS in whatever passage it might be in. Manon’s explanation is spot on for what is happening, but the Inspector will reveal the value of what’s overriding your CSS or if your CSS is even acceptable. It will show you all styles that are trying to be applied, even the ones that are being overridden.
This video shows a quick way to use and understand the basics of the inspector. I watched it and feel it’s perfect for beginners. Developer Tools Tutorial | How to Use Chrome's Web Inspector - YouTube
It works practically the same way no matter which browser you use.
Curious, if you were to open a new story and put that same CSS code in it, and just type some text in the first passage, does it work as expected? If so, you’re going to have to hunt down the problem CSS in your existing story to fix the issue.
Good luck, Jess!
All the colours are the same when viewing the page source. Also, I made a new story and copied the stylesheet into it, and it does the same thing. I might as well post a copy of everything in my stylesheet so far:
#ui-bar-history [id|=history],#ui-bar-toggle{font-size:1.2em;line-height:inherit;color:#000000;background-color:transparent;border:0px solid #000000}#ui-bar-toggle{display:block;position:absolute;top:0;right:0;border-right:none;padding:.3em .45em .25em}#ui-bar.stowed #ui-bar-toggle{padding:.3em .35em .25em .55em}#ui-bar-toggle:hover{background-color:#000000;border-color:#000000}#ui-bar-history{margin:0 auto}#ui-bar-history [id|=history]{padding:.2em .45em .35em}#ui-bar-history #history-jumpto{padding:.2em .665em .35em}#ui-bar-history [id|=history]:not(:first-child){margin-left:1.2em}#ui-bar-history [id|=history]:hover{background-color:#000000;border-color:#000000}#ui-bar-history [id|=history]:disabled{color:#80ff00;background-color:transparent;border-color:#000000}#ui-bar-body{line-height:1.5;overflow:auto}#ui-bar-body>:not(:first-child){margin-top:2em}#story-title{margin:0;font-size:162.5%}#story-author{margin-top:2em;font-weight:700}#menu ul{margin:1em 0 0;padding:0;list-style:none;border:0px solid #000000}#menu ul:empty{display:none}#menu li{margin:0}#menu li:not(:first-child){border-top:0px solid #000000}#menu li a{display:block;padding:.25em .75em;border:0px solid transparent;color:#000000;text-transform:uppercase}#menu li a:hover{background-color:#000000;border-color:#eee}#menu a,#ui-bar-history [id|=history],#ui-bar-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#menu-core li[id|=menu-item] a:before,#ui-bar-history [id|=history],#ui-bar-toggle:before{font-family:tme-fa-icons!important;font-style:normal;font-weight:900;font-variant:normal;line-height:1;speak:never;text-rendering:auto;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:000000}#ui-bar-toggle:before{content:"\e81d"}#ui-bar.stowed #ui-bar-toggle:before{content:"\e81e"}#menu-item-saves a:before{content:"\e82b\00a0"}#menu-item-settings a:before{content:"\e82d\00a0"}#menu-item-restart a:before{content:"\e82c\00a0"}#menu-item-share a:before{content:"\e82f\00a0"}
#ui-bar-tray {
position: absolute;
top: 0.2em;
left: 0;
right: 0;
}
#ui-bar {
background-color: #24170b;
color: #80ff00;
font-family: Futura, sans-serif;
}
#ui-bar-history [id|=history], #ui-bar-toggle {
color: #80ff00;
}
#menu li a {
color: #80ff00;
}
body {
background-color: #c2c2a3;
color: #003300;
font-family: Futura, sans-serif;
font-size: 125%;
}
a {
color: #4dff4d;
}
a:hover {
color: #4dff4d;
text-decoration: underline;
border-bottom: 2px solid #4dff4d;
}
/* Bottom Bar styling - Start */
#bottombar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000000;
border-top: 0px solid #000000;
box-shadow: 0 0 0px 0 #000000;
z-index: 40;
}
#bbblock {
margin-left: 20em;
margin-right: 2.5em;
-o-transition: margin .2s ease-in;
transition: margin .2s ease-in;
}
#bbtext {
text-align: center;
max-width: 54em;
margin: 0 auto;
}
#ui-bar.stowed~#story #bbblock {
margin-left: 4.5em;
}
@media screen and (max-width: 1136px) {
#bbblock {
margin-left: 19em;
margin-right: 1.5em;
}
#ui-bar.stowed~#story #bbblock {
margin-left: 3.5em;
}
}
@media screen and (max-width: 768px) {
#bbblock {
margin-left: 3.5em;
}
}
/* Bottom Bar styling - End */
#topbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000000;
border-top: 0px solid #000000;
box-shadow: 0 0 0px 0 #000000;
z-index: 40;
}
/* Used to align label for volume slider */
input[type=range] {
vertical-align: middle;
}
There is some red text that might be what’s causing it, it’s where it says “font-smoothing”.
Seems to be working fine to me on a new story.
Is there really no other code that could affect it anywhere else? Like in your JavaScript or passage where this happens, or a SpecialName passage or a widget?
OH WAIT
Is your computer/browser on some of darkmode that overrides the text colour of a page?
(this happened to a player of mine)
I do use a dark mode extension but I had it disabled for that page. The whole browser might have one enabled, though. I tried it in a private window and it worked, so I guess it must be.
3 Likes
I can confirm that I had exactly this issue using the following extenstion for Firefox:
Is this the extension you have installed @JessFB?