CSS - Adding background colour to your post
Yay to CSS but boo to the time spent on trying to figure it out.
So I want to share something I have learnt so far in case somebody would like to know of it as well! How to add a background colour to your post in case it starts to seem dull or unexciting.
1. When you start a post, choose 'text' instead of 'visual'
2. Now copy and paste the following :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.The line 'This is a heading' is where you can replace it with your heading. The line 'This is a paragraph' is where you can replace it with your content.
4.The background colour ' linen' could be replaced with any background colour you like. You could also use hex colours which you could choose from this link http://www.color-hex.com/
5. So far though, when halfway through I click on 'visual' for ease of typing, it erases all of the CSS coding. Hence, if you start with 'text' you have to keep at 'text' (or at least until I learn how to overcome it). Every step you take, you could see its outcome by clicking on 'Preview' .
Ok that's all for now. More soon as I learn it. Hope it was somewhat helpful. Let me know if I missed anything or if you have any questions!
Join FREE & Launch Your Business!
Exclusive Bonus - Offer Ends at Midnight Today
00
Hours
:
00
Minutes
:
00
Seconds
2,000 AI Credits Worth $10 USD
Build a Logo + Website That Attracts Customers
400 Credits
Discover Hot Niches with AI Market Research
100 Credits
Create SEO Content That Ranks & Converts
800 Credits
Find Affiliate Offers Up to $500/Sale
10 Credits
Access a Community of 2.9M+ Members
Recent Comments
4
Join FREE & Launch Your Business!
Exclusive Bonus - Offer Ends at Midnight Today
00
Hours
:
00
Minutes
:
00
Seconds
2,000 AI Credits Worth $10 USD
Build a Logo + Website That Attracts Customers
400 Credits
Discover Hot Niches with AI Market Research
100 Credits
Create SEO Content That Ranks & Converts
800 Credits
Find Affiliate Offers Up to $500/Sale
10 Credits
Access a Community of 2.9M+ Members
Hey, there - great share! I don't know about you and maybe it's just the theme you've chosen to use?? but I can usually flip back and forth between text and visual and see what the html I've added is going to look like. Just a thought - maybe "save as draft" between additions so it stays put?? I never use CSS in situations like this, though. What I want to do whenever I want color in my post is use plain, 'ol HTML, like this:
<body bgcolor="#E6E6FA">
Hello world!
Visit our new home on the web!
</body>
Or whatever color, like "linen" you want.
However - there is CSS coding you can use in your index.php under "Editor" that will allow you to have different backgrounds and/or colored backgrounds for each post or category if you want to go that way.
Hi Gail!, it could very well be the theme I chose. Because the moment I flip too visual , I won't be able to see any changes made. and when I flip back to text, all the coding will be gone except the content will remain. I save as draft in case i accidentally hit the visual button so that I don't lose the coding. but if i do hit the visual button I have to exit the post and enter back in. making sure that when I leave the post it is on the text site so that when i enter again the coding is there.
wow - that's a lot of work and time. There is some CSS coding you can use in your style.css file that will allow you to customize the backgrounds, etc., in individual posts, especially categories. If you want the example for that, here it is:
you will normally see something like a div with post-id, but this will add a new variable post_class to the style.css file like shown in the example below:
What this does is give you options; it would look something like this, for example if your category were "dancing":
So if you open your style.css file and add the class .category-dancing, you will be able to make your posts from the "dancing" category (replace YOUR category, of course) look different in the post.
So... you could put
.category-dancing{background: #97c3e1; border: 1px solid#84aac4;}
This will make your "dancing" (or whatever) category posts have a blue background with a dark blue border. This is just an example.
You can further this by adding a different link class for .category-dancing etc. You can use the same technique to make posts with a specific tag look different.
Hope this helps.
Yeah, that definitely helps! Thanks! But I would need to do a child theme in order to not lose all that coding in case of a theme update right? I tried to do a child theme once and I was locked out of my site hahaha. Gave me such a fright that I broke out in a cold sweat thinking I lost all my stuff. Good thing support was able to retrieve it for me with no lost. Hence, why I don;t find it time-consuming to do coding for every individual post. Eventually, though when I start my second site, I will not make that same mistake and start off with a child theme first.