Simple WordPress CSS Text Size and Color Tweaks

This isn't really Linux stuff directly, but is PHP and HTML coding related and found in some scripts like Apache confs maybe, so good to understand a little if you have never done an old fashioned HTML web page before.

Having spent a lot of time on Blog stuff lately, I thought I would put a couple of things that I found that may help people overall – like the finer points of design of your WordPress page.

The nastiest area for fine tuning is the CSS PHP Editor which looks a bit intimidating to non-programmers but can make a huge difference to your site, and I found some sections that let me change the colour of some main body text ( a crappy light grey to readable black) and green links in the main menu bar.

Before you change anything, play safe and copy the whole script to your PC so if you mess up you can replace the original.

Go to your WP Editor menu:

Select all the text inside (Ctrl-A), copy and paste it into a Notepad, Word, or Libre document and save it somewhere safe.

To change some colors (note US spelling) you can press F3 and type "color" and it will highlight all the places there is a hex number for a colour code, so scroll down and look:

It's not obvious where all the text relates to your actual page and a bit of trial and error may be involved (hence the backup you made), but the main header menu texts I just changed green to match my links, and made a bit larger from 12px to 14px, is in the Top Level Anchors section:

/** Top Level Anchors */

.menu1 ul a,

.menu1 ul a:visited {

display: block;

font-size: 14px;

position: relative;

padding: 20px 16px 20px 0;

text-decoration: none;

color: #009933;

Find the HTML hex color to code value you want at:

http://www.w3schools.com/tags/ref_colorpicker.asp

or similar site. Use it to find what colors are used where in the script and try to find where on the Blog page they relate.

As you see, my link color #009933 is sea greenish that I use for links (Post titles) and the Top menu:

Copy that code and paste it to the section you want to change – click the Update File button and reload your main Blog page to see what you did.

If you really mess up, Select All again and re-paste your backup and try again. Maybe just do one color at a time to be sure it works.

 

 

Comments are closed.

Post Navigation