---

How to have a different style for each content box

GuildPortal admin site link to the original post

Credits

To start out, I want to give credit to whomever set up the "Old School" web site. They figured this method out first (as far as I can tell) and I'm just passing on what I've learned.

I've also borrowed some box borders from Unberogen's site (I hope they don't mind) to help show a variety of content box styles.

Here is a screen shot of what this post will allow you to do on your web site. To see it full size, go check out test-site 3. Yeah I have (at least) three test-sites now, LOL.

Setting up your site

Unique Content Box Titles

The key to making this work is to make sure every content box on the current tab must have a unique title! A new, unedited site will have two (or three, I don't remember) content boxes on the home page titled "News" - this must be changed if you want them to have different styles. I renamed the boxes on test-site 3 to reflect the news type inside: "News", "Guild News", "GuildPortal News" and "Game News". I added a bit of scripting below that should be added if you have used ANY spaces in the title, it replaces the spaces with an underscore "_" because ID's cannot contain spaces. The CSS uses ID's to change the style of the element. I hope I haven't confused anyone yet.

Edit: I changed this part so you don't have to rename every box title on your site... now you just add the script below.

Fixing the Box Id Names

If you have any spaces in the content box id names, you need to use the script below to replace all spaces with an underscore "_". This is necessary for the CSS to work properly. Add this javascript to the either the banner area, footer area or to a "Free Form Text/HTML" box on every tab that needs the content box id modified.

<script type="text/javascript">
$(function() {
 $(".gpWidget > div[id]").each(function() {
  $(this).attr("id", function(i,d){ return d.replace(/\s/g,"_"); });
 });
});
</script>

Custom Content Box HTML

Each content box will get a unique ID because we're going to add "$block[title]" into the ID. In the HTML below you'll see <div id="box_$block[title]" class="ContentBox">... So you're "Welcome" box will have the ID of "box_Welcome", and your "Guild News" box will be "box_Guild_News". This will be used in the CSS to add the styles. So, lets get to it!

Add the HTML below into all three area of the content box custom HTML.

( Control Panel > Custom Code > Boxes, Left HTML, Boxes, Center HTML and Boxes, Right HTML )

<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" valign="top"><div class="lefttop"></div></td>
  <td class="ContentBoxBody">$block[content]&nbsp;</td>
  <td class="righttile" valign="top"><div class="righttop"></div></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 class="spacer">
</div>

How to use the Custom Content Box HTML

Details about the CSS

This method will require a lot of CSS. If you've never added a Custom StyleSheet, please read this post first.

Normally you would modify a CSS class in the style sheet to change the style for the entire site. Here is the "ContentBoxTitle" as an example:

CSS for a unique content box will require you add the box ID in front (in green). It will then only effect that content box. Here is an example of the Welcome content box title from my test site. You will see I added CSS to adjust the position and size of the title as well.


Change the ID after the number sign (#) to match the specific box. So, lets say I want to change the title style of just my "GuildPortal News" Box. It would look like this:


Don't forget the ID in the CSS cannot have spaces!

One more quick example. The News box in the upper left corner of the test site had a big black box in the middle of it. It's because each news item uses alternating row colors. I wanted to get rid of it and change the link colors... this is what it looks like:


For more CSS examples look at it in the box types below, or check out the HTML source of my test site.

Box Types

This code is very similar to the code previously used in this post.

I am also going to show you that even with nine cells that define the content box, you don't need to use them all. There are three examples below of how to make a box expand to fit it's contents. The text in parenthesis relates to the column on test-site 3 where you will find these examples.

• Standard box (right column) - expands in both height and width to match it's contents
• Vertical box (left column) - This box has a fixed width and will only expand vertically
• Horizontal box (center column, Welcome box) - This box has a fixed height and will only expand horizontally. Because of this, you have limited space to add content.

Standard box (Events box example)

• This content box will expand in both height and width to adjust to it's contents. It uses all nine cells to define the box style.
• In the content box HTML, you'll see a "<div class="spacer"></div>" at the bottom. This will allow you to adjust the spacing between individual boxes or an entire column. The CSS in blue defines the spacing for the entire page, whereas the CSS in dark blue sets the spacing only for the right column (to no spacing). Replace ".RightContentZone" with ".LeftContentZone" or ".CenterContentZone" if you want to change a different column.
• Change the URL in orange to match your image URL and adjust the height and width in red for that image.

.spacer {height:10px;}
.RightContentZone .spacer {height:0px;}

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

Vertical Box (News box example)

• This content box has a fixed width of 200 pixels and will only expand in height to adjust to it's contents.
• This content box only uses three of the nine cells: "toptile", "ContentBoxBody" and "bottomtile".
• The first line clears out the CSS styles of the sides and corners that aren't being used.
• The "ContentBoxTitle" has added positioning to align it inside the header area (in purple).
• Change the URL in orange to match your image URL and adjust the height and width in red for that image.
• The last two lines of the CSS changes row styling and the link colors inside this box. As I describe above in the details about the CSS.

#box_News .topleft, #box_News .topright, #box_News .lefttile, #box_News .righttile, #box_News .bottomleft, #box_News .bottomright { }

#box_News { background: transparent; border:0px; }
#box_News .ContentBoxTitle { background-color: transparent; color: #a52a2a; position: relative; top:10px; left:35px; }
#box_News .toptile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/parchtop.gif) bottom center no-repeat; height: 28px; padding:5px; }
#box_News .ContentBoxBody { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/parchmid.gif) top center repeat-y;  padding: 10px 25px; color: #a52a2a; }
#box_News .bottomtile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/parchbot.gif) center center no-repeat; height: 51px; padding: 0 5px; }

#box_News .NormGridRow { background: transparent; color: #000000; }
#box_News .ContentBoxBody a, #box_News .MoGridRow a { color: #333333; }

Horizontal Box (Welcomes box example)

• This content box has a fixed height and will only expand in width to adjust to it's contents.
• This content box only uses three of the nine cells: "lefttile", "ContentBoxBody" and "righttile".
• The first line clears out the CSS styles of the sides and corners that aren't being used.
• The "ContentBoxTitle" has added positioning to align it inside the header area (in purple).
• Change the URL in orange to match your image URL and adjust the height and width in red for that image.

#box_Welcome .topleft, #box_Welcome .toptile, #box_Welcome .topright, #box_Welcome .bottomleft, #box_Welcome .bottomtile, #box_Welcome .bottomright { }

#box_Welcome { background: transparent; border: 0; }
#box_Welcome .ContentBoxTitle { background: transparent; color: #ffffff; position: relative; top:40px; left:135px; font-size: 18pt; }
#box_Welcome .lefttile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollleft2.png) right top no-repeat; height: 567px; width:100px; padding:5px; }
#box_Welcome .ContentBoxBody { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollcenter2.png) left top repeat-x; height: 567px; padding: 10px 25px; color: #5a4129; }
#box_Welcome .righttile { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollright2.png) left top no-repeat; height: 567px; width: 206px; padding: 0 5px; }

Changing an entire column

To modify the box borders of an entire column (making them all the same). Just add the column zone (".LeftContentZone", ".CenterContentZone" or ".RightContentZone") to the front of the box border CSS. The example below is from the Home page of my test-site. The top portion defines the "base" style and the bottom portion over-rides the base style for the center content zone.

Also note that CSS is read from the top down. If the ".CenterContentZone" section was defined first, then the base CSS, it would have over-ridden it.

.topleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px top no-repeat; height: 55px; width: 16px; }
.toptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -68px repeat-x; height: 55px; }
.topright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px top no-repeat; height: 55px; width: 16px; }
.lefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) left top repeat-y; width: 2px; }
.righttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) right top repeat-y; width: 2px; }
.bottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px -55px no-repeat; height: 21px; width: 16px; }
.bottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -123px repeat-x; height: 21px; }
.bottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px -55px no-repeat; height: 21px; width: 16px; }

.CenterContentZone .topleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px top no-repeat; height: 53px; width: 47px; }
.CenterContentZone .toptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left top repeat-x; height: 53px; }
.CenterContentZone .topright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -52px top no-repeat; height: 53px; width: 47px; }
.CenterContentZone .lefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) left top repeat-y; width: 5px; }
.CenterContentZone .righttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) right top repeat-y; width: 5px; }
.CenterContentZone .bottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px -53px no-repeat; height: 15px; width: 15px; }
.CenterContentZone .bottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -53px repeat-x; height: 15px; }
.CenterContentZone .bottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -20px -53px no-repeat; height: 15px; width: 15px; }

Changing just the corner image

If you only want to change the corner image for each box (as requested by Blackskull Clan Denboss in this post). Then set up your content box CSS like normal:

.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; }

The ".topleft" is left in the CSS above as a "default" image.

For specific content boxes, just add the box ID in front and change the URL of the image, as below. The replacement images should all be the same size.

#box_Welcome .topleft { background: url(IMAGE 1) no-repeat; height: 77px; width: 43px; }
#box_News .topleft { background: url(IMAGE 2) no-repeat; height: 77px; width: 43px; }
#box_Events .topleft { background: url(IMAGE 3) no-repeat; height: 77px; width: 43px; }
#box_Guild_Info .topleft { background: url(IMAGE 4) no-repeat; height: 77px; width: 43px; }

Hiding the entire Content Box or just it's Borders

In the examples below, replace the box ID in green with the ID of the content box you wish to modify.

To hide an entire Content Box (this was done to hide the CSS Boxes on my test-site, just add this CSS.

#box_CSS_Box .ContentBox { display: none; }

To hide just the borders of a Content Box and make the background transparent, add this CSS:

#box_Welcome .topleft, #box_Welcome .toptile, #box_Welcome .topright, #box_Welcome .lefttile, #box_Welcome .righttile, #box_Welcome .bottomleft, #box_Welcome .bottomtile, #box_Welcomes .bottomright { }

#box_Welcome .ContentBoxBody { background: transparent; border: 0; }

Edit (9/28/2008): Changed the script so you don't need to rename every content box title. I also added two sections - Changing an entire column & Hiding the entire Content Box or just it's borders.
Edit (11/8/2008): Changed the script that fixes the box title names. Replaced the space " " with a "\s" in the replace regular expression.
Edit (9/12/2009): Updated instructions due to new control panel.
Edit (3/28/2010): Updated the script that replaces the space in the id to make it more efficient.
Edit (6/6/2011): Updated "Fixing the Box Id Names" code because it broke recently

Alright, i need more details on how to get the verticle box to work. I have all the CSS and images but it isnt pulling the box titles right. Whenever i post the code i simply get text with no background or art at all. Here is my code.

/*Left Content Boxes*/
.LeftContentZone .spacer {height:0px;}
.LeftContentZone .ContentBoxBody {background-color: transparent;color: #daca92;padding: 5px; max-width: 225px; }
.LeftContentZone .ContentBoxTitle { background-color: transparent; color: #c39015; font-weight: bold;text-size: 16pt;text-align:left; position: relative; top:0px; left:0px;white-space: nowrap;max-width:225px; }

#box_Site_Pages .topleft, #box_Site_Pages .topright, #box_Site_Pages .lefttile, #box_Site_Pages .righttile, #box_Site_Pages .bottomleft, #box_Site_Pages .bottomright { }
#box_Site_Pages .toptile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Top.gif) no-repeat; height:21px;; width:225px;}
#box_Site_Pages .ContentBoxBody { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Middle.jpg) repeat-y; width:225px; }
#box_Site_Pages .bottomtile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Bottom.gif) no-repeat; height:21px; width:225px;}

#box_Polls .topleft, #box_Polls .topright, #box_Polls .lefttile, #box_Polls .righttile, #box_Polls .bottomleft, #box_Polls .bottomright { }
#box_Polls .toptile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Top.gif) no-repeat; height:21px;; width:225px;}
#box_Polls .ContentBoxBody { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Middle.jpg) repeat-y; width:225px; }
#box_Polls .bottomtile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Bottom.gif) no-repeat; height:21px; width:225px;}

#box_Useful_Links .topleft, #box_Useful_Links .topright, #box_Useful_Links .lefttile, #box_Useful_Links .righttile, #box_Useful_Links .bottomleft, #box_Useful_Links .bottomright { }
#box_Useful_Links .toptile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Top.gif) no-repeat; height:21px;; width:225px;}
#box_Useful_Links .ContentBoxBody { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Middle.jpg) repeat-y; width:225px; }
#box_Useful_Links .bottomtile { background: transparent url(http://i194.photobucket.com/albums/z13/gythawen/Testament/CB_Solid_Bottom.gif) no-repeat; height:21px; width:225px;}

#box_Useful_Links .NormGridRow { background: transparent; color: #141414; }
#box_Useful_Links .ContentBoxBody a, #box_Useful_Links .MoGridRow a { color: #333333; }

Hi Annikka!

Actually, Aaron  was kind enough to add one of my feature requests and add specific names to each widget. So instead of targeting "#box_Shout!", which wouldn't work, you can target ".gpWidget-shout".

.gpWidget-shout .ContentBox { background: url(my-background-image.jpg) }

and I took a quick peek at your site... you actually named the shout box with just "Shout", so you could also use this:

#box_Shout .ContentBox { background: url(my-background-image.jpg) }

that's a nice looking site too! 

Updated the "Fixing the Box Id Names" code because it broke recently