WP Tutorial Request

Newbies Corner
#1

So I am happy with my theme, and feel comfortable with the categories and tags, and such. But you know what I really want to learn to do in WP? Like HTML lite for fonts for dummies or something like that.

I find I want to do super simple things with the colours and fonts on my sites, but am often confined by the theme I’ve chosen. For reference, I’m thinking of my techforteaching.ca sites, which almost all use the Lodestar theme.

I’m digging this theme, but I find the grey colour that it uses for headings and hyperlinks to be almost ignorable by my eyes/mind. I would love to learn how to adapt the theme to let me change these to black and underlined, so they stand out more to my readers. I’d also love to get around the WordPress trend of using All Caps for titles, menus and headings.

Is this at all possible? Can anyone point me to anywhere that I can learn to do this?

Much thanks for all the help so far, this has been fantastic!

#2

There are definitely ways to do this; HTML is what describes the content of your sire (what is a heading? what is a paragraph?) but what you want to learn more about is CSS (Cascading Style Sheets), which controls the formatting for the HTML elements.

You can make such modifications w/o interfering or editing theme files by adding custom CSS to your site via the WordPress Customizer- see

There’s a bit of some learning to figure out CSS. You also will want to learn to use your browser inspector tools to not only see the CSS styles for specific parts of your site (like the grey headings), but to test out changes in the browser. Maybe try

A quick example, I go to your page at https://tips.techforteaching.ca/presentations/best-practices/

And I see the grey headings, so I select the heading text, and control / right click to use Inspect Element, where I see it uses the grey #ccc color:

h2-gret
h2-gret2014×376 95.2 KB

I can edit the color values, or click the box to select a color, maybe red?

h2-red
h2-red2026×294 66 KB

This i not changing your site, just letting you experiment in your browser with the CSS styles for your headers. If I want to use this in WP, I need the CSS code I changed (copy from the inspector):

.entry-content h2 {
    color: #e42c2c;
}

If I was logged into your site as an admin, I would use the Customize link in the admin bar, or Appearances - Customize in the Dashboard to open the WordPress customiser, find the Additional CSS box, and paste in this code. You can preview the changes as you add CSS (its not showing on my site because the theme is different)

additional
additional1708×1140 112 KB

No changes are made to the site until you click Publish.

This is way to quick, not a proper tutorial, but hopefully outlines the concepts. Sorry I am not on task here to do a better tutorial.

1 Like
#3

OMG thank you! I have been pretty daunted by CSS this whole time, but now with the site coming together, it might be the right time to start learning some ways to use it! You always deliver, Alan!

#4

Pardon the caps lock:

I LEARNED CSS! A little bit! Just enough to make these changes, and clean up the fonts and links on the site!

This journey is a real trip :slight_smile: Was so intimidated by CSS only a week ago, and all i needed was a good primer and a couple hours to play.

#5

Thank you so much for asking this! Like you, I enjoy my theme (SemPress) but want to play with fonts!

#6

Thank you very much for the links! They really make CSS less intimidating.