{"id":286,"date":"2014-04-20T02:38:50","date_gmt":"2014-04-20T01:38:50","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=286"},"modified":"2023-10-28T20:24:47","modified_gmt":"2023-10-28T19:24:47","slug":"simple-wordpress-css-text-size-and-color-tweaks","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/simple-wordpress-css-text-size-and-color-tweaks\/","title":{"rendered":"Simple WordPress CSS Text Size and Color Tweaks"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Before you change anything, play safe and copy the whole script to your PC so if you mess up you can replace the original.<\/p>\n

Go to your WP Editor menu:<\/p>\n

\"\"<\/p>\n

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

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:<\/p>\n

\"\"<\/p>\n

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:<\/p>\n

\/** Top Level Anchors *\/<\/p>\n

.menu1 ul a,<\/p>\n

.menu1 ul a:visited {<\/p>\n

display: block;<\/p>\n

font-size: 14px;<\/strong><\/p>\n

position: relative;<\/p>\n

padding: 20px 16px 20px 0;<\/p>\n

text-decoration: none;<\/p>\n

color: #009933<\/strong>;<\/p>\n

Find the HTML hex color to code value you want at:<\/p>\n

https:\/\/www.w3schools.com\/tags\/ref_colorpicker.asp<\/a><\/p>\n

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.<\/p>\n

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

\"\"<\/p>\n

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.<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

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 ...\u00a0 Simple WordPress CSS Text Size and Color Tweaks<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"a3_pvc":{"activated":true,"total_views":1,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":1,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":9998,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/286\/revisions\/9998"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}