Start to Finish Site Setup with Mini Site Graphics

[Tony Lee]

This tutorial is designed to show how to apply a set of mini site graphics to the Privateer Theme.

The graphics used in this example can be gotten via Kezz's WSO at the Warrior Forums.

If you have version 1.4, be sure you have added the following patch:
. Spanned Above / Below Box Content ( see the attachment on this tutorial )

To start with, I will use the Blank Slate quickset.

Initially, we have the following look:



And we have the following graphics:

• 300x250.gif
• bodybg.jpg
• footer.jpg
• header.jpg
• htmlbg.jpg

Step 1 : Upload your graphics to your server

For this example, I will place everything except header.jpg into /wp-content/themes/privateer/images/ealw/ .
The header.jpg file I will place into /wp-content/themes/privateer/images/header/ .

Step 2 : Setting up the body background

To setup the body background, we are going to use the htmlbg.jpg image.

Because blank slate sets the background for the entire site to white, we will want to change that via the Body Style Option.

a. Go to the Privateer > General Display > Text and Links option menu
This is where you can configure styling for the body tag as well as link colors and such for the site.

b. In the Body Style menu, change the following line of css from

• background: #ffffff;

to

• background: #ffffff url(/wp-content/themes/privateer/images/ealw/htmlbg.jpg) repeat top left;

That will cause the default background for the site to be a small tiled image. Once saved and reloaded, the site will look like the following:



Clearly, we have some work to do. The reason that the image is tiled everywhere is that we have no background set for our content piece.

Step 3 : Setting up the body background for our content area

Since we have a graphic for our content area ( bodybg.jpg ), we will need to make our site a fixed width and set the background for our content area.

a. Go to the Privateer > General Display > Page Framing menu
This is where you can choose to have a static or fluid site and style the content area of the site.

b. Set our Layout Width and Type ( Fixed or Fluid ) option to be the width of our body background image

Looking at bodybg.jpg, we see that it is 950 pixels wide so we set this option to 950px

c. Set our Layout Container Style option to use the bodybg.jpg image as a background tiled vertically.

To do so, we add the following line to the Layout Container Style option:

• background: #FFFFFF url(/wp-content/themes/privateer/images/ealw/bodybg.jpg) repeat-y top left;

Once we save our changes and reload the page, we will see the following:



Things are looking a bit better now, but we still need to setup our site header, our sidebars, and our footer.

Step 4 : Setting up the site header

The header for this mini site graphics set is header.jpg.

First, make sure that only header.jpg is in the /privateer/images/header directory on the site.

To make use of it, we will use the rotating image bar, hence the reason I placed it in /privateer/images/header . For this to work, we need to make sure that there are no other images in /privateer/images/header. If there are, move them to /privateer/images/header-backup for now.

Having other images in the /header folder will cause a random image to be picked and displayed.

Second, we need to set our header to use the rotating image bar and configure it.

a. Go to the Privateer > General Display > Header Setup option menu
This is where you specify which bars you want to use for the header and do styling for custom bars, static bars, and the logo bar.

b. Change the header to use only the rotating image bar

To do this, we change the "Configure Header Area" option to %image and save it.

Once done, we reload our site and see the following:



The header image should now be (partially) showing and look rather poor. To fix this, we need to configure the rotating image bar.

First, go to the Privateer > General Display > Header Image option menu.

If you want people to be able to click the header to go to the main area of the site, you would set Make header image clickable? to yes.

To get the entire image to show up, we need to change "Header Image: Height" to have the same height as our header image. In this case, that would be 218 pixels.

• Enter 218 into the Header Image: Height box

To ensure that it matches the body background, we want to change Header Image: Alignment to top left.

• Set Header Image: Alignment to "Top Left"

Our header contains what it needs, so we want to turn off the Logo, Title, and Tagline.

• Set Overlay LOGO over header image to No
• Set Overlay Blog Title over header image to No
• Set Overlay Blog Tagline over header image to No

Now, we can either leave the rss links and/or search box or remove them. For now, we will hide them. In the first followup to this tutorial I will cover showing them and positioning them.

• Set Overlay RSS over header image to No
• Set Overlay RSS Comments over header image to No
• Set Overlay Search Box over header image to No

Once we save our changes, our site now looks like the following:



A bit better, but we need to do something about the sidebars and footer still.

Step 5 : Setting up the footer

Currently, the footer looks like the following:



To setup our footer, we need to apply the background image to it.

a. Go to the Privateer > General Settings > Site Footer option menu

This is where you style and add content to the footer of the site.

b. Add our footer image to the Footer Style option

For this example, we will apply it as a background image and style the footer area until we get the look we want. To do so, add the following lines to your Footer Style option:

• background: #FFFFFF url(/wp-content/themes/privateer/images/ealw/footer.jpg) no-repeat top left;
• color: #FFFFFF;

Note that we set the image to align from the top left and not to repeat. We also changed the text color for the footer to white because our site background image is very dark.

We will also want to edit the padding line to ensure that our footer text is below the bottom created with the image. To do this change the following line:

• padding: 10px

to the following:

• padding: 30px 10px 10px 10px;

This will push text down 30 pixels, just below the bottom shown in the image.

Finally, we might want to change the color of our links to a very light blue. To do this we edit the Footer Style: Links option by adding the following line:

• color: #DFE6F2;

We might also want to edit the hover color via the Footer Style: Links Hover option.

When done, our footer now looks like the following:



Time to move on to the sidebar area.

Step 6 : Setting up the sidebars

For this tutorial, we will want to have both sidebars on the right with colors that match our theme and the 300 x 250 image above them.

First, we want to edit the sidebars themselves.

a. Go to the Privateer > HTML Entities > Sidebars option menu
This is where we can style the individual sidebars.

b. Make sure that Sidebar 1 Side and Sidebar 2 Side are both set to Right
We want them both on the same side so that we can span the above content box for area one to take up the space that the above content box for sidebar two would normally consist of.

c. Set Sidebar 1: Span Above Box Content to Yes
This tells the privateer to take the space above both sidebars and give it to the above content box for sidebar one. Note that this only works if no content is entered into the above content box for sidebar two and both sidebars are on the same side of the content.

d. Add our image as a link to the Sidebar 1: Above Box Content option

I entered the following for this example:
<a href="http://localhost/"><img src="/wp-content/themes/privateer/images/ealw/300x250.gif" height="250px" width="300px" style="border: 5px solid #DFE6F2;"></a>

e. Set a height, centering, and vertical align for our above box content area
Without a height, you will get different results depending on your browser.

To do this, we add the following to the Sidebar 1: Above Box Styling TD:
vertical-align: top;
text-align: center;
height: 250px;

f. Move the image down a bit by positioning the div
Since we want to have a bit of space between it and our header, we add a top padding to the div for the content.

To do this, we add a padding to the Sidebar 1: Above Box Styling DIV option:
padding-top: 10px;

Once saved, the area above our sidebars looks like the following:



If we wanted, we could set a light blue border to the left of the sidebars. Normally, you would just add the border to the sidebar styling for sidebar 1. However, since we are using the above box content area we would also need to add a border to the Sidebar 1 Above Box Content TD option.

border-left: 2px solid #DFE6F2;

Add this to both options ( sidebar 1 style and sidebar 1 above box style TD ) and we get:



We might also increase the left side padding on sidebar 2 to ensure that content within it does not bleed into the edge if we find that such happens.

Once satisfied with the sidebars, we will move on to setting up the widgets.

Step 7 : Setting up the Widgets

To setup the widgets, we need to go to the Privateer > HTML Entities > Widgets menu.

For this tutorial, we will place a box around each widget as well as a background behind the header.

First, we want to place a border on each widget container. To do so we edit the Widget Container option by adding the following line:

• border: 2px solid #DFE6F2;

If you do not want rounded borders, strip out the various border radius entries. If you do, and there are no border radius entries, add the following:

• -moz-border-radius: 5px;
• -khtml-border-radius: 5px;
• -webkit-border-radius: 5px;
• -border-radius: 5px;

Next, we want to set the background for each title to be a dark blue. To do so we edit the Widget Title Box option by adding:

• background: #0B3C8E;
• color: #FFFFFF;

To ensure that our titles can be seen when they are links, we add the following to Widget Title:

• color: #FFFFFF;
• font-weight: bold;

To start with, we will use the default method of showing links in the privateer and set the following options for all of the "List Items and Links Inside" options ( don't touch the overrides yet ):

• Left Border Color for Links: FFFFFF
• Link Text Color: 083C8E
• Left Border Hover Color for Links: 2D6DAA
• Link Text Hover Color: 2D6DAA

This will cause our widget items to be shown in dark blue and turn light blue ( with a dark blue block next to them ) when hovered over.



From there, we can tweak them until we have the look we want. Looking at the above image, perhaps we want to add a bit of left padding to our titles and remove the space between our title blocks and the widget container.

To do these, we would...

...remove the "padding: 4px;" line from the Widget Container option to get rid of the spacing
...change the "padding: 4px 0.25em;" line in the Widget Title Box to "padding: 4px 0.5em;"

The result would look like the following:



At this point, we just need to set up the content area to display the way we want it. With the content area gone we have a page that looks like the following:

[Tony Lee]

Step 8 : Setting up the default content look

Before tweaking any individual pages, we need to style all of the pages at once to give them a consistent look.

To do this, go to the Privateer > Default Page > Page Styling menu

This is where we style page level elements. For now, we will leave page styling alone as the defaults from the blank slate quickset should be fine.

However, we do want to change the way that posts look, so we want to go to the Post Styling menu and make some changes.

We want our posts to be contained within light blue boxes, have dark blue titles, the date as small grey text under the title, black text as the content, and a light blue footer containing the number of comments and the category that the post was entered into.

Setting a box around each post
To set a box around each post, we give a border to the "Wrapper Style" option by editing the current border to read:

• border: 2px solid #DFE6F2;

If you don't want rounded borders, remove the various radius entries:

• -moz-border-radius: 7px;
• -khtml-border-radius: 7px;
• -webkit-border-radius: 7px;
• border-radius: 7px;

Making the title text dark blue, light blue when hovered over
The best way to do this is to set these things as the default coloring for links on the site.

To do so, go to Privateer > General Display > Text and Links

Set "Link Default Color" to 0b3c8e
Set "Link Hover Color" to 4287c7

You might also want to set the default link and hover link decoration if you want them a particular way everywhere.

If, however, you wanted links elsewhere on the site to be different, you would do the following on the Privateer > Default Page > Post Styling panel:

• Add color: #0b3c8e; to the Title Text Style and Title Link Style options
• Add color: #4287c7; to the Title Link HoverStyle option
• Add text-decoration: none; to both if you do not want the titles underlined

For this tutorial, I went the first route and simply made all links on the site dark blue, light blue when hovered over.

Adding a small grey date just under the title
To do this, we need to style the date on this panel by adding the following options to the Byline Style option:

• color: #666666;
• font-size: 0.8em;

If we want the date to be aligned with the title, we need to ensure that the left margin and left padding in Byline Style matches that in Title Box Style.
For this example, we will use a left margin of 0 and a left padding of 5px for both.

Title Box Style padding line:

• padding: 5px 5px 0 5px;

This ensures that there is a 5px padding inside the top, right, and left of the title box.

Byline Style padding line:

• padding: 0 5px 0 5px;

This ensures that there is a 5px padding inside the right and left of the byline box.

Making the footer background match the border color
To get the footer to have the same background color as the border of the post container and show text as being a bit smaller, we add the following line to the Footer Style option:

• background: #DFE6F2;
• font-size: 0.8em;

With our post styling done, it is time to add content for the byline and footer we want to use.

Bylines and Footers for posts are setup on each individual page template. For this example I will show how to do the home page...and you can then do the same thing on any page type you want to match it.

Displaying the date in the byline area
To get the actual date to show up on the home page, we need to add a byline to the actual post content area.
To do it for the home page:

• Go to the Privateer > Home Page > Post Display menu
• In the "Post Byline" option, enter "%date('F jS, Y')%"

Other codes are noted in the Privateer > Manual > Post Info Vars manual.

Displaying the number of comments and categories for each post
In the same menu ( Privateer > Home Page > Post Display ), we want to set the following in the "Post Footer" option:

Comments: %comments('0', '1', '%', 'closed')% | Posted in %categories-linked(', ')%
%edit('<br />«', 'Edit This Post', '»')%

%comments('0', '1', '%', 'closed')% will cause 0, 1, the number of comments, or closed to be shown.
%categories-linked(', ')% causes all categories for a post to be shown as links to the relevant category archive page
%edit('<br />«', 'Edit This Post', '»')% causes an edit link to be shown under the first line if the viewer has the permissions needed to edit the post in question.

While here, remove any unwanted post kicker and set subtitles and summaries not to be displayed.

With these changes all done, we reload the home page and get the following:



Since the posts look good, let us clear out unwanted text on our home page. The method for doing this is the same for other page types.

• Go to the Privateer > Home Page > Page Display menu
• Remove unwanted content from the Page Level Kicker, Page Title, Page Subtitle, Page Summary, Page Byline, Extra HTML Above Post Listing Area, Extra HTML Below Post Listing Area, and Page Footer options.

With all of these removed, the site now looks like the following:



At this point, our site is pretty much ready to go.



If you wanted to place a banner or some flash content above the list of posts, you would place it in the Extra HTML Above Post Listing Area on the appropriate page.
For the home page, you could do this by doing the following:

• Go to the Privateer > Home Page > Page Display menu
• Add your content to the Extra HTML Above Post Listing Area
• If you want to style the container, you can use either the Privateer > Default Page > Page Styling menu or the Privateer > Home Page > Page Styling menu.

If you didn't want posts shown, but simply wanted a static page with no content, you would uncheck the box next to Show Posts?.

Want to see tutorials on how to do particular things related to using a mini site graphics set? Just let me know and I'll see about creating them as I have time.