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:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 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)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.