How To Change Font Colour In Wordpress Blog

If you run a WordPress site, chances are that you'll benefit from knowing how to change the background color of a single page in WordPress. For example, you may want to change a certain WordPress category background color, such as Error Pages, to red. Since many people who run WordPress sites rely on the base software and plugins, many people believe that WordPress cannot change the background color of a single page or category.

How to Change the Background Color of a Single Page in WordPress

Step 1: Learning the Requirements

Since this article is intended to help everyone be able to learn how to change the background color of a single page in WordPress, we'll give you a little crash course on what you need to know to get started! Even if you've never dabbled with HTML or CSS before and have never learned how to change the background color in HTML, don't worry! However, if you want to learn more about them, check out our hand-picked list of books for developers!

1. H yper T ext M arkup L anguage (HTML) is essentially the "base" of each page. It tells you what should be on the page, but not how it should be displayed.
2. C ascading S tyle S heets (CSS) are files that tell your WordPress pages how to display information.
3. You can use CSS in three ways:

1. • As a separate file that you reference in your HTML files. This is common for sites that require a lot of custom styling. This file is usually called "styles.css".
   • As a set of rules within your HTML file. Between <style></style> tags, you can use CSS.
   • Within a single HTML element . For example, <p>[Paragraph here]</p> tags are used for a paragraph. You can use the HTML attribute of "style", so your paragraph tags would look like <p style="color:red">[Paragraph here]</p> .

Step 2: Beginning the Process

First , you'll need to log into your WordPress Portal as an administrator . Once you've done that, you'll need to create a new Page . On your Portal, you should see a left-hand column menu item that says "Pages" as shown in the image below:

After clicking that, you should see a list of Pages you've made. We'll need to make a new one for this tutorial, so click the "Add New" button that we put inside a yellow box in the picture. You should then be taken to a blank page template. Feel free to fill it in with some text!

Once you've filled in some sample data, "Publish" the page by clicking the blue "Publish" button on the top-right corner of the page.

Step 3: How to Choose Your Color

Now that we have everything set up, it's time to change the background of our single page! You're going to need to choose a color. I know what you're thinking: "so something like green, red, blue, or yellow?" And the answer is no ! (Sorry to be so blunt!)

There are actually many ways to specify your page's background color using HTML and CSS. You aren't limited to what we traditionally call "colors". There are three major ways to specify the background color of your WordPress page:

1. Use a CSS "alias". CSS has lots of "aliases" for colors. For example, every common color may be referred to as its name, such as "green", "blue", and "red". Alias names in CSS are NOT case-sensitive. That means that you could use "GrEeN", "Green", or "green", and they would all mean the same thing! However, there are tons of aliases you wouldn't guess. For example, "Bisque", "Chocolate", and "Linen" are three more of the 147 aliases CSS provides. Check out this site for a full listing!
2. Using "hexadecimal colors". We won't go too in-depth, but you could technically produce 16.7 MILLION colors using hexadecimal colors. You'll need to use a "color picker" for this. Often called "hex" for short, these colors are usually the best way to truly get a custom page color! If you need a color picker, this site is a great resource!

Above is our color picker in action. The current hex color is circled in two places in red. There is a "base slider" that goes vertically, and then a square selector where you're free to drag the circle to get that color exactly right.

3. Finally, a newer way to choose colors is the "RGB" method. It's an acronym for "Red, Green, Blue", and, just like it sounds, it is the amount of red, green, and blue present. Each value can be up to 255. If you look at the image we took of the color picker, next to the "hex" color in the red box at the top, there is an equivalent RGB value.

Yes , there are other ways to choose a color, but these three should be plenty for this tutorial! At this point, you are ready for the final step!

Step 4: How to Change the Color of a Single Page in WordPress

Now, you should have your page lined up and a specific color picked out. Next, you'll need to visit the page we made for the example and grab the "Page ID" for it. As we did previously, click "Pages" on the left-hand column menu, then find the newest one you just created. After clicking on it, look at the URL in your browser, as in this picture:

It should be in the format post=[number] . In this case, the number is "37". Staying on that page, hover over "Appearance" in the left-hand column menu as shown, then click on "Customize" :

After that, you'll find yourself on a new page. On the very bottom of the left-hand menu column, there is an item that says "Additional CSS" . This will allow you to change the HTML background color. Click on that.

Now, you'll be shown a page with a (probably) empty box of text. It will look like this (minus the text inside of it that we'll go over):

Note that your Custom CSS changes may not appear in the administrative view or the "Continuous Page/Post View" on the WordPress Portal. That DOES NOT mean that your changes weren't successful. You'll need to check the public page to see the actual CSS changes!

So, taking into account the Page ID (represented by "XX" below) we looked at and the color (represented by "YYY" below) you chose, copy this CSS code that will allow you to change the background color of a single page in WordPress:

body.page.page-id- XX {

background-color: YYY ;

}

After substituting your Page ID and color in, we're ready to go! Just click on the blue "Publish" button on the top-right corner of the editing area.

After that, you may want to verify that the color changed successfully. The best way to do this is to open a new browser window and ensure you're logged out. Styles are often cached, and "Additional CSS" ones may not show up if you're still logged in.

So go to www.yoursite.com/?page_id=XX , where "XX" is the page ID you found earlier. We picked the alias "green" for our example, so here's what ours looks like (we definitely do not recommend this design choice!):

To change the background color of a single post is:

.post-XXX{
background-color:red !important;
}

where "XXX" is the post ID

To change the link color of a single post is:

.post-XXX h2{
color:red !important;
}

To change the hover link color of a single post is:

.post-XXX h2:hover{
color:red !important;
}

Wrapping Up

In conclusion, there are only a couple of things you need to do. Contrary to what some sites say, you do not need a plugin to change a page's background color! Here's how to change the background color of a single page in WordPress:

1. Log into WordPress and make a new Page.
2. Note the Page's ID through the URL in your browser window.
3. Choose a new background color for the Page.
4. Navigate to "Appearance -> Customize".
5. Click "Additional CSS".
6. Use the Custom CSS syntax "body.page.page-id-NN { background-color: COLOR_HERE; }
7. Publish the "Additional CSS" you just added.
8. Visit the page after logging out to ensure the style was applied correctly.

The above article may contain affiliate links, which help support Clever Sequence

Table of Contents To change your Facebook profile picture, you press the camera icon and choose a new one. You can upload it from your

Read More

December 1, 2021

Table of Contents It doesn't matter if you own your own business, work as a freelancer or have friends who never seem to have cash,

Read More

October 12, 2021

As a WordPress administrator, one of your main goals is likely to drive as much traffic as possible to your own website. One way to

Read More

September 26, 2021

Table of Contents On any given day, almost 100 million photos and videos are posted to Instagram. With so much content being posted, it doesn't

Read More

September 24, 2021

Table of Contents The group feature on Facebook is a great way to help you connect with like-minded individuals. There are so many different interests

Read More

September 23, 2021

Table of Contents Memes are a great way to express yourself and entertain others. If you've been online at all, you have been exposed to

Read More

September 21, 2021

How To Change Font Colour In Wordpress Blog

Source: https://cleversequence.com/how-to-change-the-background-color-of-a-single-page-in-wordpress/

Posted by: lottwasso1969.blogspot.com

Share this post