When CSS and HTML meet WordPress

Once a great man said “You are the CSS to my HTML” to his girlfriend. I never understood what he actually meant, just until recently when Bill taught us and showed how coding is done.

In this post I’ll be demonstrating how I managed to change couple of small things in two of the WordPress’ themes. The two themes are namely: Masonic and No Nonsense.

Theme One – Masonic

Below is the screen shot of how the default theme looked before making any changes to it

Before - Theme 1
Before – Masonic

Now, in this theme I managed to change 3 things

  • Background Color
  • Font Family
  • Font Size.

So here is what it looked like after making these changes.

After - Theme 1
After – Masonic

In order to change this theme I used the following code.

Masonic CSS code
Masonic CSS code

Theme Two – No Nonsense

Below is the screen shot of how the default theme looked before making any changes to it

Before - No Nonsense
Before – No Nonsense

With this theme I went a little crazy and changed more than required just to make it look good.

I made following changes

  1. Under Heading 1 I changed
    • color
    • Font Family
    • Text alignment
  2. Under Heading 2 I changed
    • Color
    • Font Family
  3. Under paragraph I have changed
    • Color
    • Text alignment

Below is a screen shot of how the blog looks after making these changes.

After - No Nonsense
After – No Nonsense

To make the blog look like this, I used the codes below.

No Nonsense CSS code
No Nonsense CSS code

Also, I have successfully installed Google Analytics script in the theme header section, here is the screen shot of it.

google-analytics-shot
google-analytics-shot

Overall, it is an awesome experience to learn to code and change websites and customize them as you want.

It is like magic, but with codes.

Categories