Friday, 4 January 2013

Creating Wordpress Theme Layout - CSS Styling

In the previous tutorial we successfully have created the wordpress basic HTML markup, now we need to style it little bit. first we will add a dummy CSS to give heights to the wrappers.

I have added a texture background in the image folder. I will use that for background

body {
    background: #f1f1f1 url(images/background-texture.png);

we will remove the margin from all the DIVs to make the DIVs not to come out of the main WRAPPER and ROWs
#header-wrapper, #menu-wrapper, #main-wrapper, #footer-wrapper, #copy-wrapper {
    margin: 0;
Now we will give some heights to these DIVs. we will remove the heights later so that the DIVs expand with the content.
#wrapper {
    padding: 0;
    background: #fff;
#header-wrapper {
    height: 120px;
#menu-wrapper {
    height: 40px;
#main-wrapper {
    height: 300px;
#footer-wrapper {
    height: 140px;
#copy-wrapper {
    height: 30px;
this will give us the following look.
now we will add some more divs inside the index.html for logo, social sharing icons, main content, sidebar, footer, copy right, and footer menu..
Add the following code inside the index.html to get some more divs for the above elements.
<div id="wrapper" class="row">
 <div id="header-wrapper" class="row">
        <div id="logo" class="six columns">
        </div> <!-- end logo -->
        <div id="social" class="six columns">
        </div> <!-- end social -->
    </div> <!-- end HEADER WRAPPER -->
    <div id="menu-wrapper" class="row">
        <div id="menu" class="eight columns">
        </div> <!-- end menu -->
        <div id="search" class="four columns">
        </div> <!-- end search -->
    </div> <!-- end MENU WRAPPER -->
    <div id="main-wrapper" class="row">
        <div id="content" class="eight columns">
        </div> <!-- end content -->
        <div id="sidebar" class="four columns">
        </div> <!-- end sidebar -->
    </div> <!-- end MAIN WRAPPER -->
    <div id="footer-wrapper" class="row">
        <div id="footer" class="four columns">
        </div> <!-- end footer1 -->
        <div id="footer" class="four columns">
        </div> <!-- end footer2 -->
        <div id="footer" class="four columns">
        </div> <!-- end footer3 -->
    </div> <!-- end FOOTER WRAPPER -->
    <div id="copy-wrapper" class="row">
        <div id="copyright" class="six columns">
        </div> <!-- end copyright -->
        <div id="footer-menu" class="six columns">
        </div> <!-- end footer menu -->
    </div> <!-- end COPY WRAPPER -->
</div> <!-- end wrapper -->
this is the complete layout structure for this theme now we will add elements in each div from logo up to the footer menu.
the above code will make the layout like the below image.

No comments:

Post a Comment