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
solonolreksilverwolf (New Admin) 11/11/2008 7:46 PM EST : RE: How to add a theme to your GuildPortal site using...
solonolreksilverwolf
Posts: 136
Posts With Wolves

ok, I have the content boxes about how I want them, but it screws up the rest of my site. How do I put a background color and the like in?
This is what I have as of right now.

This is in my custom stylesheet:
.ctopleft { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left top repeat-x; height:53px; }
.ctopright { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) left top repeat-y; width:5px; }
.crighttile { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) right top repeat-y; width:5px; }
.cbottomleft { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -53px repeat-x; height:15px; }
.cbottomright { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -20px -53px no-repeat; height:15px; width:15px; }
.ltopleft, .rtopleft { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -2px top no-repeat; height:55px; width:16px; }
.ltoptile, .rtoptile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -68px repeat-x; height:55px; }
.ltopright, .rtopright { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -18px top no-repeat; height:55px; width:16px; }
.llefttile, .rlefttile { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) left top repeat-y; width:2px; }
.lrighttile, .rrighttile { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) right top repeat-y; width:2px; }
.lbottomleft, .rbottomleft { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -2px -55px no-repeat; height:21px; width:16px; }
.lbottomtile, .rbottomtile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -123px repeat-x; height:21px; }
.lbottomright, .rbottomright { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -18px -55px no-repeat; height:21px; width:16px; }
table.TabBar {
 background: #000000;
 border: 0px;
 margin: 0px;
 padding: 0px;
 width:100px;
 margin-left:auto;
 margin-right:auto;
}

.SelectedTab a {
 color: #ffffff !important;
}

.UnSelectedTabMo a {
 color: #ffcc00 !important;
}

.SelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left top no-repeat;
 font-weight: bold;
 text-align: center;
 height: 42px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

.UnSelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left -42px no-repeat;
 font-weight: bold;
 text-align: center;
 width: 125px;
 height: 42px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

.UnSelectedTabMo {
 color: #eeeeee;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left bottom no-repeat;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 width: 125px;
 height: 42px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

/* html>body added for non-IE styling */

html>body .SelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left top no-repeat;
 font-weight: bold;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

html>body .UnSelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left -42px no-repeat;
 font-weight: bold;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

html>body .UnSelectedTabMo {
 color: #eeeeee;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left bottom no-repeat;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}





And this is what is in all of my content boxes:

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





I know I am missing the code for page background and content box background. How do I insert that into what I already have?
TopBottom

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

Read this post please
TopBottom

Ayiana (New Admin) 11/18/2008 2:52 AM EST : RE: How to add a theme to your GuildPortal site using...
Ayiana
Posts: 1498
Zomgawsh Poster

Mottie, oh guru.  First, thank you so much for all the work you've put into this community.  I've been searching for all of a couple days through these forums in an attempt to re-vamp our site.  This information has been a godsend.

Now, though, I have a question.

When it comes to creativity with computer graphics, my well is about as barren as a desert with no oasis.  That being the case, I shamelessly am stealing some of your borders while I am fiddling on my test site.  (Eventually I hope to make my own for our true site, but bébé steps.

I have finally gotten the CSS portion right (from copying your source), but my table, I believe, is where I am off.  Although it seems so simple, perhaps it really is the CSS.

First, on Manifest Ascension's test site you've managed to move the title box down a level and keep it to the left.  Mine is still to the right of the topleft border piece.

Also, my repeating seems to not be working.

My test site (actually our unused horde sister guild's) is here.  I am only fiddling with the left column for now.

The table code is:
<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="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="lefttop"></td>
  <td rowspan=2 class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="righttop"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"></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>
</td></tr></table>
<br>

I know you can view source, but here is the ContextBox Code portion of the CSS:

/*ContentBox Code*/
.ContentBox {background-color: #330000;border: solid 1px #330000;}
.ContentBoxTitle {padding: 0px;background-color: #330000;color: #ffff66;}
.ContentBoxBody {background-color: #330000;color: #CCCCCC;padding: 0px;}
.ContentTable { background-color: #330000;color: #CCCCCC;font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 10pt;} table { color: #CCCCCC;font-family: Verdana, Tahoma,Segoe,sans-serif;font-size: 10pt; }
.StateBar {background-color: #330000;color: #CCCCCC;text-align: center;padding: 0px;}
.topleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopLeft.png) no-repeat; height:23px; width:125px; }
.toptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopTile.png) repeat-x; height:23px; }
.topright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopRight.png) no-repeat; height:23px; width:19px; }
.lefttop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTop.png) no-repeat; width:13px; height:58px; }
.lefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTile.png) repeat-y; width:13px; }
.leftbot { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTile.png) repeat-y; width:13px; height:58px; }
.righttop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; height:58px; }
.righttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; }
.rightbot { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; height:58px; }
.bottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomLeft.png) no-repeat; height:50px; width:13px; }
.bottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomTile.png) repeat-x; height:50px; }
.bottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomRight.png) no-repeat; height:50px; width:125px; }

TopBottom

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

Hi Ayiana!

Here is the custom content box HTML I used
<div id="box_$block[title]">
<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="topleft">&nbsp;</td>
  <td class="toptile">&nbsp;</td>
  <td class="topright">&nbsp;</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"><div class="lefttop"></div></td>
  <td rowspan=3 class="ContentBoxBody2"><div class="ContentBoxTitle">$block[title]</div>$block[content]&nbsp</td>
  <td class="righttop">&nbsp;</td>
</tr>
<tr>
  <td class="lefttile">&nbsp;</td>
  <td class="righttile">&nbsp;</td>
</tr>
<tr>
  <td class="leftbot">&nbsp;</td>
  <td class="rightbot">&nbsp;</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomleft">&nbsp;</td>
  <td class="bottomtile">&nbsp;</td>
  <td class="bottomright">&nbsp;</td>
</tr>
</table>
</div>
<br>
And here is the CSS that's different
.ContentBoxTitle {background-color: transparent; color: #ffffff; font-size:14pt; }
.ContentBoxBody {background: url();}
.ContentBoxBody2 {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BoxBkgd.png); color: #daca92; padding:3px; vertical-align:top; }
Also if you plan on using the Content Box ID's in your CSS, please read this post on how to fix the IDs - read the "Fixing the Box Id Names" section under "Setting up your site"
TopBottom

Ayiana (New Admin) 11/18/2008 8:15 AM EST : RE: How to add a theme to your GuildPortal site using...
Ayiana
Posts: 1498
Zomgawsh Poster

Mottie, you are wonderful.

I am sad to say that I didn't understand a couple of the CSS lines.  I kept right on fiddling after I made my post and got the title down on the next line (yeah, it was obvious once I actually studied the table) and managed to make a few other things cleaner, but still didn't get it "just so".

Your edits, of course, fixed everything.

If I plan on using Content Box IDs?  I'm so sorry to ask this, but under what circumstances would I want to do this?  If I want different styles of content boxes within the same site or theme?

While it isn't on my immediate agenda, that is something I've thought about as an eventuality.  (I'm currently working on the pre-reqs for implementing your theme selector.)  Thank you so much for thinking ahead and suggesting that.

EDIT:  Taking more time to thoroughly read the linked page, I figured it out.  Thanks again for all your help, Mottie!

~Ayiana
TopBottom

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

There are several reasons to use Content Box ID in the CSS:
  • Hiding a content box - hiding the extra boxes where you put code or CSS.
  • Hiding the content box borders - hiding the navigation bar borders or whatever
  • Changing the style or color of the content box
I'm going to update the code in the top post to add box ID's... it shouldn't effect how anything works, but it will allow for greater flexibility with the styling.
TopBottom

Ayiana (New Admin) 11/20/2008 9:19 AM EST : RE: How to add a theme to your GuildPortal site using...
Ayiana
Posts: 1498
Zomgawsh Poster

There is one issue I am having with the provided code.  And it actually affects both the left top and right bottom.  When the box scales along the vertical access, the image in those two areas loses contact with its partner image in the topleft and bottom right respectively.

How can I tell the left top image to stay flush against the top of the box and the right bottom to align itself against the bottom edge?

Thanks!
~Ayiana
TopBottom

Mottie (MVP) 1/13/2009 2:16 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I posted this on my test-site forums, but couldn't find the link to where I posted it here, so I thought this thread would be the best place to add it.

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

CSS

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

.TopLeft {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/top_leftGold.png) no-repeat; height:28px; width:27px; }
.TopBackground { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/topGold.png) repeat-x; height:28px; }
.TopTitleBox { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/left_contenttopGold.png) no-repeat; height:28px; width:159px; }
.TopRight {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/top_rightGold.png) no-repeat; height:28px; width:27px; }

.LeftTop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/top_left_faderGold.png) no-repeat; width:27px; height:56px; }
.LeftSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/leftGold.png) repeat-y; width:27px;  }

.RightTop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/Top_right_faderGold.png) no-repeat; width:28px; height:56px; }
.RightSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/rightGold.png) repeat-y; width:28px; }

.BottomLeft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottom_leftGold.png) no-repeat; height:28px; width:27px; }
.BottomBackground { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottomGold.png) repeat-x; height:28px; }
.BottomRight { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bottom_rightGold.png) no-repeat; height:28px; width:27px; }
</style>
Content Box Custom HTML
<div class="ContentBox" id="box_$block[title]">
<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>
TopBottom

Jourdo (New Admin) 2/12/2009 3:37 PM EST : RE: How to add a theme to your GuildPortal site using...

Jourdo
Posts: 14
Becoming Adept!

Hi Mottie,

Im ineterested in using custom CSS however when I follow your instructions here to enable it......

"1. View Source of your page.
2. Copy everything between <style type="text/css"> and </style> thats within the top 10 lines of the source.
3. Paste this into your Custom CSS, then add your new CSS at the end.
4. Enable the Custom CSS."

I get this error message...... 

"The provided custom CSS contained invalid characters, such as HTML mark-up, that are not valid for a Cascading Style Sheet.  Please modify your code, removing any mark-up, before submitting. "

What do I need to do to make this work?

Thanks
TopBottom

Eph (MVP) 2/13/2009 12:57 AM EST : RE: How to add a theme to your GuildPortal site using...
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Jourdo said:
Hi Mottie,

Im ineterested in using custom CSS however when I follow your instructions here to enable it......

"1. View Source of your page.
2. Copy everything between <style type="text/css"> and </style> thats within the top 10 lines of the source.
3. Paste this into your Custom CSS, then add your new CSS at the end.
4. Enable the Custom CSS."

I get this error message...... 

"The provided custom CSS contained invalid characters, such as HTML mark-up, that are not valid for a Cascading Style Sheet.  Please modify your code, removing any mark-up, before submitting. "

What do I need to do to make this work?

Thanks


I followed those instructions, copied the css from your source, replaced  my test sites css with it, and it worked just fine.

did you remove <style type="text/css"> and </style> before you saved?


TopBottom

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