Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How to add a theme to your GuildPortal site using CSS
Mottie (MVP) 6/22/2008 6:56 AM EST : How to add a theme to your GuildPortal site using CSS
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Everdark (MVP) 6/22/2008 8:08 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Everdark
Posts: 3949
Zomgawsh Poster

Holy ..... WOW!!! Nice job, Mottie!


Somewhere at a convention hall:
    Mottie: ..... and then, ladies and gentleman, once you connect the bubble gum wrapper to the coil, your home made Nuclear Fusion device is complete! Any questions?

    Guy in front row: Yeah, are you a Nuclear Engineer?

    Mottie: No..... but I did stay at a Holiday Inn last night!

"The person who says it cannot be done should not interrupt the person doing it." 

 
Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)
TopBottom

Eph (MVP) 8/3/2008 11:21 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Hello, my borders are set up like this..
Top Left CornerTop Left Content Area1Top Background2Top Background2Top Right Corner
Left Side Top3 Right Side Top4
Left Side Background Right Side Background
Left Side Background Right Side Background
Bottom Left CornerBottom Background5Bottom Background5Bottom Background5Bottom 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.
TopBottom

Mottie (MVP) 8/3/2008 6:53 PM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Eph,

I don't know why you'd need the extra borders in your design. I'd combine the two "Top Background2", the two "Left Side Background" and the two "Right Side Background". But since you were so specific, here is how I'd change the custom HTML to fit your design: This has been updated to work with Internet Explorer. I've included a basic layout, the custom HTML and the CSS 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.

  • Youcan switch the repeating background with the image next to it to fityour border design by switching them in the CSS - as long as you changethe "no-repeat" and the "repeat-x" or "repeat-y" with the specificheight 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.

  • Whenyou switch the images below with your own, make sure the image heightis the same for the top & bottom rows. And the image widths are thesame for the right and left sides. In the example below you will seethe top row is 26 pixels in height, the bottom row is 23 pixels inheight. The left sides are all 27 pixels wide and the right is all 26pixels 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"><divclass="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
TopBottom

Eph (MVP) 8/4/2008 2:10 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

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 CornerTop Left Content Area1Top Background2Top Right Corner
Left Side Background Right Side Background
Bottom Left CornerBottom Background5

Bottom Right Corner

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

MethiusSK (New Admin) 9/13/2008 8:53 PM EST : RE: How to add a theme to your GuildPortal site using...

MethiusSK
Posts: 185
Posts With Wolves

.ltopleft, .ctopleft, .rtopleft { background: url(http://i365.photobucket.com/albums/oo98/methiussk/topleft.png) no-repeat; height:77px; width:43px; }
.ltoptile, .ctoptile, .rtoptile { background: url(http://i365.photobucket.com/albums/oo98/methiussk/top.png) repeat-x; height:77px; }
.ltopright, .ctopright, .rtopright { background: url(http://i365.photobucket.com/albums/oo98/methiussk/topright.png) no-repeat; height:77px; width:37px; }
.llefttile, .clefttile, .rlefttile { background: url(http://i365.photobucket.com/albums/oo98/methiussk/cleft.png) repeat-y; width:22px; }
.lrighttile, .crighttile, .rrighttile { background: url(http://i365.photobucket.com/albums/oo98/methiussk/cright.png) repeat-y; width:22px; }
.lbottomleft, .cbottomleft, .rbottomleft { background: url(http://i365.photobucket.com/albums/oo98/methiussk/bleft.png) no-repeat; height:52px; width:37px; }
.lbottomtile, .cbottomtile, .rbottomtile { background: url(http://i365.photobucket.com/albums/oo98/methiussk/bottom.png) repeat-x; height:52px; }
.lbottomright, .cbottomright, .rbottomright { background: url(http://i365.photobucket.com/albums/oo98/methiussk/bright.png) no-repeat; height:52px; width:37px; }



I created one but its not working could you tell me what i need to correct?
Thank you very much.
TopBottom

Mottie (MVP) 9/14/2008 5:24 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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


BOX TITLE


BOX CONTENT

 

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


BOX TITLE


BOX CONTENT

 
TopBottom

MethiusSK (New Admin) 9/14/2008 7:04 AM EST : RE: How to add a theme to your GuildPortal site using...

MethiusSK
Posts: 185
Posts With Wolves

Awesome thank you very much, once i transfer that code to my site ill link my site to you thank you very much. You are a artist when it comes to all of this. I have learned so much from you.

http://diehards.guildportal.com

BTW do i need to upload the images to photobucket or can i keep it like this?
You are so awesome i love the way it looks now, just need to change the tabs at the top but ive done that before you are the best!!!!
TopBottom

Mottie (MVP) 9/14/2008 11:07 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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! 
TopBottom

Mayii (Guild Admin) 10/29/2008 10:07 AM EST : RE: How to add a theme to your GuildPortal site using...

Mayii
Posts: 712
Zomgawsh Poster

mottie

hi thank you soo much for all this, i think im doing good so far just that everytime i try something i go into panic mode cause i keep thinking ill screw up...

okay nvm i got it trial and error
but thank you soo much.. when im all done hopefully i can get an opinion on the website





TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%