tel: +2348055401551 (sms, whatsapp)
skype: tokunboajewole

Joomla Beez20 tutorial-8: add a new module position above top navigation

In my last tutorial, I explained how to add a module position below the component area.

In this tutorial, I’ll explain how to add a module position above the top-navigation, but it is assumed that you have an override.css file used to any new / additional css settings. I will be starting with a new installation of Joomla 2.5 with default content.

ONE: create an override.css file. Read: how to create and use an override.css file.

TWO: Open index.php and edit it to remove the font-resizer but DO NOT remove the white space at the top. Why? coz a new module position will feature above it. The white space will be removed later. Here is a tutorial: Beez20 tutorial-1: how to remove font-resizer, search box and white space.

THREE: Login to Joomla backend as administrator, go to EXTENSIONS >> TEMPLATE MANAGER >> BEEZ20 and edit the ADVANCED OPTIONS section as per this tutorial: Beez20-tutorial 4a- edit header image. Replace the default template image with your own image. When you are done, your template should look something like this. Heres my own screenshot:

Note: the search module is still published in Position-0.

 

Now that we have changed the default header image, let us add the new module position.

FOUR: a new DIV will be created and inserted above the entire header position. The new DIV and MODULE POSITION is named position-99. Open index.php, and at the start of the body tag, find:

<div id="all">
<div id="back">
<div id="header">


and replace with:

<div id="all">
<div id="back">
<?php if ($this->countModules('position-99')): ?>
<div id="position99">
<jdoc:include type="modules" name="position-99" />
</div>
<?php endif; ?>
<div id="header">

What we have done is to add a new “position-99” within a condition, saying: if anything is published in position-99, then use the css-style to be associated with div id=”position-99”. Any further styling for this position can be later added, but for now, we will leave it blank in our override.css file.

Save Index.php

FIVE: Add the new position information to the bottom of file template_Details.xml follows, and Save the file:

<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>position-99</position>

</positions>

SIX: create a new module: custom HTML module, and insert as content, another image/picture of same dimensions(1060x288 (.png)) as was added in step#3. Publish the module in position-99.

Your template should be looking as pretty as mine now:

SEVEN: the last thing to be done is to UNPUBLISH the Search module and close the gap between the top-navigation(menu) and Img-2.

Go ahead and unpublish the search module.

To close the gap above the Top-Navigation, and considering that there is a new module above it, we need to do two things:

First: with reference to file: personal.css, around line #140, in the header-css portion, find css-code:

/* ++++++++++++++ lists, skiplinks ++++++++++++++ */
#header ul.menu
top:5em;

copy the above and paste into your override.css file and modify as follows:

/* ++++++++++++++ lists, skiplinks ++++++++++++++ */
top:0.5em;

Note: we reduced the margin.

Second: with reference to file personal.css, around line #90, find css-code:

#all #header {padding-top:8.0em ; }

copy the above and paste into your override.css file and modify as follows:

#all #header {padding-top:3.0em ; }

Note: we reduced the padding.

Save override.css and refresh Joomla’s frontpage. You might want to adjust the two settings further to have them neat and crispy.

Conclusion:

A new module position has been added above the top-navigation(menu).

Should you choose to keep the two: header position(img-1) and position-99(img-2) above, the template would look like this (below). Note, Search module is unpublished and gap is closed.

But should you prefer to keep the new module position, refer to tutorial-4b and remove the header(img-1) for this kind of look:

 

thats all folks.

Comments, Questions or clarifications are welcome!

Comments   

 
0 #2 tokunbo 2013-04-11 10:18
Quoting Jeanne Aloi:
Hi,

How do I add space to the top of our church's web site in the template manager? I would like to have the beige background be seen on the top of the site and not have the white space smack right up against the top. Right now the beige background is only seen on the sides and on the bottom.

This is link is a preview of our site. Beez_20 is the template.

Thanks,
Jeanne


hello Jeanne,
sorry for the late reply.
after removing the searchbox and the font-resizer, there is a white space left at the top of the template,

you might want to read this tutorial (http://www.nairabytes.net/joomla/joomla-beez20-tutorial-3-remove-font-resizer-search-box-and-top-white-space) and then work backwards - to restore a little space at the top.

BTW, its a nice bez20 customization you have there for your church.
Quote
 
 
0 #1 Jeanne Aloi 2013-03-16 18:27
Hi,

How do I add space to the top of our church's web site in the template manager? I would like to have the beige background be seen on the top of the site and not have the white space smack right up against the top. Right now the beige background is only seen on the sides and on the bottom.

This is link is a preview of our site. Beez_20 is the template.

Thanks,
Jeanne
Quote
 

Add comment


Security code
Refresh

I use Linux 24x7

Recent Comments