Why is my background-color not being respected?
Can anyone tell me why the background-color value is being ignored on this page? (Please excuse the mess when viewing source.)
It had been working fine many months (ie the background was blue; the text was white), and then — without me making any changes to the page — it started displaying as a white page. I've exhausted my own skills in trying to get the background set to #0165ff again, and I'm starting to wonder whether I've broken something further upstream: style.css; head.html or similar.
The best way to understand why something looks the way it does on a webpage is to learn how to use your browser's developer tools. Instead of punishing yourself trying to guess what is happening, investing twenty minutes learning how to use the web inspector on your browser will help you immediately understand how your browser is interpreting the CSS and HTML that make up your website.
If you google 'how to use the webinspector safari', (of course replace 'safari' with whatever browser you are using) you'll find some useful guides. Or watch some videos on YouTube if you learn better that way.
To return to your specific question: I used my browser's inspector to work out why your page has a white background, and it look me a few seconds to work out which part of your CSS file is responsible.
Please let me know if you have any questions about this – if you tell me which browser you are using I will happily give you more specific instructions
Answered 8 months ago · Edit answerThanks, you're totally right - I poke around in the Inspector all the time, and only ~50% of the time do I figure out what I'm looking at — it's absolutely time that I learn how to use it properly!
If you're able to point me in the right direction on this one, I can follow along in Safari, Firefox, Chrome - anything really. Thanks.
Answered 8 months ago · Edit answerMy preference is Firefox: if you right click on the page background and select 'Inspect' in the right-click menu, the browser will open the inspector. You should see three columns in the inspector panel at the bottom of the window. On the left-most panel, click on the <body> element. Once you do this, the central panel will show you the cascading CSS styles which affect it. At the top-right of each style entry you should see something which looks like 'style.css:1' – if you click on that text Firefox will show you where in the CSS file the corresponding CSS rule affecting your <body> tag is located.
Does that help? If the above doesn't make much sense, I recommend watching this video on Inspecting the CSS Cascade using Firefox DevTools
Please let me know if you have any questions
Answered 8 months ago · Edit answerThis makes sense and is very useful, and I certainly will make more of an effort to learn my way around these tools.
Unfortunately, if doesn't solve my present issue. I understand where the white background and black text are being set in the CSS: those are my chosen styles for other pages and posts on my Blot site. For the page in question, I had included the following, to override those settings:
</head>
<body style="background-color:#0165ff; color: #ffffff; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 0px;">
<br>
<br>
<div style="font-size: 30px; vertical-align: 15%; text-align: center;">
That worked for many months, then all of a sudden those instructions seem to be ignored. When I view source on the page, they're missing:
</head> <body>
<div class="container">
<div class="main">
<div class="entry">
<br> <br>
<div style="font-size: 30px; vertical-align: 15%; text-align: center;">
Any idea why that might be the case?
Answered 8 months ago · Edit answerAh! Sorry, I had misunderstood.
You're right, something has changed at Blot's end. I had to update cheerio, one of the HTML processing libraries which Blot uses recently. I know they have changed how they handle partial HTML documents. I suspect this has broken your previous technique. It's no longer possible to put a complete HTML document, i.e. including <html><body> tags, inside a markdown post.
To get what you're after working again, I'd consider replacing your inline HTML with a style element that should achieve the same result, and then adding the outer HTML structure to your template's entry.html file. This should work in the post itself:
<style>
body {
background-color:#0165ff;
color: #ffffff; position: absolute;
top: 50%; left: 50%; -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 0px;
}
</style>
Another option is to instead sidestep the post system and use a standalone HTML file called _z.html. Blot will serve it with a 'pretty URL' at /z and you can use a complete HTML document as before.
Does that work? Please let me know if you have any questions about this or anything else
And sorry for the unneeded lecture on browser developer tools! This one was my fault
Answered 8 months ago · Edit answerThanks so much - I feel a little less crazy! The /z path is actually just so I could play with it whilst keeping it out of public view, the page is actually intended to be my home page at the root domain. That being the case, the style element looks like the way to go!
Thanks again.
Answered 8 months ago · Edit answerNBD, thanks for helping me fix it, and for pointing to those tutorial materials.
Answered 8 months ago · Edit answer