In this post from the Easy WordPress Tutorials, we are going to see how to customize the colors of the components or blocks of our WordPress Post to Style Your Post easily. This comes in 2 parts:
• Theme Colors selections:
Where you will be able to change the colors using the tools built-in WordPress for:
- Paragraph Text and Background from block side tab
- Table background
- Links, one setting for all links in your pages, posts, and menus
- Page/Post Background, One setting applies for all posts and pages
• Bonus Part: Use HTML
Where you will be able to change the block HTML to add your own touch of colors and style. Guess what are the PROS and CONS?
- Change the color of a block that doesn’t offer default color change selection in the side tab as in Quotes
- Change color for a specific block as different from the theme
- You can save it as a reusable block and call it back in any post
- You can’t return it from HTML to block view after editing the HTML code of the block.
- Some HTML styles customization are overwritten by other parts of the WordPress default CSS
We had a video to demonstrate these steps besides the detailed procedure in this post. You will find the video below here. If you need to know more about styling your posts, see Part II
• Theme Colors selections:
Themes as the TwentyTwenty theme from WordPress offers a standard set of colors that match together to make the essence of the theme. This selection is either in the theme customization or the blocks sidetab.
This doesn’t apply for every block of the design blocks. Some of them don’t have the option to change colors as Quotes.
Paragraph Text and Background from block side tab
The screenshot above displays the options that appear in the sidetab when you select the Paragraph block. WordPress offers 5 basic colors for the text and background based on the theme standard colors.
Note: You can select a custom color from the windows standard pallet if you clicked on “Custom Color” in the screenshot above. But remember the hex code of your selection if you want to reuse it again
But, suppose that you changed the default background color for the TwentyTwenty theme to a blue color, for example, these 5 colors would change as the screenshot beside.
Note: It might not return to the original set even if you returned to the default background, it replaces one of the selections with the blue trial you had made.
For the table, you have only a selection for the background color which will appear only for the middle rows if you had chosen a striped design.
Note: If you have changed the theme background color, It won’t change the 4 standard colors for table background; light grey or pale (green, blue, pink). Also, there is no option to select a customized color.
Links, one setting for all links & Page/Post Background in your pages, posts, and menus
From Appearance on the side menu of your admin dashboard, select “customize”. There you will find great options for customizing your theme and we had explained some of them in our video here.
One of the customization menu items is “Colors”. It allows you to change three main color properties of your theme:
- Background color
- Header and Footer Background color
- Primary Color, Apply a custom color for links, buttons & featured images.
Once you changed one of them, this effect will be carried out to all pages and posts even those published before this change. <- THIS IS AN IMPORTANT NOTE.
Theme offers one default color and a selection from the colors pallet if you which to go beyond the recommended ones.
Changing the background color, Changes the background color of every post and page and also impacts the 5 color selections of some content blocks as the paragraph block as they change automatically to match the new background color through an algorithm in the WordPress code itself.
Bonus Part: Use HTML to change the content block color
Although WordPress is mainly written in PHP, the server changes it to HTML to be displayed on your Browser. Each content block you select while writing your post is actually a group of HTML tags.
Even if that’s your first time to listen about HTML, it is easy. Simply it is written in the form of tags that tells the browser how to display this piece of the page whether it is a heading, a paragraph, an image, or something else. The decoration comes in one of 2 ways: either you write a separate style sheet where you enter the colors and other visual effects that displays the decoration of this tag or you add a style order inline with the HTML tags.
To go directly into action, the code to the side is what WordPress uses for Quotes. Quotes had no option to change colors in its sidetab.
If you want to return back to visual block edit, select “Edit Visually” from the 3 dots above the block
Now to change the background color of this Quote to be orange in color we need simply to insert:
in the paragraph opening tag <p> to look like this: < p style=”background-color:orange;”>