logo wide 2000x350
This article explains how to create a custom responsive header for your website. The header consists of a background image and a foreground title and slogan. The header logo image and text are important because they are 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 past, the standard method of changing the header on Joomla websites involved 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 was quite difficult as the images generally needed to be the same size and even have the same file name as the default header which came with the template. In addition, it was even more difficult to add text or a slogan to your header and/or change the layout and position of the images and text. The goal of this article is to offer you a simpler and more adjustable method for creating a custom header for your website.

7 Steps to Create your own Header
There are basically 7 steps in creating and installing your own custom header:

First, design your custom header
Second, find and/or create your own header background image
Third, modify the height and width of your image to match your website
Fourth add foreground text over the background image.
Fifth, set the image size and optimize the file size of your image for the web
Sixth, upload the image to the Images folder of your Joomla website
Seventh, create an HTML Custom Header Module and assign it to the Design Control Template logo position.

This is one example of the finished product:

01

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

Step One: Design 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 that is 2000 pixels wide and about 300 pixels high.


As for the height of the background image, consider that a typical computer monitor is only 700 to 900 pixels high. Assuming 40 pixels for the main horizontal menu and 300 pixels for the height of the front page slider show (something important, interesting and dynamic for viewers to see without scrolling), and another 60 pixels for the browser window menu and tabs leaves only about 300 pixels left for the height of the header.

02

This particular header is about 300 pixels high with 50 pixels for the main menu and 300 pixels for the Slideshow. If the header or the slideshow were much taller, the viewer would not be able to see the feature boxes without scrolling.

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.

03

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

04

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

05



Step Two: Find or Create Your Own Header Image

Example: Header image for createyourowninteractivewebsite.com

When we began to build this website, we wanted a header image that would reflect a “new beginning” for website construction. We also wanted a scene from nature to reflect our goal of making web design a more natural process. Because small businesses are moving to the cloud, we decided to use a simple picture of being above the clouds. We did a search for “blue sky over clouds image” and found the following image to download:

06

The first thing to look for in a header background image is a very wide but not very tall image. The dimensions of a typical header image are 2000 pixels wide by 300 pixels high. It is okay if the image is a little too big because you can always crop it down using an Image Editor.

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. We modified the image slightly using a free Linux program called Pinta. We then stretched the image to make it wider:

07

How to make a transparent image
A free open source tool called Pinta is ideal for creating transparent images. Any area in the image which is set to transparent will show the background color behind it. To create a transparent image, simply save an image as a PNG. Then open it with Pinta.


08

Select the black palette square in the lower right corner. Then slide the Opacity bar all the way to the left. Note the gray checkered squares in the lower left corner indicate it is now transparent. Then click OK.

09

Then click on the paint bucket and set the Tolerance bar for 30%.

10



Then left click on any part of the black area in the image with the paint bucket.

11


Then click File, Save As and save the image as a logo_transparent.png image.

This image can then be set as an overlay to your header background image:

12


You can then use text boxes with the background and border set for “None” to add your website name and slogan to the image.

Step Three A: Modify the height and width of your Image
You can use any of several free image editor tools to stretch or crop an image. A good cropping tool for Linux is Fotoxx. A good painting tool for changing the colors on an image is Pinta. Nearly every Image Editor has a Resize option which can be used to stretch an image. First blow it up to the width you need. A good width is 2000 pixels. Then crop off the excess height. A reasonable height is 300 pixels.


Step Four: Add text over the image
Responsive websites automatically reduce the size of the header background image to match the screen size of the device being used to view your website. But they typically do not reduce the text if the text is in the foreground and the image is in the background.


The way to have the text shrink with the image is to also have the text in the background image and leave the foreground empty. To add text over an image, open a new Libre Draw document and set the orientation to Landscape view with Format, Page, Page. Then copy the background image and paste it into the workspace. Then use the text insertion tool to place and style text in the foreground.

13


Then capture a screen shot of the text over image with a free Linux tool called Shutter.

Step Five: 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 200 KB. But since this is the header, this image can be a little bigger if needed. Using a free program called Libre Writer, you can quickly optimize all of your images by right clicking on them and then selecting Compress Graphic.


Step Six: Add your header image to the Joomla images folder
Now that we have our image with text, go back into the Joomla Administrator Control Panel and click on CONTENT > Media Manager. Then click on the big green Upload button to upload your image. To insert your image into your custom header module,. you will need to know the exact file name. Clicking on Detail View will help you find the file name. In this case, it is images/logo1900x300.jpg


Step Seven: Create a Custom Header Module and assign it to the Design Control Template logo position
Click on Extensions, Modules, New and select Custom module. Then call it Custom Header, hide the title and assign it to the Design Control template logo position. Use the JCE editor to insert our header image into the workspace.


14

Then click Save and view your website. Note that as you make the viewing window narrower, the image adjusts to fit the width of the window and takes up the full size of the header box.

Getting the color of the rest 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, there are also color pickers to create even more options. But first we should understand how colors work on websites. What if you had an exact color scheme you were trying to match? To exactly match colors requires knowledge of Hexadecimal Color Coding. That is our next subject.


Hexadecimal Color Coding Tips
A more precise way to set the colors on your website is to use the 6 digit codes for colors, called a Hexadecimal Color Code.


How websites display colors: Introduction to hexadecimal system
Colors are the way our eyes interprets electromagnetic radiation of wave lengths between 350 and 750 nanometers. Different wavelengths are seen as different colors. Electromagnetic radiation with a wavelength of 730 is seen as red, while radiation above 750 is invisible to the human eye and is called infra-red. Radiation with a wave length of 380 is seen as the color blue while radiation under 350 nm is invisible to the human eye and is called ultra-violet. If all wavelengths in the spectrum are represented, the human eye combines them altogether and interprets the color as “white.” We also call this daytime. If none of the colors are present (no light), the human eye interprets this color as “black.”


A computer monitor is made up of millions of tiny little red, green and blue dots which are lumped together in groups of three (one red, blue and green dot per group). These little three-dot groups are close together-- so close that we don't really see them as dots, but rather our eyes mix them up to form one homogeneous color.

15

A typical computer screen can have a thousand or more of these tiny dots in every inch. All colors in the spectrum can be generated with this system of dots. For instance, if all of the red and green dots are shining at 100% of their strength, while the blue dots are not lit at all, you will see the result as a pure yellow color. Each of the three dots can have any intensity value from 0 to 255. This means that the total number of possible colors is 256*256*256 = 16,777,216 or over 16 million color options. Any color can be represented by a specific combination of three numbers. The yellow mentioned before would have the number 255, 255, 0. Yellow equals Maximum Red, Maximum Green and Zero Blue. The first number represents the red dot, the second represents the green dot, and the last represents the blue dot. White is produced by the combination of the highest amount of all three colors, so the code for white is 255, 255, 255. Black, on the other hand, is produced by a lack of other colors, so the code for black is 0, 0, 0. Now to complicate things a bit more, on the web you don't write these numbers just as they are, but instead you must convert them from their normal decimal value (0 to 255) into what is called their “hexadecimal” values. The more you know about hexadecimal color coding, the easier it will be for you to precisely set the colors for your website.

Hexadecimal number convention (HEX) (BASE 16 Numbering System)
In our ordinary system of using numbers the base is ten. That is, whenever you reach ten, you add one more digit to your number. And since everything is based in ten, we only need ten digits to represent every possible number. The ten digits are 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. Base ten goes back to when the system was first developed, and it is based on the fact that humans have ten fingers. You can say that the hexadecimal system is what our numbers would look like if we had 16 fingers instead of 10. That is, the hexadecimal system uses 16 as the base instead of ten. The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. It has only recently been agreed that the letters A to F should be used to represent those last six digits. So, let us count from the beginning, and see where we end up. The BLACK rows are the ordinary decimal number, and the BLUE rows are the corresponding hexadecimal number. Let's look again at dark blue. It had the DECIMAL values of 0, 0, 100. In the hexadecimal system, this would be 0, 0, 64. Usually a zero is added before one-digit numbers (including 0).


Examples of HTML color codes

16

You can use any of several free “color picker” tools to determine the hexadecimal code for any color on your website.


Replacing 6 digit color codes with 3 digit color codes
The six digit code #FAFAFA can be seen as #RED, red, GREEN, green, BLUE, blue. There is simply a Selector, called a HASH mark, followed by two RED digits, then two GREEN digits then two BLUE digits. A color which is all red and some green and no blue would be written: #ff9900. However, the first number in each of the three groups is the controlling number and the second number is almost meaningless. Therefore the above color could also be written as #f90. Thankfully, web browsers can read this shorthand code making it much easier to write in color codes. Sky blue would be #aaf meaning a large amount of red and green and the maximum amount of blue.


Test your knowledge
Name the shorthand code and colors for the following hexadecimal codes:


Hexadecimal Code

3 Digit Code

Color

ffffff







999999







FF0005







1234ff








Set the background colors of your website areas
The Sparky template allows you to set different colors for different rows of your web page. Using different colors makes it easier for your readers to see and understand the organization of your web pages. To set these colors, go to Extensions, Template Manager and click on the Sparky template to open it. Then click on the Layout tab. Then click on Row Settings for the Header 1 row. Then scroll down and select the color you want for that row. You can repeat this process for every row you create with the Sparky Layout tool. Changing the background colors of your website Home page areas gives your readers visual clues that help them better understand the layout of your website.


Next Up: Website Layout
Thus far, we have been focusing on the HEADER and COLOR combinations for your website. In the next article, we will review how to change the LAYOUT or structure of the way articles appear in your website. In general, three column layouts are difficult to read. We will therefore focus on one and two column lay outs – using 3 column layouts only to create “Feature Boxes” at the Top and Bottom of the HOME page.