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

Joomla Beez20 tutorial-4a: edit header

headr1In 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:

clip_image002

 

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):

 

headr2

 

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:

 

image

 

Your comments and questions are very welcome!

Comments   

 
0 #2 Nbytes 2013-05-24 19:08
hi Rodrigo,
sorry, this reply is late. If you still have issues, please mail me(use the contact form), Yes, I can help you out.
Quote
 
 
0 #1 Rodrigo 2013-04-26 18:20
I actally want to change the size of my header so that it would fit my images size. But i found difficulties in finding its script. Can u help me please?
Quote
 

Add comment


Security code
Refresh

I use Linux 24x7

Recent Comments