Apr 292015
 

Last Updated: June 18, 2016

KompoZer Add Footer Settings┬áshows you how to add a footer and right sidebar to your website front end structure “Template”.

Latest News: I have added a menu.

So far we have added the following top, leftmenu and mainbody div tags. Now we are going add a rightsidebar and a footer. This is starting to look like a template. The only part left to add is the header, which is coming soon.

KompoZer Add Footer Settings Steps

Step 1 ) The following image shows you two more div tags added a rightsidebar and a footer. So far there are five div tags added.

Note: Refer to KompoZer Div Tag Container if you need help adding div tags.

  • top
  • leftmenu
  • mainbody
  • rightsidebar
  • footer

kompozer-right-sidebar-footer

Step 2 ) The following image shows you two more id added, #rightsidebar and #footer.

kompozer-footer-id-tag

Step 3 ) Click on Source tab to make sure the id’s have been added to the two new div tags rightsidebar and footer.

kompozer-footer-html-source-code

Step 4 ) In the following image #rightsidebar id, I have added the following CSS code. To add the following you need to click on Background and Box tab.

Note: Refer to kompozer Left Menu Code if you need help adding CSS style.

width: 125px;
float: left;
background-color: #c0c0c0;

kompozer-righsidebar-style

Step 5 ) In the following image #footer id, I have added the following CSS code.

float: left;
background-color: #c0c0c0;
width: 866px;
clear: both;

kompozer-footer-style

Step 6 ) The following image shows you the new template layout. You can start to see how it taking shape the new layout.

kompozer-right-sidebar-footer-layout

Step 7 ) The following image shows you the CSS Source code assigned to the two div tags added.

kompozer-footer-css-source-code

So far you have learned how to add CSS style, div tags, id’s, view the source code and understand the overall structure. However the image above in Step 6 ) is not really formatted correctly and does not look like a Template yet.

Click on the following URL Front Page Template Layout to continue.

Go Back To KompoZer Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject
Privacy Policy