This link has been bookmarked by 180 people . It was first bookmarked on 09 Jun 2006, by Marco Bianchi.
-
03 Jul 15
-
The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that.
-
-
20 Mar 15
-
Designing Headers
-
They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header.
-
The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that.
-
We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header.
-
The WordPress Header
By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Administration > Settings > General panel, and WordPress does the rest.
-
The WordPress Default Theme features an image in the background and presents the header like this in wp-content/themes/default/header.php:
<div id="header"> <div id="headerimg"> <h1> <a href="<?php echo get_option('home'); ?>"> <?php bloginfo('name'); ?></a> </h1> <div class="description"> <?php bloginfo('description'); ?> </div> </div> </div> -
Styling the Header
As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places.
-
The styles that control the header's look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look.
-
Changing the Header Image
There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php "head" section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this:
#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }NOTE: The use of the bloginfo tag only works when the style is used within the head of the template file. WordPress template tags will not work in the style sheet (style.css). To move this style to the style sheet, change the template tag to the actual address (URL) of the header image graphic.To change the image file, replace the "kubrickheader.jpg" with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic's location.
-
If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions.
-
Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine-tune the placement and look.
-
- h1
- header
- headerimg
- description
With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following:
-
Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header.
-
If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size.
-
Hiding the Header Text
Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.
-
To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector:
h1 {display:none; font-size: 230%; color: blue;.......It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there."
-
It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, "turning the visibility" back on. The other method is to position the content literally "off the page" by a negative indent. Here is an example:
h1 { font-size: 0; text-indent: -1000px; }This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still "read" the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers.
-
Adding Navigation to Your Header
Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements.
-
This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag.
-
- list_cats() has been deprecated. check wp_list_categories() as replacement.
In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (<ul><li>) without dates or post counts, does not hide empty categories, uses category "description" for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own "category" division. Notice that a link to the "home" page or front page has been included manually at the start of the list.
-
<div id="header"> <div id="categorylist"> <ul><li> <a title="Home Page" href="index.php">HOME</a></li> <?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE, FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE, '', '', '1,33', TRUE); ?> </ul> </div><!-- end of categorylist --> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </div><!-- end of header -->To style this list, the #categorylist in the style.css might be:
#categorylist {font-size:12px; font-style:normal; text-transform:uppercase; } #categorylist ul {list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; } #categorylist li { display: inline; padding: 0px 5px;} #categorylist a:link, #category a:visited {color:blue} #categorylist a:hover {color:red}It might look like this:
WORDPRESS COMPUTERS INTERNET NEWS -
You can also add your Pages, archives, and other links within your header navigation. For more information on navigation menus:
-
- Have a purpose and point.
- A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site.
-
- It should invite visitors to remain.
- A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says "there is something worth exploring here."
-
- It should blend in with the overall look.
- Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.
-
- Headers do not need to have pictures.
- Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background.
-
- Cluttered headers are still cluttered.
- Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better.
-
- Maintain accessibility standards in your header.
- We mentioned hiding the header text, and there is more you can do to make sure your header meets accessibility standards. Use the h1 tag so screen readers will recognize it as a header. Use titles and alt descriptions in links and images used in the template file (not in the style sheet as background images).
-
- Headers can be any height, but remember content sells.
- The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header.
-
- Think "Site Identity."
- A header is part of the site's identify or "brand" and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site's "brand identity".
-
-
09 Mar 15
-
26 Dec 14
-
29 Oct 14
-
08 Jul 14
-
27 May 14
-
01 Apr 14
-
28 Mar 14
-
The header of your site is typically the first thing people see.
-
have 30 seconds to make a good impression
-
-
13 Feb 14
-
15 Nov 13
-
20 Sep 13
-
01 Aug 13
-
21 Dec 12
-
31 Oct 12
noografoConsejo Superior de Investigaciones Cientficas,
Consell superior d'investigacions cientfiques,
Consello Superior de Investigacions cientficas,
Zientzien Ikerketako Kontseilu Gorena,
Spanish Council for Sciweb PROFESIONAL CMS_WEB Barra de herramientas marcadores imported
-
01 Sep 12
-
23 Aug 12
-
10 Jun 12
-
14 May 12
-
05 Apr 12
-
22 Dec 11
-
28 Nov 11
-
10 Nov 11
-
28 Sep 11
-
Rachel BrysonThis might be slightly complicated for me at first, but this gives you a how-to on making your own custom headers for Wordpress.
-
24 Sep 11
-
18 Aug 11
-
02 Jun 11
-
21 May 11
-
hide the header text while leaving it in the code
-
-
29 Mar 11
-
04 Dec 10
-
30 Oct 10
-
02 Oct 10
-
17 Aug 10
-
12 Aug 10
-
06 Aug 10
Mare Parker-OToole"We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header. "
-
09 Jul 10
-
25 Jun 10
Jorge PedretAdding Navigation to Your Header
Headers are another area where you can add navigation elements to your website.theme development wordpress tutorial design wpstudy delicious
-
18 Jun 10
-
26 May 10
-
17 May 10
-
14 May 10
-
07 May 10
mvbnrseif i need to hide header text (blog title) for my blog ie if my title will be in my graphics only
-
07 Apr 10
-
21 Mar 10
-
17 Mar 10
-
05 Mar 10
-
01 Mar 10
Antonio Salgado Leinerheaders con imágenes que rotan
-
29 Jan 10
-
31 Dec 09
-
26 Dec 09
Lisa M LaneThe CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs.
#header h1 a {
width: 400px;
height: 100px;
display: block;
background: url(images/headerimage.gif) no-repeat top left;
}
#header h1 a span { display: none; } -
21 Dec 09
-
20 Oct 09
-
09 Oct 09
-
07 Oct 09
-
06 Aug 09
-
11 Jul 09
-
05 Jul 09
-
29 Jun 09
-
You set the blog or website title and description in the Administration > Settings > General panel, and WordPress does the rest.
-
-
22 Jun 09
-
10 Jun 09
-
18 Feb 09
-
17 Feb 09
-
03 Feb 09
-
25 Jan 09
-
22 Dec 08
-
19 Nov 08
-
21 Oct 08
clark delashmet#header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% 'Times New Roman', Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px
-
03 Oct 08
-
30 Sep 08
-
22 Aug 08
-
29 Jul 08
-
21 Jul 08
-
23 May 08
-
22 Apr 08
-
21 Apr 08
-
22 Mar 08
-
10 Jan 08
-
29 Dec 07
-
04 Dec 07
-
27 Nov 07
-
20 Nov 07
-
12 Nov 07
-
30 Oct 07
-
19 Sep 07
-
30 May 07
-
17 May 07
-
19 Mar 07
-
14 Sep 06
-
17 Aug 06
-
10 Aug 06
-
Hiding the Header Text
Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.
To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector:
h1 {display:none; font-size: 230%; color: blue;.......It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there."
-
Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr (http://www.redalt.com/Tools/kubrickr.php). It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool.
-
-
16 May 06
-
13 Mar 06
-
06 Jan 06
-
04 Jun 05
-
31 May 05
-
30 May 05
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.