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! > css headache
539954900_Inactive (New Admin) 9/18/2008 4:26 PM EST : css headache
539954900_Inactive
Posts: 15
Becoming Adept!

Sorry to have to ask this, I know there are numerous guides among these pages telling how to do various things with content boxes, but to be honest that's half the problem, the more I read the more cofused I got & I just had to bite the bullet & ask, so here goes...

Here is my site, it's the first time I've tried anything like this & I've been at it for three solid days now, thanks to Mottie I have managed to sort a couple of free form text boxes out on my home page but the issue I'm having is with the box borders & titles, I'm fairly satisfied with most of the page, I have hidden the box borders for now by simply making them, the content body & background all the same color.

What I want is to have all the boxes in the left column borderless, with the titles centered & bold, In the middle column I want to put sides on the boxes & have the top & bottom open, remove the title from the welcome box &center the others, & the right column is to be the same as the left apart from the guild rank box which I want to remove the title from as well.

I did find a post on removing the borders & successfully managed to do it on a test free form box, but from the post I read it sound like I need to edit the css in style & colors>content boxes: left/center/right, however these already contain the code

<table class="ContentBox" width="100%" ID="Table1" cellpadding="0" cellspacing="0"><tr><td>
<tr><td class="ContentBoxTitle">$block[title]</td></tr>
<tr><td class="ContentBoxBody">$block[content]</td></tr>
</td></tr></table><br>

Do I have to edit this, replace it or add to it? and which guide do I need to follow to reach the desired outcome?

thanks in advance

Oh, and one more little thing, I have a server status box someone directed me to a few days ago, but I noticed this site has a slightly funkier one... anyone know where it comes from?
TopBottom

Mottie (MVP) 9/18/2008 7:48 PM EST : RE: css headache
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I haven't had a chance to really test this out but try this:
  • Keep the custom HTML that you have above in the left and right content boxes as you have it now.
  • Change the center content box custom HTML to this:

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

  • If you've never added any CSS to your Custom StyleSheet, then make sure you read this post first.

  • Add this to your Custom StyleSheet:

    #box_Welcome .ContentBoxTitle { display:none; }
    .ContentBoxTitle { padding: 5px;background-color: #000000;color: #daca92; text-align: center; font-weight: bold; }
    .lefttile { background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_22.gif) repeat-y; width:21px; }
    .righttile { background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_24.gif) repeat-y; width:21px; }

  • Change the URL (in orange) above to your side borders. I temporarily added purple box borders as a place holder

  • Change the image width (in red) to the width of your side box border
I'll apologize in advance if this doesn't work just right. But I'm going out of town starting tomorrow and I may not be able to check to see if it worked for you until I get back on Sunday night.

And as for the server status you saw on that site, they are using something that they  have set up themselves (I think)... It would probably be kind of rude to use their site to display the status on your page without getting permission first. But if you know anyone that knows how to program PhP, have them look at this site. I have tried to do follow these directions and set up a site, but I haven't been successful at making it work, so I just use the other sites LOL.
TopBottom

539954900_Inactive (New Admin) 9/19/2008 7:09 PM EST : RE: css headache
539954900_Inactive
Posts: 15
Becoming Adept!

thanx mate, that does work, I had to change it though because I didn't realise the image repeats the way it does & the edges I designed fade out at the top & bottom, I discovered I still had to use the code you gave in another post for a full border because when I chopped my edges up & just added the corners the left side lined up fine but the top & bottom corner for the right ended up in the center of the screen, I also had to add the title back to the welcome box to make the top right corner line up, here's the code I used in the end...

#box_Welcome .ContentBoxTitle { color: #000000; }
#box_Forums .ContentBoxTitle { color: #000000; }
.ContentBoxTitle { padding: 5px;background-color: #000000; color: #daca92; text-align: center; font-weight: bold; }
.topleft { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-2.jpg) no-repeat; height:60px; width:25px; }
.toptile { background-color: #000000; repeat-x; height:1px; }
.topright { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-2-1.jpg) no-repeat; height:60px; width:25px; }
.lefttile { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-1.jpg) repeat-y; width:25px; }
.righttile { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-1-1.jpg) repeat-y; width:25px; }
.bottomleft { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-3.jpg) no-repeat; height:60px; width:25px; }
.bottomtile { background-color: #000000; repeat-x; height:1px; }
.bottomright { background: url(http://i72.photobucket.com/albums/i179/smithers79/Forum%20Images/newline-3-1.jpg) no-repeat; height:60px; width:25px; }

I have highlighted in yellow the bits I changed to make it appear as if there is no top or bottom to the boxes, I guess you could put transparent in place of the color code if you don't use a black background like I do

I wouldn't have figured this out without your help though Mottie so thankyou a thousand times, I will sacrifice 100 bulls in your honor

Now I have another challenge if you're up for it  I need a line to separate posts in the forum page, with everything being black it's hard to tell where one post ends & the next begins

TopBottom

539954900_Inactive (New Admin) 9/20/2008 12:07 AM EST : RE: css headache
539954900_Inactive
Posts: 15
Becoming Adept!

Tuwie said:


Now I have another challenge if you're up for it  I need a line to separate posts in the forum page, with everything being black it's hard to tell where one post ends & the next begins



Scratch that...after a bit more topic surfing I found that you already covered that in one of your guides, I added
.MessageAuthorLinkCell1 { background: url('http://www.axiomfiles.com/Images/Dynamic/999999_000000_v_hi25.jpg') repeat-x; height:25px; }
.MessageSubjectCell1 { background: url('http://www.axiomfiles.com/Images/Dynamic/999999_000000_v_hi25.jpg') repeat-x; height:25px; }

Problem solved
TopBottom

Mottie (MVP) 9/21/2008 5:51 PM EST : RE: css headache
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I'm glad I could help... so you're all set now?

TopBottom

539954900_Inactive (New Admin) 9/22/2008 7:51 AM EST : RE: css headache
539954900_Inactive
Posts: 15
Becoming Adept!

I think so, I have achieved what I wanted to do, the trouble is now that the more I look at it the more I think it's a bit too bland, but now I'm starting to understand the css part I might delete it all & start from scratch, I'm thinking maybe a static background & a sort of black glass effect for the content boxes

TopBottom

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