Customize Layout of WordPress blog

After reviewing lots of gook-looking blog sites, I can not stand the ugly layout of this blog anymore and decided to improve it considerably. Firstly, a simply theme is installed and then it comes to the most time-consuming phrase; tricks on Style.CSS file to change the layout in my way as the majority of web sites, nowadays, are Div + CSS based. Unfortunately, as a beginner in this technical area, it costs me much longer time to learn the relevant skills (HTML, CSS, DIV etc) from the ground up. Several days are spent on W3Schools.com to obtain basic grasp of HTML/CSS, and another Saturday is fully-occupied by inspecting HTML elements of my blog site in order to understand how the existing layout is defined and identify where to change in source code, without even stepping out of the house during the daytime until I finally made it in the evening.

Inspect Element feature inherent in Google Chrome Browser is a handy tool to instantly check the one-to-one mapping between elements in the website and HTML source codes, and it demonstrates how the website is composed from a HTML/CSS coding perspective.  Plus, it enables you to change the source codes in whatever way you want with the change instantly reflected in the webpage layout, which I believe, will be quite useful for web technology fans. However, you have to bear in mind that the change in source codes is made in an experimental manner, which means the change only affects the single-one locally-cached webpage and the change will be gone when opening the same webpage in a new window or refreshing it. The equivalent in FireFox Browser is a plugin namely Firebug.

After activating Inspect Element feature on Google Chrome Browser(right-click on webpage and select “Inspect Element, or using shortcut Ctrl+Shift+I”), customizing layout of a blog site is kind of a 3 steps deal as per below picture.
Step 1: locate the source code associated with the target element.
Step 2: trace down the source code and identify places where the attributes for that element are defined.
Step 3: make change, verify the outcome, and update style.css file.
tech blog

Below is the CSS Box Model which entails some basic element attributes such as Margin, Padding, Border,
CSS Box Model
In WordPress version 3.5.1, a certain flexibility of theme customizing is also provided in administrative dashboard by introducing Theme Customize function. Simply navigate to Dashboard->Appearance->Themes, customization for some basic elements of WordPress Theme such as scheme color, site title, header image, sidebar etc, is accessible from there.

One Comment

Comments are closed.