WordPress Tutorials Index | Web Page Design Tutorials Home

Modify WordPress Main Contents Area

The main contents area of WordPress blog is the central section that include the Blog Post Section and the Sidebar Section as shown in the diagram below:

Modify WordPress Main Contents Section

This is important to find out the exact div layer that holds the Main Contents Area of WordPress blog.

Open the WordPress header.php and footer.php and the answer will come out immediately. Ah… the #main div layer is holding the Main Contents Area of WordPress.

Modify WordPress Main Contents Section

Modify Spacing Above Post Title

Now, let’s see how to modify the spacing above the post title and the spacing on the left side of Main Contents Area.

Modify WordPress Main Contents Section

Open the stylesheet and navigate to the #main selector. There is a 40 pixels padding setting above the post tile:

Modify WordPress Main Contents Section

Therefore the padding above the post title can easily be removed or modified. Let’s change the top padding from 40 pixels to 10 pixels.

#main {
    clear: both;
    overflow: hidden;
    padding: 10px 0 0 0;
}

The spacing above the post title looks much better.

Modify WordPress Main Contents Section

Modify Space on Left of Main Contents Area

Open the WordPress stylesheet and navigate to #content selector. The spacing on the left is actually the left padding of the #content div layer. The default left padding of #content div layer is 20 pixels. You may change it if you like.

Modify WordPress Main Contents Section

This is the end of modifying the Main Contents area of Wordpress blog.