HOW TO CUSTOMIZE BEEZ 2 TEMPLATE FOR JOOMLA! 2.5
Some times you my need to customize the default templates inorder to use them in a unique way and
some of these customization are tricky especially messing with the underlying code...
Fast forward ama disscuss two partial but major customization of the beez 2 template specifically in Joomla! 2.5.
The two customs ama discuss are the fontsize changer on top of template and then the space which remains at top of the template after removing the font size changer.
Code before changes
#header ul
{
display:block;
margin:0px 0px 1px 0px;
text-align:right;
list-style-type:none;
padding:10px 0px 10px 0px;
position:absolute;
top:5px;
right:0px;
}
Code after changes
#header ul
{
display:block;
margin:0px 0px 1px 0px;
text-align:right;
list-style-type:none;
padding:10px 0px 10px 0px;
position:absolute;
top:0px;
right:0px;
}
Code before edit
Some times you my need to customize the default templates inorder to use them in a unique way and
some of these customization are tricky especially messing with the underlying code...
Fast forward ama disscuss two partial but major customization of the beez 2 template specifically in Joomla! 2.5.
The two customs ama discuss are the fontsize changer on top of template and then the space which remains at top of the template after removing the font size changer.
- Removing the fontsize changer on top of the template
2. To remove the space left after removing the fontsize changer
- Go to personal.css and change the code as follows:
Code before changes
#header ul
{
display:block;
margin:0px 0px 1px 0px;
text-align:right;
list-style-type:none;
padding:10px 0px 10px 0px;
position:absolute;
top:5px;
right:0px;
}
Code after changes
#header ul
{
display:block;
margin:0px 0px 1px 0px;
text-align:right;
list-style-type:none;
padding:10px 0px 10px 0px;
position:absolute;
top:0px;
right:0px;
}
- In the same personal.css file find and edit the code below:
Code before edit
#all #header
{padding-top:8em;
}
Code after editing (The ems will vary depending on if you have a Top Menu or not):
{padding-top:8em;
}
Code after editing (The ems will vary depending on if you have a Top Menu or not):
Suitable for those with Top Menu in their site if you don't have Top Menu increase the 3ems value to 4 or 5 etc.
#all #header
{padding-top:3em;
}
That is all for now!
{padding-top:3em;
}
That is all for now!
Comments
Post a Comment