Sunday, September 20, 2015

How to edit wordpress theme or change styles

Editing wordpress theme is a simple task. But before doing that I would recommend have little bit idea about PHP, HTML and CSS.

Assuming you know at least HTML and CSS, first install a plugin called wpide. Though it is outdated, I often use this one for every site that install. This helps me to edit the site quick or to make changes pretty fast.

Lets work on a simple example:
    Installed 2015 wordpress theme. Increase the default site title font-size.



Step 1: Checking the existing styles :

Open your site in your browser, after opening the site, press ctrl+shift+I .

Press the inspect icon(looks like search icon), and inspect the title .. you will see element styles 



1. select the device on which platform you want to test. In our case I selected Laptop.
2. Title we want to modify
3. Elements section shows the element we have selected
4. Styles shows the styles of the element we have selected. 

So, at moment we do not have any styles to the site title. Note that the site title(h1) has classname as site-title.



STEP 2: Adding the styles :

Lets add couple of style properties to the site-title in our style.css file. 

open your wordpress admin panel and also wpide screen. It should look like below


Select your theme and you should see style.css file 

Add the below style to that file 

.site-title {
   font-size:45px;
}


Or you can edit in your chrome dev tool.. just click on the element style and add that style property to see the changes instantly.
But since we have added that style in our stylesheet file, I am not doing that.

So, the result of our style will increase the font-size of the title.
Below is the result.


No comments:

Post a Comment