Why do this? | What do I need to start? | How do I add my images?
Changing the style of one or more tabs | Changing the banner image
Other changes with CSS? | A different style for each content box

---

How to add a theme to your GuildPortal site using CSS

Why do this?

*NOTE* Since the time I wrote this post, GuildPortal has added a new feature called "CSS Additions to Standard" (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standards tab) which allows you to add CSS without needing to copy your entire stylesheet. This makes it much easier to add small pieces of CSS to control different parts of your site and still be able to use the control panel! I'd recommend this now if you are not that familiar with CSS or if you don't want to deal with fully custom CSS.

There are a few reasons why you'd want to convert your web page over to a custom CSS. For one, it makes it easier to change and adjust your theme and it gives you a lot more control over your page styles. Once you have a custom CSS set up, you can make your website have a different theme for one tab or for every tab of your site. You can also change your banner image depending on which tab you're on. Or change the style of your tabs! You can make other not so extravagant changes such as using different background images for your odd and even rows in your forums. Or, having a different font size or style of your Content Box Title.

Adding a theme using CSS goes beyond adding a pre-made theme from GuildPortal or setting up your own box borders and page styles with the tools GuildPortal provides. So if you're up to it, hopefully these directions are clear enough to step you through the process.

[top]

---

What do I need to start?

*NOTE* Follow these instructions if you have tried adding your images using the Custom Box Border section of the control panel (Control Panel > Style Tools > Custom Images : Box Borders) and it doesn't match what you want it to do. There have been a lot of changes in the Control Panel since I wrote this post, so I'd recommend trying the Control Panel first before trying this custom method.

First off, you'll need some images. Whether you make your own or copy some box borders from another site, it all breaks down to these common elements.

A content box needs four corners, four sides and a middle. Nine parts in all. This method makes three separate tables with three cells in each. By default, GuildPortal actually makes five cells in the top row (see this post for details). If you need to, you can add more cells for more intricate designs.

Table 1:

Top Left

Content Box Title* / Top Tile

Top Right

Table 2:

Left Tile

Content Box Body

Right Tile

Table 3:

Bottom Left

Bottom Tile

Bottom Right

• Each cell is independant, so you can make the content box corners as wide as you want. Careful though, if the Top Left and Top Right corners are too wide, it may force the Content Box Title into a second line and possibly mess up the spacing of your borders - this is more likely to happen in the left or right columns of your page.
• All three images in the Top row need to be the same height, this is also true for the Bottom row.
• Left and Right Tiles should be narrow (but don't have to be the same width) to maximize space for the text inside your Content Box Body.
• * Note * When designing the HTML for box borders, I used "ContentBoxTitle" to define the CSS of the title instead of using GuildPortal's default of "ContentBoxTitleNoBackground", frankly because it's too long.

Each tab of your GuildPortal site can have up to three columns of content boxes and each column can have a separate design. In the CSS below, each column is has a letter in front of the name to designate (L)eft, (C)enter or (R)ight column. Most of the time all three columns have the same style.

Once you have all your images ready, save them to the web. I wouldn't rely on hosting the images on the GuildPortal site itself because if your subscription runs out and you need to fix or change an image, you're out of luck. I use photobucket - it's free and very easy to use.

[top]

---

How do I add my images?

First off, all of this CSS can go into the CSS Additions tab (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab) or if you want Fully custom css, then read this post about adding a Custom StyleSheet and follow the directions.

You can now add more custom CSS. The CSS below assumes that you have the left and right side columns with one style and the central column with a different style. If you want the same style for all three columns, scroll down further for that CSS.

Copy the code below into your favorite text editor (like notepad) and change the URL (in green) to match the location of your images. Additionally, it is VERY important to include the height and width of EACH image (in blue).

Left & Right same style, Center Different

.topleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.toptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.topright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.lefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.righttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.bottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) no-repeat; height:52px; width:37px; }
.bottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.bottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }

.CenterContentZone .topleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.CenterContentZone .toptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.CenterContentZone .topright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.CenterContentZone .lefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.CenterContentZone .righttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.CenterContentZone .bottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) top right no-repeat; height:52px; width:37px; }
.CenterContentZone .bottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.CenterContentZone .bottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }

All three columns have the same stlye

.topleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.toptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.topright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.lefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.righttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.bottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) no-repeat; height:52px; width:37px; }
.bottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.bottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }

When you're done editing the CSS, add it to the end of your Custom StyleSheet (Control Panel > Custom HTML & Script > Custom CSS)

Now you'll need to edit the HTML of your box borders:

Go to Control Panel > Custom HTML & Script, you'll see Content boxes "Boxes, Left HTML", "Boxes, Center HTML", and "Boxes, Right HTML". Each link will open a window for custom HTML for each of these content boxes. Paste the code below for the appropriate box, then check the enable box and save.

Left, Center & Right

<div id="box_$block[title]">
<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="topleft"></td>
  <td class="toptile"><div class="ContentBoxTitle">$block[title]&nbsp;</div></td>
  <td class="topright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp;</td>
  <td class="righttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomleft"></td>
  <td class="bottomtile">&nbsp;</td>
  <td class="bottomright"></td>
</tr>
</table>
</div>
<br>
</div>

Time to check your hard work!

Reload your home page and see if all the borders line up and all the spacing is correct. You may not get it perfect the first time. But if your see gaps in your border, go back and check the height and width settings in the CSS of that image and the images surrounding it.

[top]

---

Changing the style of one or more tabs

1) Make a copy of your complete Custom StyleSheet and paste it into your text editor.
2) Delete out the elements you don't plan on changing (e.g. Font sizes, link colors, etc).
3) Change whatever design elements you want.

• Tab images
• Border Styles
• Etc.

4) If you really only have a few elements you want to change:

• Add a <style type="text/css"> to the beginning and </style> to the end of your CSS.
• Find a "Free Form Text/HTML" box on the page where you want to change the style. And click the Edit button.
• Paste (CTRL-V) the code into the box while in "HTML" mode (click the () button in the bottom left corner, just above the save button)
• Save the content and you're done!**

5) If you have a lot of CSS that changes, it'll be easier to save it into a file:

• Save the CSS as a file, named with a ".css" ending.
• Upload that file to your GP website (or a free file hosting site like ripway.com) and copy the URL to that file
• Go to the page where you want a different style
• Find or make a new "Free Form Text/HTML" box anywhere on that page and click the edit button (on my test site forums tab, I added this code into my forums icons "key" box)
• Make sure the editor is in "HTML" mode (click the button in the bottom left corner, above the save button).
• Copy the code below (CTRL-C) then paste (CTRL-V) it into the editor, then replace the green text with the URL pointing to your CSS file
  
  <link rel="stylesheet" href="http://www.axiomfiles.com/Files/{your guild #}/home-tab.css" type="text/css" media="screen" />
• Save the content and you're done!**

6) Repeat the steps above for each tab you want to change.

7) To add a script to make these changes for you automatically, check out this post.

** NOTE ** If you go back and edit this box, your style may disappear, so always save a backup copy or what you paste in there

[top]

---

Changing the banner image

• Get your CSS from the section below depending on if you have a free or paid site.
• Find a "Free Form Text/HTML" box on the page where you want a different banner. Click the Edit button.
• Paste (CTRL-V) the code into the box while in "HTML" mode (click the () button in the bottom left corner, just above the save button)
• Click the Save button.

Free site

This works on both free and paid subscription sites, but with the advertisement also being in the banner area of a free site it may not center or align properly. Also, the advertisement will be on top of this image as well as any image you add via the control panel (Control Panel > Custom Images > Banner Image)

.BannerArea { background: url(URL to your image here); top center no-repeat; height:150px; width:1000px; margin:0 auto; }

Paid subscription site - Images Only

If you have a paid subscription site, add the following to your Banner Area (Control Panel > Custom HTML & Script > Banner Area HTML)

<div class="banner" align="center"></div>

Then in your Custom StyleSheet add the CSS below then replace the green text with the URL to your image and the blue text with the image's height and width:

.banner { background: url(URL to your image here) no-repeat; height:150px; width:1000px; }

Paid subscription site - Flash or Images

If you want to use flash files (.swf) along with images in your banner, go to this post here.

Other Banner styles (paid sites only)

These are links to posts on other things you can do with your banner image/area

• Random Banner Image
• Automatically resizing banner image

[top]

---

Other changes with CSS?

Changing the style of one or more content boxes using the Content Box Id

This is covered in much more detail in this post. If you used the custom content box HTML above, there are some differences in the class names that you will need to change. Also, to make this work correctly with all boxes, there is a script that needs to be added to fix the box Id names - it replaces all spaces in the id with an underscore "_"

Changing Odd and Even row background images

The built in style only allows you to change the text and background color (Control Panel > Advanced Style Tools > Content Boxes > Grids)

.NormGridRow { color: #ffffff; background: url(URL to your image here); }
.AltGridRow { color: #ffffff; background: url(URL to your image here); }

Changing the font size or style of your Content Box Title.

• Depending on if you are using custom borders or not, GuildPortal will use "ContentBoxTitle" or "ContentBoxTitleNoBackground" to define the title. A majority of the time you will be using the "ContentBoxTitleNoBackground" except if you followed the steps I outline above with adding custom HTML in your content box. Either way, it might be best to define both of these with the same attributes.
• Using a non-standard font will only show up on your computer and any other user that has the same font installed. Otherwise it will default to a generic font family. For a complete list of other standard font-families: look here
• Information on other font settings that can be used such as font-size, font-weight, font-style, font-variant, etc. can be found here
• Example CSS:

.ContentBoxTitle { color: #ffffff; font-size: 12pt; font-family: comic sans; }
.ContentBoxTitleNoBackground { color: #ffffff; font-size: 12pt; font-family: comic sans; }

List of all CSS styles (June 2008).

You will find this post here

[top]

---

Edit (8/11/08): Added to the custom HTML - added a table of class "ContentBox" around the existing tables to allow use for CSS and custom scripts.
Edit (9/12/08): Added a link to the new post about adding a different style for each content box.
Edit (11/19/08): Added content box ID's to the custom content box HTML and some notes about the code to replace the spaces in the ID.
Edit (12/28/08): Added a link to a new post on adding a script to change the theme (image and page style) for each tab.
Edit (1/3/09): Updated the CSS and HTML to a newer, cleaner method... see the original post on my test-site if you need to refer to it.
Edit (2/27/09): New GP Control panel -> updated Control panel paths.
Edit (9/12/09): Updated instructions because of the new control panel names.
Edit (8/3/10): Added a note about using CSS Additions to Standard now instead of Full Custom CSS.

Hello, my borders are set up like this..

Top Left Corner	Top Left Content Area1	Top Background2	Top Background2	Top Right Corner
Left Side Top3				Right Side Top4
Left Side Background				Right Side Background
Left Side Background				Right Side Background
Bottom Left Corner	Bottom Background5	Bottom Background5	Bottom Background5	Bottom Right Corner

I don't see a place in your code for the Top Left Content Area pic. Is there no way to have this in the css?

When I tried using the code you have, some of my content containers got to small to contain what was in them, and the insides went over the boxes. When I revert to using the normal GP box border image controls it is fine. The only difference is that the GP way I have the Top Left Content Area pic.

Any help?
Link to site in sig.

Rock on Mottie! Got everything working just fine, even though I messed up on my original post. The boxes are actually like this..

Top Left Corner	Top Left Content Area1	Top Background2	Top Right Corner
Left Side Background			Right Side Background
Bottom Left Corner	Bottom Background5		Bottom Right Corner

I'm truly sorry if it caused you more work. Posting while tired is not the best thing.

Hi MethiusSK,

You need to define the height and width of each image in the CSS, this is necessary because the images are in the background and if the table cell contains nothing, the default height and width would be zero.

Another thing about box borders, the side columns don't handle very wide corners unless you set the column width very wide. I don't see a link to your web site so I don't know if you set that up.... Anyway, because of my *cough* OCD, I cropped and adjusted your images to fit. I also made a set of borders that would work well with the side columns. Here is what they look like and the CSS. If you don't use the side boxes I made, just add the class names into one line like you had before.

Center Column

.ctopleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/topleft.png) no-repeat; height:55px; width:141px; }
.ctoptile{ background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/top.png) left top repeat-x; height:47px; }
.ctopright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/topright.png) no-repeat; height:55px; width:56px; }
.clefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/cleft.png) repeat-y; width:50px; }
.crighttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/cright.png) repeat-y; width:45px; }
.cbottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bleft.png) no-repeat; height:181px; width:57px; }
.cbottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bottom.png) left bottom repeat-x; height:100px; }
.cbottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bright.png) no-repeat; height:181px; width:104px; }

Left & Right Columns

.ltopleft, .rtopleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/topleft2.png) no-repeat; height:55px; width:31px; }
.ltoptile, .rtoptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/top.png) left top repeat-x; height:47px; }
.ltopright, .rtopright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/topright2.png) no-repeat; height:55px; width:31px; }
.llefttile, .rlefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/cleft2.png) repeat-y; width:19px; }
.lrighttile, .rrighttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/cright2.png) repeat-y; width:20px; }
.lbottomleft, .rbottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bleft2.png) no-repeat; height:51px; width:26px; }
.lbottomtile, .rbottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bottom2.png) left bottom repeat-x; height:51px; }
.lbottomright, .rbottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bright2.png) no-repeat; height:51px; width:26px; }

You can leave it, I don't plan on deleting anything I have on Photobucket. But if you ever make a change you'll have to host the file yourself 

And you're welcome!