The Page Bar is a header area bar within The Privateer Theme that can be used to display pages within your site.
To get it setup and configured:
- Go to the "Privateer" » "General Display" » "Page Menu Bar" admin menu.
| Styling | Links |
|---|---|
| Choose pages to not be shown | Create a home link |
| Specify the maximum depth | Create an e-junkie cart link |
| Choose the sort order | Create a main store link |
| Display or hide link titles | Create a posts RSS link |
| Set the border style | Create a comments RSS link |
| Style the page links | |
| Specify the arrow color to use | |
| Specify the width of sub-menus |
Home Page Link Setup
To add a link to your home page at the front of the bar, enter the name you want to be used for the link in the Home Link in Page Menu bar option.
E-Junkie Cart Link Setup
To add a link to your e-Junkie shopping cart (if you have one), enter the name you want to be used for the link in the View Cart link in Page Menu Bar option.
Be sure to enter your cart url into the e-Junkie Cart URL option located in the "Privateer" » "Global Settings" » "e-Junkie" menu or the link will not be displayed.
Main Store Link Setup
To add a link to your online store after the page list, enter the name you want to be used for your store link in the Main Store link in Page Menu Bar option.
Be sure to enter a store url into either the e-Junkie Store URL option located in the "Privateer" » "Global Settings" » "e-Junkie" menu or the Main Store URL option located in the "Privateer" » "Global Settings" » "Main Store" menu.
If you have both store links set, the Main Store URL will be used in preference to the e-Junkie Store URL.
RSS Post Link Setup
If you want a link to your posts rss feed displayed after the post list, choose Yes for the Posts RSS link in Page Menu Bar setting.
The name to be used for the link is name you have set for the Post Feed Link Text option located in the "Privateer" » "General Display" » "RSS" panel.
RSS Comments Link Setup
If you want a link to your comments rss feed displayed after the post list, choose Yes for the Comments RSS link in Page Menu Bar setting.
The name to be used for the link is name you have set for the Comment Feed Link Text option located in the "Privateer" » "General Display" » "RSS" panel.
Hiding Particular Pages
If you have pages that you do not want to be displayed within the page menu bar, enter the IDs of all such pages in the Exclude pages from Page Menu Bar option.
Pages should be separated by commas.
You can get the page ID for pages by hovering over the "Edit" option for a page while they are listed in the page editor and reading the ID at the end of the url from your browser bar.
If your browser does not display a page id, select edit and read the ID from the end of the URL in your browsers status bar.
Setting the Menu Child Page Depth
To limit the depth of the page menu bar, set the Depth of Page Menu Bar to a non-zero number between 1 and 10. That will make the bar 1 to 10 levels deep.
To let all pages be shown, set this to 0 (zero).
Sort Order Selection
There are two options for sorting the page menu bar currently:
- Menu Order: Display pages in menu order, which is via the number you set for the menu order option on each page.
- Post Title: Display pages alphabetically by title.
Displaying Page Titles
If you want page titles displayed in the page menu bar, you can set the Title tags in Page Menu Bar option to yes.
This is typically a bit redundant unless your second level and lower pages have long titles and you set the submenu with to a rather low width.
Border Styling
To style the border around all items, use the Border around all menu items option.
This uses standard css notation without the ending semi-colon, which includes three parts separated by spaces:
- The border style
- solid, dashed, or dotted
- This denotes how the border will be drawn.
- The border width
- Set this to a value in pixels to specify the thickness of the border.
- This should be entered like: 1px or 2px
- The border color
- Set the RRGGBB color notation that you want to use for the border color.
- Some examples:
- solid 1px #000000 ( solid 1 pixel wide black borders )
- dashed 2px #CDDECD (dashed 2 pixel wide light green borders)
- dotted 1px #FFFFFF (dotted 1 pixel wide white borders)
Menu Item Styling
To style the individual menu items, use the options listed below:
- Background Color
- Set this to the RRGGBB color you want to use as the default background for pages listed within the menu.
- You can use the popup javascript color chooser to set the color if you are not completely familiar with RRGGBB color notation.
- Background Color: Hover
- Use this option to set the color that the background will change to when you hover over a listed page with the mouse pointer.
- Background Color: Parent
- Use this option to set the color that a parent menu item will change to when you are hovering over child items within it.
- Font Size & Face
- Set the font size and styles that you want used within the menu.
- This should be setup by listing a size in either em or pixels (px) and then following it with a space and a comma separated list of fonts that you want to be used.
- If you want to use font names with spaces in them, enclose them with quotes.
- Link Color
- This controls the color of the text within each page listed in the menu.
- You can set it via entering an RRGGBB value or using the javascript color picker that comes up when you click in the option box.
- Link Color: Hover
- This controls the color of the text within each page item when it is hovered over.
- Enter the RRGGBB value you want for the color or choose a color with the popup javascript picker that comes up when you click in the option box.
- Transform text in Page Menu Bar
- If you would like all text in the Page Menu Bar to have a text transform, select the transform with this option.
Arrow Color Choice
Arrows are displayed to the right of pages which have child pages.
Use this option to choose the arrow color.
For dark background page bars, use the white arrow.
For light background page bars, use the black arrow.
Sub-menu Width Setup
To get nice, even looking menus, a sub-menu width is used when drawing the page menu.
To make them narrower or wider, select a value for this option.
The numbers displayed are in em, or character width values.
13 represents menus 13 characters wide.