Spring Forward Web Design

Build your own Site... Control your own Future!

Breadcrumbs

3.3 Creating a Custom Header

3.3 Creating a Custom Header for the Cloudbase 2 Template

The header logo image and text are important because they will (or should be) the first thing your website visitors will notice. The header logo and text will be on every page of your website and will shape the viewer’s impression of your site. You want to take some time to create and install a good image which reflects the goal of your website. Remember that a picture is worth a thousand words – and images are everything!

In the previous article, we discussed how to upload the Cloudbase 2 template to your website and turn off the default header. In this article, we will describe how to replace the default header with your own custom header.

The standard method of changing the header involves going in to the CSS and or HTML sheets from the Template – Edit screen and finding the old header image and replacing it with the new header image. This can be quite difficult as the images generally need to be the same size and even have the same file name. In addition, it can be even more difficult to add text or a slogan to your header and/or change the layout and position of the images and text.

One of the goals of this article is to offer you a much simpler method for creating a custom header for the Cloudbase template. The method I will describe below involves simply turning off the template logo section with a click of a button:

Then, we will replace the difficult to adjust logo with a simple easily customizable box or module which will allow you full control over both your background logo image and your foreground logo text – without changing a thing on the Cloudbase 2 template CSS sheet and/or HTML file. This simple method will help overcome one of the final obstacles standing between you and complete control over the appearance of your Joomla website.

Replacing the Cloudbase 2 Logo with your own header Image

There are basically 8 steps in creating and installing your own custom header:

First, design your custom header

Second, find and/or create your own header image

Third, modify the height and width of your image to match the space on your website

Fourth, if necessary, reduce and optimize the file size of your image for the web

Fifth, upload the image to your Joomla website

Sixth, add a text box module to Joomla to insert text over or next to your logo image.

Seventh, insert a set of custom code called INLINE CSS (code which we will give you) to control the positioning and appearance of all images and text in your header.

Finally, change various sections of this code to get your header to appear however you want.

This is one example of the finished product:

Now let’s review these 8 steps to see how you can create and install your own header image and text.

STEP ONE: Designing your custom header

Your custom header will consist of two parts, a background image and a slogan consisting of foreground text. For this exercise, we will create a full width background image. While the template is 960 pixels wide, the image will be only 900 pixels wide – because there are a couple of borders in a couple of boxes that the logo will fit inside. By the time one adds 30px plus 30px of padding and margins on both sides, there is only 900 pixels left.

As for the height of the background image, you should consider that a typical computer monitor is only 800 pixels high. Assuming 50 pixels for the main horizontal menu and 450 pixels for the height of the front page slider show and text box (something important, interesting and dynamic for viewers to see without scrolling), and another 100 pixels for the browser menu leaves only about 200 pixels left for the height of the header. Remember also that there is a margin of about 20 pixels above the top of the header image in this particular template. (see below).

We will therefore create a header which is about 900 pixels wide by 200 pixels high.

NOTE THAT THE SCREEN ABOVE JUST BARELY SHOWS THE THREE FEATURE TEXT BOXES BELOW THE SHOWCASE AREA. This particular header is about 150 pixels high with 50 pixels for the main menu and 400 pixels for the Showcase area. There is also a Search box in the header. As search boxes are only appropriate for very large websites, we will put a slogan in the header instead.

There are several ways to combine slogans and images. One is placing the slogan over the top of the image. This requires an image with a space where a slogan can be read.

The second option is placing the slogan to the right of the image:

A third option is to place the slogan above the logo:

STEP TWO: Finding or Creating Your Own Header Image

Example One: Creating the header image for Springforwardwebdesign.com

When I began to build the springforwardwebdesign.com website, I knew I wanted a header image that would reflect a “new beginning” for website construction. I also wanted a scene from nature to reflect my goal of making web design a more natural process. I decided to use a simple picture of a sunrise over the ocean. This image sends a message which supports the text above it.

The first step is creating your own header image. This usually consists of your web site name and or slogan super imposed over your header image. You can either use an image you took or find a free Open Source image to use. I did a search for “free sunrise image” and found the following image:

I downloaded this image to the Mypictures folder on my computer.

The first thing to look for in an image is a very wide but not very tall image. The dimensions of a typical header image are 960 pixels wide by 100 to 200 pixels high. It is okay if the image is a little too big because you can always crop it down using the Microsoft Office Picture Manager.

If you will be adding text to your image, you want a space to add the text to without blocking the rest of the image. Here we can add text in the space above the sunrise.

Step Three: Modifying the height and width of your Image

To edit the image in the Office Picture Manager, select the image file with a single left click. Then right click and select Open with > Microsoft Office Picture Manager.

The first step in editing the image is to crop off the portion of the picture you do not want to use. Go to Picture > Crop. This brings up the following window:

Note that the original dimensions for this image as shown in the lower right corner are 1200 x 882 pixels. The goal is to bring this down to 960 by 200 pixels. This is done most precisely by using the up arrows next to the words Bottom and Top. This is what the image will look like after cropping 490 pixels off the bottom, 230 pixels off the left, 10 pixels off the right and 142 pixels off the top (to make the image exactly 960 x 200) and then clicking OK:

Example Two: Creating the Progressive Caucus Header Image

Our next mission is to review the steps needed to make the following header image and text:

Note that the image is below the text. But the method we will use allows you to put the image and text wherever you want and to specify any colors of text and background that you would like.

The process is to first create an image and upload it. Then create a Text Box, called a custom HTML module to display the image in the background and the text in the foreground. In this case, there is a lower image of people that is 100 pixels high by 900 pixels wide. Above this are two rows of text. All these are placed inside of a box which uses a background color to create a small border around the image.

It is important to create the correct size images which will be combined. For this, you can use Microsoft Office Image Manager. To edit the image in the Office Picture Manager, select the image file with a single left click. Then right click and select Open with > Microsoft Office Picture Manager.

This image is 960 wide by 100 high – which would work if there was no borders, margins or padding on the template. But we need to reduce it to 900. There are two ways to do this. The first is to crop off some people from the right or left. This would preserve the 100 pixel height. But instead, we will resize the image to keep all the people:

Click okay and save the image as logo896x94.jpg. Next, log into your Joomla Administrator Control Panel and go to SITE, MEDIA MANAGER which opens your images folder. Then select and upload the image. We are now ready to create the custom HTML header module.

Step Four: Optimize your header image file size for the web

The next step is to reduce the file size (optimize the picture) so that the header will load more quickly on the web. The general rule is that web image sizes should be under 100 KB. But since this is the header, this image can be a little bigger if needed. Click on Picture > Compress Picture. You will notice that the original file size is 144 KB. This is not too big, so we will leave the file size alone. (If you need to reduce the file size, select “web pages”.

The next step is to save the new file. Click FILE > SAVE AS and then save the file as sunrise960web to indicate that its width is 960 pixels and its file size is okay for the web.

Then click on the X to close the picture. You will be asked if you want to save the file with the changes. Click on DON’T SAVE in order to save the original image without any changes.

Step Five: Adding your header image to the Joomla images/stories folder

Now that we have our image with text, go back into the Joomla Administrator Panel and click on SITE > Media Manager. This brings up the Media Manager screen:

By default, Joomla assumes that all the images you will add to your website will be in the images/stories folder. So open the stories folder by clicking on it. Then scroll down to the bottom of the page. Click on the Browse button to find the header image you just created. Click on this to select it. Then click on “Start Upload” to load this image into the images/stories folder.

Joomla will tell you if the image was successfully uploaded:

To insert your image into your custom header module,. you will need to know the exact file name. In this case, it is Images/stories/springforward960web.jpg

STEP SIX: Adding a text box module to insert your text

The traditional way of adding a header to a Joomla website was to replace the image which was usually listed somewhere in one of the CSS sheets. This is accessed by going to Extensions, Template Manager, then Clicking on EDIT.

From the Template – EDIT screen, click on EDIT CSS to bring up the list of CSS sheets:

Select Template.CSS and click on EDIT to bring up the primary CSS sheet:

Scroll down the page and you will come to:

The idea is to replace the logo.png with your own logo. But this logo is in the logo folder which is in the template folder and will not help you adding your slogan and controlling how it appears.

THE NEW, EASIER AND BETTER WAY

We will go in a different direction by turning off the template logo and inserting a custom HTML box in the top-a position. Now that we have a better text editor and the background image in images folder, all we need to do is add the images and text together in the Header Box. The following are the steps for doing this:

Go to Extensions> Module Manager. We will create a new box and then place it in the TOP a position. Joomla calls boxes modules. But they are really just boxes. To add a new box in Joomla, from the Module Manager, click on the Green NEW button on the upper right corner of the Module Manager screen. This brings up the Module – NEW screen:

Select Custom HTML, thenclick NEXT in the upper right corner of the screen. This brings up the Module (Edit) screen. For the TITLE of the module, type in Header Text Box. For show title, click on NO. For Enable, click on Yes. For position, use the Drop Down Arrow to select TOP a. Your screen should now look like the following:

STEP SEVEN: COPYING THE CODE INTO THE HTML EDITOR

Go to Programs, Accessories, Notepad on your home computer and open up the Notepad program. Then paste the code below into notepad and save the file as header_module.txt

(The advantage of using notepad is that it can be copied straight into the HTML custom module source code).

Below is a section of code you want to copy:

<p style="font-size:24pt;font-family:'Lucida Calligraphy';font-weight:bold;color:#bbf;padding-top:20px;padding-left:10px;">Welcome to the Washington Progressive Caucus!</style></p>

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a Better Future for Everyone</style></p>

</div>

Click on APPLY in the upper right corner of your screen and wait for Joomla to indicate that the changes were accepted. Then click PREVIEW:

STEP EIGHT: Modify the Code to Match Your Image and Text

The process from here is simply a matter of substituting your image, text and property values for the ones above. Obviously, you will want to change the following sections of the above code:

Replace the background color with your own background color.

Replace the above URL with your own image URL.

Change the background image position with the distance your image is below the top of the screen.

Replace the width and height of the entire box with your own width and height.

Replace the font size, family, weight and color with your own font size, family, weight and color.

Replace the top and left padding with whatever padding is need to place your text in the best location over the header image.

When the text is in the right place, is the right size, color and font type, click SAVE and you are done with your new top logo. If you are not familiar with CSS coding, below is a short introduction to the CSS properties and values noted above.

Knowing these simple tips will not only help you learn how to create and modify your header box, but also any other module you would like to put in any other position on your website. You can learn more through the many CSS tutorials available on the internet. One of the best CSS Tutorials is at http://www.w3schools.com/css/default.asp.

A WORD ABOUT INLINE CSS

The coding above is called INLINE CSS because it is CSS style coding placed right inside of the HTML TAGS. While inline css is generally discouraged, in this case it is the best solution to the problem of making a simple custom header for a 960 grid template.

The benefit of inline CSS is that it has a higher priority that the other two ways of styling a website – CSS STYLE SHEETS, and placing CSS inside of the HEAD of the index.html or index.php file. CSS STYLE SHEETS are best used when you want to make changes in appearance to an entire website. CSS in the head of an html or php file are best for making changes to an entire page. But the best solution for insuring that a change is made in a specific area is to use inline CSS.

The problem with trying to use CSS style sheets, as is suggested in the Rocket Themes forum is first that with many style sheets, it is not clear which style sheet is used. It is also possible that changes made in one style sheet can inappropriately over-ride other style sheets, adversely affecting the appearance of other sections of your website.

Finally, the template.css style sheet associated with this template is very complex, with lots of selectors and classes and shorthand coding such that a beginner could get overwhelmed by the complexity of it all. Removing the logo from the rest of the template and adjusting it separately is the easiest way to achieve a custom header for a 960 grid template.

There are many excellent tutorials on CSS on the internet. But the basic pattern for inline CSS is simply:

<opening html tag> Style = “css-property1:property1-value; css-property2:property2-value;” </closing html tag>

It is essential that all of the tags, quotation marks, colons and semi-colons are in the right place. This is why you are better off copying the above code and changing the values instead of trying to write the code and forgetting a semi-colon.

An Explanation of the above coding

The above coding can be broken down into two parts. The first part specifies the background properties and values:

The second part specifies the foreground text properties and values:

<p style="font-size:24pt;font-family:'Lucida Calligraphy';font-weight:bold;color:#bbf;padding-top:20px;padding-left:10px;">Welcome to the Washington Progressive Caucus!</style></p>

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a Better Future for Everyone</style></p></div>

The first part can be further broken down into 7 properties and values. It is best that they are listed in the following order:

CSS properties used for background effects:

background-color
background-image
background-repeat
background-attachment
background-position
box width
box height

We will briefly go over how to specify values for each of the above 7 CSS properties.

Specifying the Background Color

While there are many different ways in CSS to specify background colors, the most logical and accurate way is using the hexadecimal coding system. There are many great tutorials on this system on the internet. But briefly, the hexadecimal begins with a slash (#) and then includes 6 digits.

The first two specify red, the next two specify green and the final two specify blue. The combination of these three colors results in a single color which is displayed on by the browser on the readers screen.

The lowest value is zero with numbers going up to 9 and then using the letters a through f to specify the remaining highest 10 through 16 values. So black would be indicated by #000000 and white is #ffffff. Red is #ff0000, Green is #00ff00 and blue is #0000ff. A very light blue would be #aaaaff.

The second digit for each color does not change the color that much. So #090a7 is about the same as #0000aa. So often you will see color codes shortened to just one digit for red, green and blue – such as #00a which is simply a medium blue.

In the Coding Example for the header, the background color was #55a which is simply a medium blue. You can find color selectors on the internet to replace the background with any background color you like.

Specifying the Background Image

In the Coding Example, the background image is from my website. While there are shortcut methods for specifying image folder locations, it is wise to use the full URL as novices often make mistakes with the shortcut methods. The URL to your image is likely to be http://www.yourwebsite.com/yourlogo.jpg

Specifying Background Repeat

Sadly, if you do not include “no-repeat”, the default in CSS is to keep repeating the image as long as there is room. If you have a small image on the left, it will keep repeating unless you include the no-repeat property and value.

Specifying Background-Attachment

There are two main options. Fixed and Scroll. If you specify your background attachment as fixed, you can position it relative to the top left corner of your web page. However, it will not scroll with the rest of your header. We will therefore use scroll. This also changes the reference point to the upper left corner of the header box.

Specifying Background Position

There are two values to specify. The first value is the horizontal position. The top left corner is 0 0. Units can be pixels (0px 0px) or percents or words such as center, left or right. You can mix %, pixels and word position values. We generally want the image centered in the page. The second value is the vertical position and tells the browser how far below the top of the page the image should be in pixels (if using FIXED) or how far below the top of the header box (if using SCROLL). In the Coding Example, the image is 100 pixels below the top of the header box.

Specifying Box Width

You need to stay within a narrow range of values determined by the Cloud Access template. Otherwise you will cut of the right border. The best value is likely to be between 900px and 920px.

Specifying Box Height

This value is determined by combining the height of your text lines and the height of your image. If your height is too low, you will not be able to see your background image.

Below in BOLD are the 6 values you want to change for the header background section of your HTML custom header box:

Specifying Foreground (Text) CSS Values

The second part of our Example Code specifies the foreground text properties and values:

<p style="font-size:24pt;font-family:'Lucida Calligraphy';font-weight:bold;color:#bbf;padding-top:20px;padding-left:10px;">Welcome to the Washington Progressive Caucus!</style></p>

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a Better Future for Everyone</style></p></div>

The text section should begin with the paragraph element <p>. The above example as two different paragraph elements because the two lines of text will be styled differently. The following is the first line of text with the parts you want to change in BOLD:

<p style="font-size:24pt;font-family:'Lucida Calligraphy';font-weight:bold;color:#bbf;padding-top:20px;padding-left:10px;">Welcome to the Washington Progressive Caucus!</style></p>

Doing the above changes is pretty obvious. The key thing is to make sure that your text colors contrast well with the background color. In our example, we are using light blue and green for the text colors and a darker blue for the background color.

Using the Span tag to change a portion of the text inside of the Paragraph tag

Below is the HTML source code for the second paragraph.

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a Better Future for Everyone</style></p></div>

If we wanted to change a portion of the sentence, we could simply add a new element called <span> as is shown in BOLD below:

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a <span style=”font-weight:bold;color:#00f;”>Better Future</span> for Everyone</style></p></div>

Adding this to our Example Code changes the header to the following:

Adding a Foreground Image

Placing the first image in the background allows you to create interesting effects by adding a second image to the foreground. In this example, we will add a foreground 94 pixel wide by 94 pixel high image to the upper left corner and reduce the size of the text and move the text to the right to make room for the foreground image:

First, create your image, then open up the images/stories folder to upload the image with the Media Manager. Then open your header module and place the cursor just to the left of the W in Welcome. Next, click on the IMAGE icon at the bottom of the screen to find and insert the image. Then click APPLY, and PREVIEW.

You can see that inserting the image has lowered the text. To get the text back in place, go back to the Module – EDIT screen and click on the image to select it, then RIGHT CLICK to bring up Image Properties:

Aligning the image to float to the left will bring the text back up. But it will also cause the text to be right next to the image and eliminate the 5 pixel left border and top border. So we should also add 5 pixels to the H space and V space. Then click OK:

Then click APPLY, then PREVIEW.

All we need to do now is reduce the font size on the top line from 24 to 22 and on the bottom line from 20 to 18. Go back to the Module – EDIT screen and click on SOURCE to make these changes directly in the HTML. Then click on APPLY, then PREVIEW:

We are close. But there is now too much padding above the image and to the left of the image. So go back to the HTML source view. Note that the image margin has been set for 5px. This really means that there is a 5 pixel border all the way around the image. What we really want is for the border to remain on the right side and bottom only. There are two ways to do this. The first is to specify each of the margins in the following order:

There is also a shortcut CSS that means the same thing: margin:0 5px 5px 0;

How you can remember the order is to think of a clock: Top, Right, Bottom, Left.

Insert the above CSS into the HTML source, then click APPLY, then PREVIEW:

Congratulations! You now have your custom header!

Using a single background image

Another option is to use a single background image and place the foreground text over this. We will first create a background image that is the full width and height of the header box (910 pixels wide by 200 pixels high). Make sure the file size of the image is optimized so that it does not exceed 100 KB and call the image flag910x200.

Then upload this image into your website’s images folder using the Media Manager.

Finally, create a new HTML box using the Module Manager.

Copy and paste the following into Notepad, then copy this into the HTML box Source:

<p style="font-size:24pt;font-family:'Lucida Calligraphy';font-weight:bold;color:#bbf;padding-top:20px;padding-left:10px;">Welcome to the Washington Progressive Caucus!</style></p>

<p style="font-size:20pt;font-family:'Lucida Calligraphy';font-weight:normal;color:#afa;padding-top:5px;padding-left:10px;">Working Together to Build a Better Future for Everyone</style></p>

</div>

This is the header we made earlier. All we need to do is replace the above background image (logo896x94) with the new image (flag910x200). Then click APPLY, then PREVIEW:

Well, only part of the flag is showing. This is because we also need to change the background-position values from center 100px to center 0 px. Then click apply, then preview:

To lower the text, change padding-tops from 20px and 5 px to 60 px and 20 px:

Finally, to make the text more visible, change the top line to dark blue (#115) and the bottom line to dark green (#040).

Fine Tuning the Appearance of your website to match you custom header

Once you have your header box looking the way you want, if you want, you can make some changes to the template itself to get it to better match your header image. Thankfully, the Cloud Access Template comes with 10 pre-set styles and 11 pre-set backgrounds. There are also color pickers to create even more options. We will cover these steps in the next article.