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.
