The Category Bar is a header area bar within The Privateer Theme that can be used to display categories within your site.
To get it setup and configured:
- Go to the "Privateer" » "General Display" » "Category Menu Bar" admin menu.
| Styling | Links |
|---|---|
| Choose categories to not be shown | Create a home link |
| Specify the maximum depth | Create an e-junkie cart link |
| Display or hide link titles | Create a main store link |
| Set the border style | Create a posts RSS link |
| Style the category links | Create a comments RSS link |
| 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 Category 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 Category 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 category list, enter the name you want to be used for your store link in the Main Store link in Category 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 Category 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 Category 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 Categories
If you have categories that you do not want to be displayed within the category menu bar, enter the IDs of all such categories in the Exclude categories from Category Menu Bar option.
Categories should be separated by commas.
You can get the category ID for categories by hovering over the "Edit" option for a category while they are listed in the category editor and reading the ID at the end of the url from your browser bar.
If your browser does not display a category id, select edit and read the ID from the end of the URL in your browsers status bar.
Setting the Menu Child Category Depth
To limit the depth of the category menu bar, set the Depth of Category Menu Bar to a non-zero number between 1 and 10. That will make the bar 1 to 10 levels deep.
To let all categories be shown, set this to 0 (zero).
Displaying Category Titles
If you want category titles displayed in the category menu bar, you can set the Title tags in Category Menu Bar option to yes.
This is typically a bit redundant unless your second level and lower categories 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 categories 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 category 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 category 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 category 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 Category Menu Bar
- If you would like all text in the Category Menu Bar to have a text transform, select the transform with this option.
Arrow Color Choice
Arrows are displayed to the right of categories which have child categories.
Use this option to choose the arrow color.
For dark background category bars, use the white arrow.
For light background category bars, use the black arrow.
Sub-menu Width Setup
To get nice, even looking menus, a sub-menu width is used when drawing the category 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.