HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Broken content boxes
1 2 3Next
Miles Clennell (Guild Admin) 10/18/2008 6:04 AM EST : Broken content boxes link
Miles Clennell
Posts: 3134
Zomgawsh Poster
I have recently added a WoWJutsu realm rank badge to the front page of our site.

For some reason it has 'stretched' the content box and caused the background to break

Any idea how I could fix this?

Benevolence website


Thanks

Anemia Sig 1
Top • Bottom

Mottie (MVP) 10/18/2008 9:01 AM EST : RE: Broken content boxes link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
The default script for those borders isn't designed to go wider than 170 pixels, so it isn't your "Wowjitsu" box that's causing the problems, it's the "Images" box.

Your best bet would be to replace the custom HTML... and I just happen to have it handy 

Go to: Control Panel > Style & Colors > Content Boxes > Custom Html

Then, replace the "Left Side" and "Right Side" code with the code below. Copy (Ctrl-C) then paste (Ctrl-V) the code into the box, then make sure the "Enable?" box is checked before you click the "Save Changes" button.
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr style="height:44px;">
  <td style="width:23px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_14.gif"></td>
  <td style="background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_15.gif); height:44px;">
   <div class="ContentBoxTitle">$block[title]&nbsp</div>
  </td>
  <td style="width:25px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_16.gif"></td>
</tr>
<tr style="height:22px;">
  <td style="width:23px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_25.gif"></td>
  <td style="background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_29.gif)" align="center">
  <img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_26.gif" width="140" height="22">
  </td>
  <td style="width:23px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_27.gif"></td>
</tr>
<tr>
  <td style="background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_28.gif);width:23px;"></td>
  <td class="ContentBoxBody" style="background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_29.gif);" valign="top">
  $block[content]
  </td>
  <td style="background: url(http://www.guildportal.com//CExplorer/Themes/EQ2/realmtheme_30.gif);width:25px;"></td>
</tr>
<tr style="height:19px;">
  <td style="width:23px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_44.gif"></td>
  <td style="background: url(http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_45.gif);"></td>
  <td style="width:25px;"><img src="http://www.guildportal.com/CExplorer/Themes/EQ2/realmtheme_46.gif"></td>
</tr>
</table>
<br>

>>help-site<<
Top • Bottom

chefricochet (Guild Admin) 10/18/2008 11:17 AM EST : RE: Broken content boxes link
chefricochet
Posts: 208
Fingers of Fury!
 Mottie, I read the posts for this break in the content boxes. I have noticed the same thing in mine. BUT... I don't think the fix you posted will work on mine. Can you take a looksie, and let me know?

Laggin
If you love something, set it free! If it doesn't come back; hunt it down, and kill it!
Top • Bottom

Miles Clennell (Guild Admin) 10/18/2008 3:31 PM EST : RE: Broken content boxes link
Miles Clennell
Posts: 3134
Zomgawsh Poster
Thank you Mottie for your super fast reply

I believe I have done what you have said but the problem has just changed as opposed to being corrected.

I only applied the code you posted to the containers on the right hand side.

Now the WoWJutsu logo is not centered but the container is still broken

I would just like to add that as I'm going to do a complete makeover on the site in a month or so but I'm still a HTML/CSS newcomer but I'm always willing to learn!

I came to this forum for advice and inspiration and you have provided it

I am massively impressed by the help you have provided for many people.

I've book marked so many of your posts I had to make a new folder

Anemia Sig 1
Top • Bottom

Mottie (MVP) 10/18/2008 5:03 PM EST : RE: Broken content boxes link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Chefricochet,

I have no idea where you are seeing the broken content boxes... they still look the same as they always have to me. Can you be more specific?

Miles,

Yeah, sorry I have no idea why it's still broken with your image gallery. But the problem with your wowjitsu box is *cough* spelling.... center, not centre 

Thank you for the compliments, I appreciate it! And I look forward to seeing how your site turns out 

And I don't know if you've been to my test site (link in my sig) but I've tried to organize almost everything I've posted there for easier searching.
>>help-site<<
Top • Bottom

Miles Clennell (Guild Admin) 10/20/2008 3:32 PM EST : RE: Broken content boxes link
Miles Clennell
Posts: 3134
Zomgawsh Poster
Thanks Mottie for sorting the center spelling mistake

 I have started building the new site on a test page here and so far have copied the CSS from the old site and added some stuff as per your tutorials on your test site(s)

I have a couple of questions though if you would be so kind

 I need to add an extra element to both the vertical and horizontal bars around the content boxes (Left right and center).

You have examples of one or three and being a first timer at this was trying to figure out how to do two. I need to add a non repeating image on the top bar of all boxes followed by the repeating one that is already there. The same on the left and right of all boxes followed by the current repeating element. But just a single repeating image on the bottom (As they are now).

Also is there a simple way to limit the width of boxes or increase them? I'd like to make the left and Right boxes a little wider and the middle box a little narrower.
I'm thinking the left and right maybe wider by a fixed amount ant the center a percentage of sreen width? No idea iff that's possible. It seems to scale to fit at the moment, I would just like a little space a the sides of the screen.

Cheers

Anemia Sig 1
Top • Bottom

Mottie (MVP) 10/20/2008 6:18 PM EST : RE: Broken content boxes link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hey Miles!

So from what you're describing, I'm guessing you want something like this?


  • Two part top bar
  • Two part left and right sides
  • Single image bottom (I reused the top image, since you didn't give me a bottom one to work with)
If it is, here is the CSS and the custom HTML to add:
<style type="text/css">
.ContentBoxTitle { color:#fff; text-align:left; padding: 2px 0px 0px 30px; }
.ContentBoxBody { background:#000000; color: #ffffff; margin:3px; vertical-align:top; }

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

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

.bottomBackground { background: url(http://i487.photobucket.com/albums/rr231/Anemia/topGold.png) repeat-x; height:28px; }
</style>

<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
 <tr>
  <td class="topBackground">
   <div class="topTitleBox">
    <div class="ContentBoxTitle">$block[title]&nbsp;</div>
   </div>
  </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="bottomBackground">&nbsp;</td>
</tr>
</table>
<div>
<br>
  • To add more space on the sides of your page...

    • Control Panel > Style & Colors > Page Styles > "Page Body" tab
    • Content Area Width: 90%
    • Save Changes

    If you have a background that has side borders, you can add an exact pixel size in the Content Area Width to fit.

  • As for changing the size of the content box, that is done through the control panel for each page.

    • Control Panel > Site Pages > Home (or whatever tab) - Display Options
    • Left Pane Width: 200px
    • Center Pane Width: {leave blank}
    • Right Pane Width: 200px
    • Save

    Leaving the Center Pane Width Blank will allow the center column to expand and contract to fit the browser window
Edit (10/24/2008): Fixed the HTML to work with IE.
>>help-site<<
Top • Bottom

Miles Clennell (Guild Admin) 10/20/2008 8:58 PM EST : RE: Broken content boxes link
Miles Clennell
Posts: 3134
Zomgawsh Poster
Ahh, sorry for not specifying all the elements. There are indeed more!

Top left Corner
Top non repeating content
Top Repeating
Top right corner
Left non repeating side
Left repeating side
Bottom left corner
Bottom repeating
Bottom right corner

All these apply to the left, right and center containers.

I really appreciate your time replying Mottie
Anemia Sig 1
Top • Bottom

Mottie (MVP) 10/21/2008 12:39 PM EST : RE: Broken content boxes link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
OK try this
<style type="text/css">
.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>

<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>
Edit (10/24/2008): Fixed the HTML to work properly with IE.
>>help-site<<
Top • Bottom

Kaysi (Guild Admin) 10/21/2008 6:13 PM EST : RE: Broken content boxes link

Kaysi
Posts: 445
Fingers of Fury!
I am running into issues myself trying to change my bars, but looking through here I have noticed that all the image files here are being saved as .png.

Does it matter if the image files are saved at all as .jpg, .png, or .gif when creating these bars?
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
Top • Bottom

1 2 3Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%