SMD104

Customizing CSS and HTML in WordPress

 

Hello Folks !

I just discovered that the WordPress theme installed on my blog can be edited. Whoa 😮

I did not like a few things about the theme I had installed and I was very happy to know that I can edit it. For instance, I did not like the color of my name in the blog. Well, all I had to do was change some codes (it doesn’t need a super cool IT person for that)  and voila! There you have it ! 🙂

In this post, let’s see how the CSS and HTML codes affect the look of the blog post. I’ve used two themes to demonstrate the difference.

  • Nisarg
  • Rectangulum

Theme: Nisarg

The look of the website before the edit

screen-shot-2016-10-19-at-11-19-15-pm
The CSS code before the edit

.site-title {
 color: #fff;
 font-size: 3.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 10px;
margin-top: 0px;
margin-bottom: 0px;
text-shadow:rgba(255,255,255,.1) -1px -1px 1px,rgba(0,0,0,.5) 1px 1px 1px;
}

The look of the website after the edit

screen-shot-2016-10-19-at-11-20-44-pm

The CSS code after the edit

.site-title {
color: #48d1cc;
font-size: 6em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 30px;
margin-top: 0px;
margin-bottom: 0px;
text-shadow:rgba(255,255,255,.1) -1px -1px 1px,rgba(0,0,0,.5) 1px 1px 1px;
}

 

The three CSS elements changed in the Nisarg theme are:

  1. Font Colour
  2. Font Size
  3. Letter Spacing

Theme: Rectangulum

The look of the website before the edit.

screen-shot-2016-10-19-at-10-30-45-pm

The CSS code before the edit.

.site-title {
font-size:36px;
line-height:24px;
}
.site-header {
background:#48d1cc;
position:relative;
}

The look of the website after the edit.

screen-shot-2016-10-19-at-11-22-22-pm

The CSS code after the edit.

.site-title {
font-size:50px;
line-height:32px;
}
.site-header {
background:#00ffff;
position:relative;
}

The three CSS elements changed in the Rectangulum theme are:

  1. Font Size
  2. Line Height
  3. Background Colour

Code for Google Analytics

The Google Analytics code is used to track the user behavior and activity on the website. The below code (in the image) was placed above the <head> of the HTML section of the installed WordPress theme.

google-analytivs-code
I hope this blog post gave you an insight about how a WordPress blog theme can be customized using CSS and HTML. I would love to hear what you think about this post in the comment section. 🙂

Tags: