Being incredibly new at things like CSS and html, I was incredibly fearful of what kind of irreversible damage I could cause. However, with a bit of patience, and a keen sense of researching and learning, I’ve discovered that there is an entire world of customization available. If you’re also the type of person to find this aspect of the internet to also be a vast and scary-unknown, I completely understand you. In this blog post, there are some examples of how I managed to change a wordpress theme from it’s original state to the edited version, along with the CSS to make it all happen.

Screen Shot 2015-10-21 at 11.03.49 AM
Original Appearance

 

Argent

The theme above is the called Argent, and to change the theme I changed:

  • The background colour
  • The site description
  • The site title border

 

The bolded code corresponds to the list above and shows where exactly I changed the code:

.site-branding {

background-color: #F0F5F5;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

margin: 0 auto;

padding: 4.25em 0;

position: relative;

text-align: center;

 

.site-description {

display: inline;

font-family: “Cabin”, Helvetica, sans-serif;

font-size: 16px;

font-size: 1.6rem;

margin-top: 0.8889em;

^ site description

 

.site-title a {

border: 5px solid current Color;

color: #222;

display: block;

padding: 0 .25em;

}

 

Yuuta

The theme above is the called Yuuta, and to change the theme I changed:

  • The header font size
  • The font weight of the many headers
  • The background colour
  • The site title font weight
  • The site title font colour

The bolded code corresponds to the list above and shows where exactly I changed the code:

h1 {

font-size: 40px;

}

 

h1,

h2,

h3,

h4,

h5,

h6,

blockquote, q {

font-family: “Roboto Slab”, Times, Georgia, serif;

line-height: 1.25;

margin: 0 0 .6em;

text-rendering: optimizeLegibility;

clear: both;

font-weight: 200;

word-wrap: break-word;

-ms-word-wrap: break-word;

}

 

.home .hentry,

.search .hentry,

.archive .hentry {

background-color: #FFFCF0;

border-bottom: 1px solid #eee;

}

 

.site-title {

font-size: 70px;

text-transform: uppercase;

display: inline-block;

font-weight: 700;

margin: 0;

}

.site-title a {

color: #CEE6FF;

}

Freedom

The theme above is the called Freedom, and to change the theme I changed:

  • The header tag colour
  • The site title’s colour and font size
  • The site description’s font size

The bolded code corresponds to the list above and shows where exactly I changed the code:

h1, h2, h3, h4, h5, h6 {

padding-bottom: 18px;

color: #FF3385;

font-weight: normal;

font-family: ‘Fira Sans’, sans-serif;

}

#site-title a {

color: #A3A3FF;

font-size: 80px;

}

#site-description {

line-height: 24px;

font-size: 15px;

color: #333333;

padding-bottom: 0px;

font-family: ‘Vollkorn’, serif;

}

Posted by:curiousthekat

I've never truly been that typical. I also don't trust people who don't eat garlic

Leave a Reply

Your email address will not be published. Required fields are marked *