• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
One Happy Studio

One Happy Studio

WordPress Themes built on the Genesis Framework

  • Home
    • About
    • Contact Us
    • Services
    • Portfolio
  • 24 Hour Website
  • Training
  • WordPress Themes
  • Shop ♥
    • FREE 24 Hour Website
    • Theme Documentation

How to change Text color within a WordPress post or page

November 27, 2017 by Susan

In this tutorial, I will walk you through how to change Text color within a WordPress post, page, or widget.

How to change Text color within a WordPress post or page

First, you’ll need to make sure that you are seeing the option to change the text color.

  1. Select the “Visual” Editor button

2. Click on the “Kitchen Sink” icon

3. Select the drop-down next to the Text Color icon (the letter “A”)

How to change Text color within a WordPress post or page
(click on all images to open in new window for better viewing)

4. Use your mouse to highlight the text you want to change, and then click the drop-down next to the Text color icon.  This will then present you with a selection of colors.

5. Select your color from the options available.

How to change Text color within a WordPress post or page
6. Your text has now changed to that color, and your desired color is now offered as a custom color, which you can use as you want throughout the post.

6. If you want to use a custom color (that is, one which is not automatically in the drop-down, click “Custom”

7. In the pop-up type the RGB or Hex color you wish to add as a custom color. Click OK

How to change Text color within a WordPress post or page

How to change Text color within a WordPress post or page
8. Your text has now changed to that color, and your desired color is now offered as a custom color, which you can use as you want throughout the post.

9. Publish your post, and see the results:

How to change Text color within a WordPress post or page

There are limitations to adding a custom color, however; your site won’t save the custom color as a new color option, so if you want to use that color in future posts or pages, you will need to go through the same process. If you want to have a color available permanently, you would need to update your theme’s CSS to add in a particular color, which will become available for all posts and pages.

How to add additional colors to CSS to enable site wide colors in theme

Add the following code to your theme’s stylesheet:

Once you have added this code into your stylesheet, any time you wish to use and of these colors in your posts or pages, add the color using the “span class” associated with your colors:

Here’s how I added each of the colors to my posts:

How to change Text color within a WordPress post or page

And here’s the final result:

 

How to change Text color within a WordPress post or page

You can incorporate these colors into widgets, too. By adding it to your theme’s stylesheet, you are giving yourself much more flexibility with the use of color on your site.

If you would love to incorporate additional colors to your theme, but don’t feel comfortable with doing this yourself please contact me – I’ll be happy to give you a quote to do this..
Category: Genesis4Beginners

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Sidebar

by date

Product categories

  • WordPress Themes
  • Customization
  • Premium WordPress Themes
  • Pretty Darn Cute Design WordPress Themes
  • Services

Looking for something?

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Support

  • Submit a ticket
  • Elise Theme Setup
  • Happy Playful Theme Setup
  • Happy School Days Setup

Favorite Products

Genesis Framework for WordPress Web Hosting WordPress Speed Test Blogging Resources

Categories

Send Susan a
"Thank You"

Get a 7-day Free Trial of PicMonkey
  • How to change Text color within a WordPress post or page 14.6k views
  • Troubleshooting: WordPress Pages Not Displaying Content 6.3k views
  • How to Add Custom Styles to WordPress Widgets 5.2k views
  • Add a button to the Primary Navigation of the Genesis Sample Theme 2.3k views
  • Exclude categories from the WordPress category widget 2k views
  • Add Widget to Primary Navigation 1.6k views
  • Create a Category Blog Page 1.6k views
  • Genesis 3.0 is coming 1.4k views
  • Troubleshooting: Comments Field Not Displaying 1.4k views
  • How to Configure the Foodie Pro Theme Content Archives 1.3k views

Let's Work Together

Contact Us Today