In this lesson, I would edit the top header. The top header(below) consists of the Joomla-logo, the word “Joomla”, the slogan “Open Source Content Management”, and the bluish header / banner – we are volunteers.
To make use of the template as is, you could just replace the Joomla Logo with your company logo; the word “Joomla” with your company name; and the slogan with your own slogan.
The settings for the header are available in the Advanced Options section of the template:
a) Beez20 template advanced options: Login to Joomla administrator, click on EXTENSIONS >> TEMPLATE MANAGER, click BEEZ2 – DEFAULT under STYLES tab. You should see the advanced options window:
b) use your own logo: use the SELECT button to select your prepared logo, size: 225x50.
Site Title = your site’s title / company name
Site description = your company slogan / description (short and spicy)
click SAVE & CLOSE and refresh your browser to see the changes.
c) remove the logo, site title and description: just delete everything(texts) inside the three boxes, save, refresh your screen. Mine looks like this(left and right):
d) change the header, user yours: The “we are volunteers” image is located at: templates\beez_20\images\personal\personal2.png. Its size is 1060x288 (.png). To use your own image, replace/overwrite personal2.png with your own image, meaning your own image must be named “personal2.png”, with similar dimensions as the original image.
OR BETTER STILL
Paste this code into override.css to use your own image, (for ex:my_own_image.png).
.logoheader
{
background: #0c1a3e URL(../images/personal/my_own_image_name.png)
no-repeat bottom right ;
color:#fff;
min-height:200px;
margin:0em 10px 0 10px !important;
}
For this exercise, I created an image in MSPaint, (my_own_image.png) and used it as the header, with the below code in my override.css.
Notes:
you can use images in a DIRECTORY OF YOUR CHOICE. My image(below) is in directory:”customimages”
I do not need font-color settings as Im only using an image.
.logoheader
{
background: #0c1a3e URL(../images/customimages/my_own_image.png)
no-repeat bottom right ;
min-height:291px;
margin:0em 10px 0 10px !important;
}
This is how the template looks like now:
Your comments and questions are very welcome!
