The site header, within the privateer theme, consists of a number of horizontal bars. You can choose which bars, if any, you want to use and configure each of the bars you use. Whether you want a completely custom header that you designed yourself, one consisting only of bars you can setup via the privateer menus, or one that contains both, you can do it with the privateer theme.
Currently available bars consist of:- The Logo Bar
- The Image Bar
- The Page Menu Bar
- The Category Menu Bar
- 2 Decorative Bars
- 3 Custom Content Bars
To specify which bars you want to use, enter their codes into the "Configure Header Area" option
> Privateer > General Display > Header SetupTo see them all, enter
%bar1 %logo %cbar1 %image %cbar2 %pages %cbar3 %cats %bar2 then save your changes and look at your site. The result will be quite ugly but should illustrate clearly how the different bars look.
Before deciding on the bars to use, here is some more detailed information about each of them:
The Logo Bar - Can display a logo, title, tagline, rss feeds, and search box
The Image Bar - Like the logo bar, but with opaque overlays and rotating background images
The Page Menu Bar - A menu of the pages on your site
The Category Menu Bar - A menu of categories used on your site
The Decorative Bars - Static bars for decorative purposes
The Custom Bars - Areas to place custom content in
Once you know which bars you want to use, edit the
Configure Header Area" entry to include the bars you want in the order ( from top to bottom ) that you want them displayed on your site then save your changes and reload your home page to see the results.
Now that you know which bars you want, it is time to configure those you are going to use.
Configuring the Logo BarTo configure the logo bar, stay in the "Header Setup" menu and edit the following options.
Logo Area: StylingThis option is used to style the entire bar. Typically you would style the background and border for this bar here, though other styling is certainly possible. If you want a border and are not sure how to set one, here is the format for border styling in css:
border: type width color;
And here are some examples:
border: solid 2px #000000; ( a solid 2 pixel wide black border )
border: dotted 1px #FF0000; ( a dotted 1 pixel wide red border )
There are a lot of good css resources on the internet. If you purchased a copy of the privateer theme from me, check the owners forum for a good resource on using css. If not, you might want to consider grabbing a copy of my
Simple HTML and CSS handbook or using a search engine to do some reading on styling...as knowing the basics helps a lot when creating content for a web site.
Avoid setting margins and paddings here as this bar is a table.
Show Logo Image?If you want a logo image to be displayed, upload it to your /privateer/images directory and enter the name of it here.
Logo Image: StylingThis option styles the logo image. If you want to move the logo about a bit, use the margin: css entry.
margin: TOPpx RIGHTpx BOTTOMpx LEFTpx;
For example, to force 10 pixels of space to the right of the logo, you might use:
margin: 0 10px 0 0;
Other css styles such as borders can be used here as well.
Show Blog Title?If you want the title of your site to be displayed in the logo bar, set this to Yes.
Blog TitleUse this option to style the blog title ( except for color and font-weight ).
Blog Title: Font WeightChoose to make the title bold or not
Blog Title ColorSet the color for the blog title here using RRGGBB notation and/or the color picker. To avoid using the color picker, just enter the RRGGBB value that you want to use and then press tab on your keyboard or click elsewhere on the page.
Blog Title Color: HoverSet the color to change the title to when a user places their mouse over the blog title
Show Blog Tagline?Choose whether or not to show your blogs tagline ( set in Settings - General - Tagline within the normal wordpress admin options )
Blog Tagline StyleUse this option to style the tagline.
Show Search Box?Use this option to note whether or not you want the search box placed within the logo bar
Search box styleUse this option to style the search box within the header. Some good css attributes to use here are:
- width:
- margin:
- padding:
- border:
Text in Header Search BoxIf you enter text here, it will be shown by default within the search box.
Once you have these all set, use the RSS options menu to setup any RSS items you want in the logo bar:
Privateer - General Display - RSSRSS Box Width:This option sets the width of the box that contains both the search box and your RSS links. It should be at least as wide as you set the search box.
Show Post Feed Icon?Specify whether you want the feed icon displayed
Post Feed Link TextIf you want text displayed for the rss feed icon, enter that text here
Post Feed Link TitleIf you want a blurb displayed when a user mouses over the rss feed icon, enter that blurb here.
Show Comment Feed Icon?, Comment Feed Link Text, and Comment Feed Link TitleThese are just like the Post Feed options immediately above, but for the wordpress comments feed
Show Feedburner Email Icon?, Feedburner Email Link Text, an Feedburner Email Link TitleIf you use feedburner, you can set these up so that people can subscribe to your feeds via email.
At this point, you have the logo bar fully configured. Save your changes and reload your site then make tweaks as needed.
The most common problem here is making the RSS Box Width too small to contain the rss links and search box. If that part looks odd, ensure that you have enough space in the box to hold them all.
If you use firefox, I recommend grabbing the
measureit plugin so that you can measure distances on any web page. On that note, I also highly recommend getting the following firefox plugins:
- Color Zilla - Get the css RRGGBB color notation for anything shown on a web page
- HTML Validator - Check sites for html validation
- Web Developer - All kinds of nice tools for troubleshooting how things display on a website
Configuring the Image BarThe Image Bar is much like the logo bar, but has the ability to have opacities applied and display rotating background images so people see different images in your header at random as they move about your site.
The Image Bar uses the settings described above from the Logo Bar as well as those on the Header Image menu:
> Privateer > General Display > Header ImageImages to be used in the Image Bar should be placed in /privateer/images/header on the server.
Be sure to make the images wide enough for the maximum intended display width of your site!
If you want people to see images at random when they come to your site, place multiple images in the above folder and they will be chosen at random. If you want a specific image to always be displayed, place only one image in the folder.
You can easily back up your header images by moving them to the /privateer/images/backup-headers folder.
The following options are unique to the image bar:
Make Header Image Clickable?If set to yes, people can click the image to go to your home page.
Header Image: HeightThis sets the displayed height of the image. Your images can be larger than this, but this is the height that will be displayed. For performance reasons, I recommend making the header images you use the same height as this.
Header Image: AlignmentThis specifies how the image should be aligned when shown. Top Center will have the center of your images displayed in the center of the header.
Opacity Left: ValueIf you want to overlay an opaque area over the left side of the images shown, enter a value here. The higher the value, the less visible the image.
0 means not to have an opaque area on the left.
Opacity Left: WidthSpecify the width of the left opaque area if you choose to have one. Set this to 0 if you don't want an opaque area.
Opacity Left: ColorNote the color that you want to use for the opaque overlay on the left side.
Opacity Right ( Value / Width / Color )These are just like the above three options, but are for setting an opaque overlay on the right side of the image bar.
Overlay (item) over Header Image?Use these options to note whether or not you want the various items from the logo bar to be shown on the image bar.
Items are broken into two groups, each having their own container on the image bar:
- Logo / Title / Tagline
- RSS Feeds / Search Box
You can style the containers via the two styling options on this menu.
When done, save your changes and reload your page to see the results. If using rotating images, reload it a few times and you should see the image used change randomly.
Configuring the Page Menu BarThe page menu bar is used to display your wordpress pages as a menu in the header of your site. You can configure it via the Page Menu Bar options page:
> Privateer > General Display > Page Menu BarSee the in theme help next to each option for details on what each option does.
Configuring the Category Menu BarThe category menu bar is used to display your wordpress categories as a menu bar in the header of your site, taking users to the specified category archive when selected. Options are configured via the category menu bar options page:
> Privateer > General Display > Category Menu BarConfiguring the Decorative BarsThe two decorative bars ( %bar1 and %bar2 ) are primarily intended for creating spaces between and/or above/below other bars within the header.
You can style them via the Horizontal Bar 1: Styling and Horizontal Bar 2: Styling options in the Header Setup menu:
> Privateer > General Display > Header SetupSetting borders, background colors, and/or background images can give these bars some interesting looks.
Configuring the Custom Content BarsThe three custom content bars ( %cbar1 %cbar2 %cbar3 ) are available to place custom horizontal areas within the header. They can be configured within the Header Setup menu:
> Privateer > General Display > Header SetupEach bar has both a content and styling option. For example, custom bar 1 has the following two options:
- Custom Content Bar 1: Content
- Custom Content Bar 1: Styling
The content option is where you place your content while the styling option is where you give any extra styles you want for the bars container.
If you want a completely custom header for your site, you can set the Configure Header Area option to "cbar1", enter your content into the content option for custom content bar 1, and save your changes.
Once you have all of your header bars finished, reload your home page and tweak until you have things as you want them.