Setting up your Site Header with the Privateer

This tutorial covers setting up your site header in the Privateer theme for WordPress.

It is a bit long...but should provide some insight on exactly how to get the look for your site header that you want.

For this tutorial, I am going to start out with the default PWS Shades of Grey quick set, though any look as as good as another for what we are doing here.

To start with, I am going to turn on all of the available bars. This will give the site a very ugly look, but it will let me show how to use each bar without constantly turning individual bars on and off.

Turning individual bars off is done by editing the Configure Header Area option:

Go to Privateer > General Display > Header Setup > Configure Header Area
Enter the codes for the bars you want to use

Since I want them all, I set it to the following:

%bar1 %logo %cbar1 %image %cbar2 %pages %cbar3 %cats %bar2

Doing so gives the following look:

The Decorative Bars

The decorative bars, %bar1 and %bar2 are bars that can be styled but have no content.

To style them, you use the following options in the Header Setup panel:

Horizontal Bar 1: Styling
Horizontal Bar 2: Styling

Here are a few simple examples for the custom bar:

A red background stripe 5 pixels high:
height: 25px;
background: #EE1100;

A light grey background stripe 5 pixels tall with a 2 pixel tall dashed black border at the top:
height: 25px;
background: #EFEFEF;
border-top: 2px dashed #000000;

A little more interesting method is to tile a graphic:
height: 12px;
background: #FFFFFF url(/wp-content/themes/privateer/images/icons/eye.gif) repeat-x left center;

Some good uses for the decorative bars include:

Creating custom tops and bottoms for the site header
Placing space between other bars
Adding a padding between the site header and content area
Adding a padding above the site header

Note:

You can use decorative bars multiple times ( e.g. %bar1 %image %bar1 )

The Logo Bar

The logo bar is used to place the following items in your header:

A logo
Your site title
Your site tagline
Your posts RSS feed
Your comments RSS feed
An email RSS feed (via feedburner)
A Search Box

You can style the bar and show/hide individual pieces of it.

The logo, title, and tagline are displayed on the left side while the RSS feed links and search box are displayed on the right side.

Each group of items is placed within a shared container.

Most of the options for the logo bar are shared with the image bar and located in the Header Setup menu:

Privateer > General Display > Header Setup

Styling the logo bar
To style the bar itself, use the Logo Area: Styling option.
Here you can setup a backgrounds and borders for the bar.

The following are a couple of style examples to give you an idea of what can be done:

A blue background with a black 2 pixel border around it:
background: #0011EE;
border: 2px solid #000000;

A white background with a compass on the left side:
background: #FFFFFF url(/wp-content/themes/privateer/images/compass_logo.gif) no-repeat top center;

If you set a background image, don't forget to add a height attribute if needed.

Setting up a logo image
To set up a logo in the logo bar, you use the following two options:

Show Logo Image?
Logo Image: Styling

In order to use a logo, you must upload it to the /privateer/images directory and enter the name in the Show Logo Image option.

Once it displays, you can style the container for the logo.

You can place extra space on any side of the logo by using the margin attribute.

margin: Tpx Rpx Bpx Lpx;

This would give you T pixels of space at the top, R to the right, B at the bottom, and L to the left.
If you want no extra space for one of them, simply use 0 in place of the relevant px entry. ( e.g. margin: 0 0 0 0; )

If you want a border around the logo, set it with the border: css attribute:

border: aPX solid #RRGGBB;

If you want an additional space outside of the logo but inside of a border you can use the padding and background attributes together:

padding: 2px;
background: #CCCCCC;

Setting up the site title

The title of your site is set within the Blog Title option located the standard WordPress Settings > General menu.
Whatever you enter as the Blog Title will show up as your title in this bar.

You can use the following options to setup the title within the logo bar:

Show Blog Title?
Blog Title
Blog Title: Font Weight
Blog Title Color
Blog Title Color: Hover

Show Blog Title is used to note whether or not to display the blog title.

Blog Title is used to style everything about the way the title is shown except for the font-weight and colors. You can set borders, margins, paddings, backgrounds, alternate font faces, etc. with this option.

For example, if you wanted to use an interesting font, such as the Regulators font from Iconian, you could set that here. Of course, you should be sure to set alternates in case the viewer doesn't have the specified font installed.

Here is a style that uses the Regulators font (if installed on the viewers system ) and sets a red background with a black border around the title:
font-family: regulators, helvetica, verdana, tahoma, arial, sans-serif;
background: #880000;
border: 2px solid #000000;
padding-left: 3px;

Blog Title: Font Weight is used to note whether you want the title to be bold or not.

Blog Title Color is used to set the color of the title.

Blog Title Color: Hover is used to set the color of the title when someone hovers over it.

Setting up the site tagline
The site tagline ( from Settings > General in the standard WordPress menu ) is configured for the logo bar with the following two options:

Show Blog Tagline?
Blog Tagline Style

As with the blog title, these note whether or not to show the tagline and how to style it.
Unlike the blog title, you setup colors and font weight with the style option as the tagline is not made into a link.

Setting up the search box
To setup the search box, you use the following options in the Header Setup menu:

Show search box?
Search box style
Text in header search box

Show search box notes whether or not you want the search box displayed in the logo bar.

Search box style is used to style the search box. Some common attributes for styling the search box are:

width:
border:
margin:

Text in Header Search Box is used to enter any text that you want in the search box by default.

If you use the search box and any rss links, be sure that the RSS Box Width ( in Privateer > General Display > RSS ) is set to be wider than that of your search box ... or you will get very odd looks.

A note on RSS Related Settings:
RSS settings for use in the logo bar are located in the Privateer > General Display > RSS menu.

If you are going to display RSS feeds in the logo bar, you will need to ensure that the RSS Box Width option is wide enough to display all of the content it contains ( both rss links and the search box ).

Setting up the post RSS feed
If you want your posts RSS feed to be displayed in the logo bar, you can use the following options to do so:

Show Post Feed icon?
Post Feed Link Text
Post Feed Link "Title"

Show Post Feed icon will determine whether or not /privateer/post-feed-small.gif will be displayed.

If you want to use a different feed icon, do one of the following:

upload the icon you want to use to the /privateer/images/ folder and edit the .posts-icon css entry in core_css.php ( recommended )
overwrite the post-feed-small.gif icon with your own icon

Post Feed Link Text decides what text will be shown for the posts rss feed in the logo bar, if any.
Delete everything out of this entry to have no text displayed.

Post Feed Link "Title" decides what text, if any, will be shown when a user places their mouse over the RSS icon and/or text in the logo bar.

Setting up the comments RSS feed

Setting up the comments RSS feed is just like setting up the posts RSS feed, but uses the following options:

Show Comment Feed Icon
Comment Feed Link Text
Comment Feed Link "Title"

To change the comments feed icon, do one of the following:

Upload your comments feed icon to /privateer/images and edit the .comments-icon css entry in /privateer/core_css.php.
Overwrite /privateer/images/comment-feed-small.gif with the image you want to use

Setting up the email RSS feed
If you are using feedburner and have it configured in the Privateer > Global Settings > Feedburner menu, you can use the following options to setup links so that your readers can subscribe to your posts rss feed via email:

Show Feedburner Email icon?
Feedburner Email Link Text
Feedburner Email Link "Title"

To change the icon used for the email RSS link you can do one of the following:

upload your email rss icon to /privateer/images and edit the .email-icon css entry in /privateer/core_css.php
Overwrite /privateer/images/email-feed-small.gif with the image you want to use

NOTE: If you are using static graphics for the logo bar ( such as a mini site header ), be sure to properly setup your site layout!

The Image Bar

The image bar is much like the logo bar, but it can be set to use rotating images and has support for opaque color overlays.

If you choose to display the logo, blog title, blog tagline, rss feeds, and/or search box, the settings from the logo bar are used.

To configure the image bar, use the options in the Privateer > General Display > Header Image menu.

This bar will check the /privateer/images/header folder and grab an image in it at random to display whenever someone visits your site. If you want the same image to be shown every time, place only one image in /privateer/images/header.

Make Header Image Clickable?
If set to yes, people will be able to click on the header image bar to go to your home page.

Header Image: Height
Images shown are displayed as background images. This setting notes how much of any particular image will be shown. Be sure that your header images are at least this tall.

For performance reasons, I recommend using images that are the same height as you have set here.

Header Image Alignment:
This option tells how to align the image on the page. This is primarily for fluid width displays where you may or may not be displaying the entire width of an image. Options available are:

top center - place the top middle of the image at the top middle of the bar (can cut off the sides)
top left - place the top left of the image at the top left of the bar ( can cut off the bottom right )
top right - place the top right of the image at the top right of the bar ( can cut off the bottom left )
center left - place the middle left of the image at the left middle of the bar ( can cut off the right and top/bottom )
center center - place the middle of the image in the middle of the bar ( can cut off all sides )
center right - place the middle right of the image in the mittle right of the bar ( can cut off the left and top/bottom )
bottom left - place the bottom left of the image at the bottom left of the barx ( can cut off the top right )
bottom center - place the middle bottom of the image at the bottom middle of the bar ( can cut off the top and right/left )
bottom right - place the bottom right of the image at the bottom right of the bar ( can cutt off the top left )

Each side of the image bar can have an opaque area placed over it. Opaque areas have the following options:

Value - How opaque? ( 0 disables the overlay )
Width - How wide should the overlay be?
Color - What color should the overlay be?

If you want to have the logo, title, tagline, rss links, and/or search box shown on the image bar, use the following options:

Overlay Logo
Overlay Blog Title
Overlay Blog Tagline
Overlay RSS
Overlay RSS Comments
Overlay RSS Email
Overlay Search Box

The logo, title, and tagline share one overlay and the rss, rss comments, rss email, and search box share a second overlay.
Each of these containers can be styled individually via the following two options:

Overlayed Blog Title/Tagline Style

[/li]
[li]Overlayed RSS Style[/li]
[/list]

You can give the containers opacity, borders, backgrounds, etc.

NOTES:

If you are using a header graphic ( such as a mini site header ), be sure to setup your site layout properly!
I will be posting a mini site graphics setup tutorial soon!

The Page Menu Bar

The page menu bar is used to create a menu out of various wordpress pages on your site.

Simple experimentation will show you how to get the look you want for the page menu bar. That being said, here are a few notes on what the page menu bar cannot currently do:

It cannot use the default background for your site
It cannot be set to take up less than the width of the site container
It cannot show images inside of it

That being said, here is what it can do:

Display all wordpress pages on your site as a menu
Exclude the display of specified pages
Show only pages that are in the top X levels if you use subpages
Show Home, Forums, RSS, RSS Comments, RSS Email, Store, and e-Junkie cart links
Have a sort order set
Show page titles as link titles
Have submenu widths set

All options for configuring the page menu bar are in the Privateer > General Display > Page Menu Bar menu.

The Category Menu Bar

The category menu bar has the same functionality and limitations as the page menu bar, but uses your sites category list to display category archive pages.

Options for configuring the category menu bar are in the Privateer > General Display > Category Menu Bar menu.

The Custom Content Bars

The custom content bars are new as of version 1.4 and can be used to add completely custom bars to your site header.

These each have a content area and styling option which are located in the Privateer > General Display > Header Setup menu and are named:

Custom Content Bar X Content
Custom Content Bar X Styling

Place your content in one of these bars and setup any styles you want to have custom content included in the header.

Some good uses for the custom content bars are:

Adding banners or widgets above, below, or between other bars
Creating an entirely custom header for your site