Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Adding a theme using CSS
Mottie (SuperAdmin) 6/10/2008 8:18 PM EST : Adding a theme using CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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

GuildPortal admin site link to the original post

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.

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

Old Method
.ctopleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.ctoptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.ctopright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.clefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.crighttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.cbottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) no-repeat; height:52px; width:37px; }
.cbottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.cbottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }

.ltopleft, .rtopleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.ltoptile, .rtoptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.ltopright, .rtopright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.llefttile, .rlefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.lrighttile, .rrighttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.lbottomleft, .rbottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) top right no-repeat; height:52px; width:37px; }
.lbottomtile, .rbottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.lbottomright, .rbottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }
New Method

.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

Old Method
.ltopleft, .ctopleft, .rtopleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopLeft.gif) no-repeat; height:77px; width:43px; }
.ltoptile, .ctoptile, .rtoptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopTile.gif) repeat-x; height:77px; }
.ltopright, .ctopright, .rtopright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TopRight.gif) no-repeat; height:77px; width:37px; }
.llefttile, .clefttile, .rlefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/LeftTile.gif) repeat-y; width:22px; }
.lrighttile, .crighttile, .rrighttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/RightTile.gif) repeat-y; width:22px; }
.lbottomleft, .cbottomleft, .rbottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomLeft.gif) no-repeat; height:52px; width:37px; }
.lbottomtile, .cbottomtile, .rbottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomTile.gif) repeat-x; height:52px; }
.lbottomright, .cbottomright, .rbottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/BottomRight.gif) no-repeat; height:52px; width:37px; }
New Method

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

Old Method

Left

<div id="box_$block[title]">
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="ltopleft"></td>
  <td class="ltoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="ltopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="llefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="lrighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lbottomleft"></td>
  <td class="lbottomtile">&nbsp;</td>
  <td class="lbottomright"></td>
</tr>
</table>
</td></tr></table>
</div>
<br>

Center

<div id="box_$block[title]">
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="ctopleft"></td>
  <td class="ctoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="ctopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="clefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="crighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="cbottomleft"></td>
  <td class="cbottomtile">&nbsp;</td>
  <td class="cbottomright"></td>
</tr>
</table>
</td></tr></table>
</div>
<br>

Right

<div id="box_$block[title]">
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="rtopleft"></td>
  <td class="rtoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="rtopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="rlefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="rrighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="rbottomleft"></td>
  <td class="rbottomtile">&nbsp;</td>
  <td class="rbottomright"></td>
</tr>
</table>
</td></tr></table>
</div>
<br>
New Method

Left, Center and 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. 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 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 [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. 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 (at the very top)
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): Replaced CSS and Custom Content Box HTML with the newer method.
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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/3/2008 7:03 PM EST : RE: Adding a theme using CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Someone asked how to add more images and gave me the below content box... I've included an example, the CSS and the custom HTML code below:

topLeft
topLeftContent
topBkgd
(repeating)

topRight
leftTop
leftTile
(repeating)
  rightTile
(repeating)

rightBottom
bottomLeftbottomTile
(repeating)
bottomBkgdbottomRight



This is an image of the box border design to fit the style above.



Notes
  • THIS DOESN'T WORK RIGHT ON INTERNET EXPLORER!! Updated to work on IE now.

  • You can switch the repeating background with the image next to it to fit your border design by switching them in the CSS - as long as you change the "no-repeat" and the "repeat-x" or "repeat-y" with the specific height and width for that image.

  • In the CSS below, change the image URL in orange, box colors in blue and the specific image height and width for each image in red.

  • When you switch the images below with your own, make sure the image height is the same for the top & bottom rows. And the image widths are the same for the right and left sides. In the example below you will see the top row is 26 pixels in height, the bottom row is 23 pixels in height. The left sides are all 27 pixels wide and the right is all 26 pixels wide.

Box Border CSS
.ContentBoxTitle { color:#ffffff; text-align:left; margin-bottom:6px; }
.ContentBoxBody { background:#330000; color: #ffffff; margin:3px; vertical-align:top; }

.topLeft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/topLeft-1.png) no-repeat; height:26px; width:27px; }
.topLeftContent { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/topLeftContent.png) no-repeat; height:26px; width:89px;}
.topTile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/topBkgd1.png) repeat-x; height:26px; }
.topRight { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/topRight-1.png) no-repeat; height:26px; width:26px; }

.leftTop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/leftTop.png) no-repeat; width:27px; height:79px; }
.leftSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/leftSide1.png) repeat-y; width:27px;  }

.rightSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightSide1.png) repeat-y; width:26px; }
.rightBottom { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightSide2.png) no-repeat; width:26px; height:77px; }

.bottomLeft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottomLeft-1.png) no-repeat; height:23px; width:20px; }
.bottomTile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottomBkgd2.png) repeat-x; height:23px; }
.bottomBkgd { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottomBkgd3.png) no-repeat; height:23px; width:78px; }
.bottomRight { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottomRight-1.png) no-repeat; height:23px; width:26px; }
Custom HTML Box Border
<div class="ContentBox" id="box_$block[title]">
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
  <td class="topLeft"></td>
  <td class="topTile"><div class="topLeftContent"><div class="ContentBoxTitle">$block[title]&nbsp</div></div></td>
  <td class="topRight"></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
  <td class="leftSide" valign="top"><div class="leftTop"></div></td>
  <td class="ContentBoxBody">$block[content]</td>
  <td class="rightSide" valign="bottom"><div class="rightBottom"></div></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
  <td class="bottomLeft"></td>
  <td class="bottomTile" align="right"><div class="bottomBkgd"></div></td>
  <td class="bottomRight"></td>
</tr></table>
<br>
</div>
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 (2/20/09): Updated the HTML above to work with IE
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/24/2008 6:46 AM EST : RE: Adding a theme using CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Here is the CSS/HTML for making a box border that is very similar to GuildPortal's standard theme. This does work properly with Firefox, IE and Chrome.



Top
Left
Corner
Top Left
Content
Area
Top
Background
Top
Right
Corner
Left
Side
Top

Left
Side
Background
  Right
Side
Top

Right
Side
Background
Bottom
Left
Corner
 Bottom Background
 
Bottom
Right
Corner

Box Border CSS

<style type="text/css">
table { empty-cells: show;}
.ContentBoxTitle { color:#fff; text-align:left; padding: 2px 0px 0px 30px; }
.ContentBoxBody { background:#000000; color: #ffffff; margin:3px; vertical-align:top; }

.topLeft {background: url(http://i487.photobucket.com/albums/rr231/Anemia/top_leftGold.png) no-repeat; height:28px; width:27px; }
.topBackground { background: url(http://i487.photobucket.com/albums/rr231/Anemia/topGold.png) repeat-x; height:28px; }
.topTitleBox { background: url(http://i487.photobucket.com/albums/rr231/Anemia/left_contenttopGold.png) no-repeat; height:28px; width:159px; }
.topRight {background: url(http://i487.photobucket.com/albums/rr231/Anemia/top_rightGold.png) no-repeat; height:28px; width: 27px; }

.leftTop { background: url(http://i487.photobucket.com/albums/rr231/Anemia/top_left_faderGold.png) no-repeat; width:27px; height:56px; }
.leftSide { background: url(http://i487.photobucket.com/albums/rr231/Anemia/leftGold.png) repeat-y; width:27px;  }

.rightTop { background: url(http://i487.photobucket.com/albums/rr231/Anemia/Top_right_faderGold.png) no-repeat; width:28px; height:56px; }
.rightSide { background: url(http://i487.photobucket.com/albums/rr231/Anemia/rightGold.png) repeat-y; width:28px; }

.bottomLeft { background: url(http://i487.photobucket.com/albums/rr231/Anemia/bottom_leftGold.png) no-repeat; height:28px; width:27px; }
.bottomBackground { background: url(http://i487.photobucket.com/albums/rr231/Anemia/bottomGold.png) repeat-x; height:28px; }
.bottomRight { background: url(http://i487.photobucket.com/albums/rr231/Anemia/bottom_rightGold.png) no-repeat; height:28px; width:27px; }
</style>
Custom HTML Box Border
<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
 <tr>
  <td class="topLeft">&nbsp;</td>
  <td class="topBackground">
   <div class="topTitleBox">
    <div class="ContentBoxTitle">$block[title]&nbsp;</div>
   </div>
  </td>
  <td class="topRight">&nbsp;</td>
 </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="leftSide" valign="top"><div class="leftTop"></div></td>
  <td class="ContentBoxBody">$block[content]&nbsp;</td>
  <td class="rightSide" valign="top"><div class="rightTop"></div></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomLeft">&nbsp;</td>
  <td class="bottomBackground">&nbsp;</td>
  <td class="bottomRight">&nbsp;</td>
</tr>
</table>
</div>
<br>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Sourise (Member) 10/31/2009 2:18 PM EST : RE: Adding a theme using CSS

Sourise
Posts: 199

0
Like

0
Dislike

I was playing with the theme selector box.  If I change the theme, does it change for everyone?  Or just for me.  And is the change permanent (i.e. when I come back to the site will the theme be the same)

TopBottom

Mottie (SuperAdmin) 10/31/2009 2:24 PM EST : RE: Adding a theme using CSS
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Sourise said:
I was playing with the theme selector box.  If I change the theme, does it change for everyone?  Or just for me.  And is the change permanent (i.e. when I come back to the site will the theme be the same)


Hi Sourise!

I am assuming you mean this theme selector? If so, it will only change for you. And it will save a cookie to your browser so it remembers the same theme for the next time you visit the page/site. I hope you like it! 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%