In The Privateer, there are admin panels for styling all of the major HTML entities so that you do not have to worry about directly modifying style sheets if you do not want to.
If you do want to use stylesheets, you can setup styles via the core_css.php file located in the /themes/privateer/ directory.
| Ordered Lists | Unordered Lists | Data Lists |
| Tables | Forms | Images |
| Blockquotes | Paragraphs | HTML Headers |
| Code Sections | Preformatted Text | Horizontal Rules |
Ordered Lists
If you don’t quite like the way that ordered lists are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Ordered Lists" menu.
- Ordered List Styling OL Top Level
- This will style top level ordered list tags.
- If there is too much or too little space above or below ordered lists for your tastes, adjust the margin style.
- If you want a different bullet style, adjust the list-style-type style.
- See the article for more information on formatting lists.
- Ordered List Styling OL 2nd Level
- This option adjusts the style for ordered lists displayed as sub items within ordered lists, unordered lists, and data lists.
- Typically, margin is the main style that is edited here to get the spacing to look nice.
- Ordered List Item Styling Top Level
- This option sets the style for list items (<li>) at the top order of an ordered list.
- Commonly modified styles are margin, padding, and list-style-type.
- list-style-type can be armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, etc.
- Ordered List Item Styling 2nd Level
- Just like first level list item styling, but this will apply to items in a second level ordered list.
An example of a nested ordered list ( with two levels ):
<ol>
<li>Level 1 List, Item 1</li>
<li>Level 1 List, Item 2</li>
<ol>
<li>Level 2 List, Item 1</li>
</ol>
</li>
<li>Level 1 List, Item 3</li>
</ol>
Unordered Lists
If you don’t quite like the way that unordered lists are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Unordered Lists" menu.
Styling ordered lists is much like styling unordered lists.
The primary style attributes that are normally tweaked are the margin and list-style-type attributes.
- Unordered List Styling Top Level
- This option styles first level unordered lists within the content area.
- Common list-style-type settings for unordered lists are circle, disc, and square.
- Unordered List Styling 2nd Level
- This option styles unordered lists contained within other lists.
- Unordered List Item Styling Top Level
- This option styles items within top level unordered lists.
- Unordered List Item Styling 2nd Level
- This option styles items within secondary and lower level unordered lists.
Data Lists
If you don’t quite like the way that data lists are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Data Lists" menu.
Data lists are not seen all too often, but I personally find them quite nice to work with.
Instead of the normal UL or OL tags with LI tags inside of them, you use a DL tag as the container, DT tags as top level items and DD tags as second level items.
They do not have numbers or bullets by default, but you can use a left border on the DT and/or DD tags to get something similar.
- Data List Styling
- This styles data lists themselves.
- Very handy for adjusting margins and paddings above and below data lists.
- Data List Styling 2nd Level
- This styles data lists which are contained within other lists.
- Again, very handy for tweaking the space above and below them.
- Data Topic Styling
- This styles the data topics within a data list.
- If you want topics to have a different font, background, text-decoration, text color, etc. such can be done with this option.
- Data Topic Styling, 2nd Level
- This styles data topics in data lists which are contained within other lists.
- Data Definition Styling
- This styles the DD elements within a data lists.
- The padding, margin, left-border, font-size, and font-color attributes are commonly used to alter how data definitions are displayed.
- Data Definition Styling, Second Level
- This option styles data definitions for data lists which are contained within other lists.
Tables
If you don’t quite like the way that tables are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Tables" menu.
- Table Style
- This styles the table element itself.
- Commonly styled attributes include width, margin, and border.
- Table Caption Style
- If you make use of captions, you can use this to style them.
- Captions are placed in tables by setting a <caption> element within the table, outside of TR, TH, and TD elements.
- Table Header Cells
- Use this option to style table header cells within a table.
- Table Body Cells
- Use this option to style table data cells within a table.
- Table Footer Cells
- Use this option to style table data cells within the table footer, if you set one.
- Table footers are setup by using a <tfoot> tag set within the table, above the TR, TH, and TD elements, which contains TD elements of its own to use as the last row in the table.
- Zebra stripe all tables?
- Set this to yes if you want every other row in a table to have a different style.
- If you do not want every table on your site to do this, you can use class="zebra" within the table tag element to make particular tables do this.
- Zebra row TD style
- Use this to define the style for TD elements within alternating rows of zebra striped tables.
- Hover effect for all tables
- Use this to specify whether or not rows in tables should change color when the mouse is hovering over them.
- If you do not want every table on your site to do this, set this to No and add a class="hover" entry in those tables that you want to have this effect.
- To get both zebra and hover on the same table, use class="zebra hover"
- Hover row TD style
- For tables that have the hover style set for them, use this option to style the TD elements of rows which are being hovered over.
Forms
If you don’t quite like the way that forms are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Forms" menu.
The following options are currently available on the Forms menu:
- Form fields: Style
- This option styles input fields and textareas within forms.
- Form fields: Background image
- You can set the shadow inside of text fields and text areas with this option.
- Included backgrounds are inputbackgr-red.gif, inputbackgr-green.gif, inputbackgr-blue.gif, and inputbackgr.gif
- You can add more by uploading images to /themes/privateer/images/ and entering their name here.
- Highlight form fields?
- Set this to yes to give form input fields a highlight style when active.
- Highlight form fields: Style
- Set styling for form fields which have are active when you have the highlight form fields option set to Yes.
- Submit Buttons: Default Style
- Use this option to style submit buttons on forms in their default state.
- Submit Buttons: Hover Style
- Use this option to style submit buttons on forms when they are being hovered over.
Images
If you don’t quite like the way that images are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Images" menu.
In The Privateer Theme, there are a few different image styles available:
- Images in Posts ( for any image placed in a post )
- Post Excerpt Thumbnails ( for images displayed in post excerpts )
- Full Post Thumbnails ( for images tied to a post or page when displayed within full posts )
The first type is the generic type typically used.
The second is used to style thumbnail images which have been set within the post and/or page editor for particular posts or pages.
The reason for two different thumbnail styles is that you might want thumbnails to be styled differently when shown in a complete post than when shown in an excerpt. For example, perhaps you want them floated left in excerpts, but floated right when the entire content is being displayed.
- Images In Posts
- This is used to style images which contain no caption when displayed within posts.
- You can give them borders, postion them, etc. with this.
- Images In Posts: Caption style
- Style the caption box for images in posts which you give a caption to.
- Caption Text: Style
- Style the text within captions that you set for images.
- Post Excerpt Thumbnail Box style
- This styles the div drawn around thumbnail images (which are set via the post and page editors in this theme )
- Post Excerpt Thumbnail Image style
- This styles the actual thumbnail image itself when displayed within an excerpt.
- Full Post Thumbnail Box Style
- This styles the div that is drawn around thumbnail images when they are shown in the full body of posts or pages.
- Full Post Thumbnail Image Style
- This styles the actual thumbnail itself when posts and pages are drawn as full posts.
It is worth noting that whether thumbnails are shown for excerpts and/or full posts and what kinds of pages show wordpress posts and pages as which is specified within the various template menus for The Privateer theme.
Block Quotes
If you don’t quite like the way that blockquotes are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Blockquotes" menu.
This is a blockquote, as styled on this site. It is simply text within a <blockquote> tag set.
Block quotes are typically meant quote things, though oddballs like me often use them to place notices.
The following options are available for styling blockquotes on your site:
- Blockquotes: Style
- This option is for styling normal blockquotes displayed on your site.
- Blockquotes in blockquotes: Style
- This option is for styling blockquotes which are displayed within other blockquotes.
Paragraphs
If you don’t quite like the way that paragraphs are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Paragraphs" menu.
If you don’t quite like how paragraphs on your site are rendered, you can use the Paragraph Styling option to adjust them.
Commonly, you might adjust the margin and/or padding to get paragraphs to be closer together or further apart.
HTML Headers
If you don’t quite like the way that html headers (h1 to h6) are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "H1 to H6" menu.
The HTML Header Tagsets ( H1, H2, H3, H4, H5, and H6 ) can be styled in the H1 to H6 menu.
This will adjust the default, non-overriden use of such tags on your site.
Things such as the site header, page titles, page subtitles, post titles, post subtitles, etc. which get their own styles will use these as defaults, but will override them.
Code Blocks
If you don’t quite like the way that code blocks are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Code" menu.
<code> tags are typically used to display code of different types.
You can set styles for the code html tags on your site via the Code Styling option on your site.
Pre-formatted Text
If you don’t quite like the way that pre-formatted text blocks are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Pre" menu.
Pre-formatted text is generally used to display text formatted exactly as drawn to.
You can style pre-formatted text by using the PRE Styling option.
Horizontal Rules
If you don’t quite like the way that horizontal rules are displayed on your site, you can tweak them via the "Privateer" » "HTML Entities" » "Horizontal Rules" menu.
If you want more interesting horizontal rules, you can set styles for the Horizontal Rule Styling option.
You might give it a background, a border, a background image, a height or width, etc.
The horizontal rules shown on this page use the following style:
display: block; height: 8px; border: 1px solid #ccc; margin: 0.5em auto; color: #f9f2df; background-color: #f9f2df;
