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! > Sir Mottie - What am I doing wrong?
1 2Next
Ciannon (Guild Admin) 6/6/2008 9:06 PM EST : Sir Mottie - What am I doing wrong? link
Ciannon
Posts: 2000
Zomgawsh Poster
Hi! Me again! Long time no see. LOL

For the life of me I can not figure this out.

After a month of giving up, and settling for just my CSS, I decided that I wanted to go back to the custom borders.

BUT... Here's the but...

The content box title area is blacked out, and I can not figure out why. Could you possibly take a look at my .css and see if it's an issue in there. Or give some sort of hint that would fix my problem?

Thanks,

Much appreciated!

SGO GUILD WEBSITE


Epic quotes from Coils:
"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008
Top • Bottom

Ciannon (Guild Admin) 6/6/2008 10:20 PM EST : RE: Sir Mottie - What am I doing wrong? link
Ciannon
Posts: 2000
Zomgawsh Poster
Well, I made a few fixes. But not near as many fixes as I want.

The background of the content title box isn't what I had hoped for. I can't figure out what in my CSS will change the font size/style. The only one that would was in the <form/>, but that changed it for a majority of the site, and that's not what I want. Also, when I inserted an image into for the top background, it only went halfway across the title box. So, I temp fixed it by changing the background for the while site, so that there's no "obvious" messed up sections of the site. LOL.


Epic quotes from Coils:
"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008
Top • Bottom

Everdark (MVP) 6/7/2008 4:22 AM EST : RE: Sir Mottie - What am I doing wrong? link
GuildPortal MVP
Everdark
Posts: 3918
Zomgawsh Poster
::coughs and immitates Mottie's voice::

JK!

I can tell you one thing off the bat and Mottie can give you more specifics to your blank title problem (unless, of course, it's related). You need to add .ContentBoxTitleNoBackground to your CSS when using custom borders. That will allow you to modify the fonts. GP switches to that when you add any URLs to Box Border Images in the Control Panel (and the only way to revert to .ContentBoxTitle settings again is to hit Clear).

EDIT: The image only going part way across the top for your center column is because the title sits in the Top Left Content Area, which is inbetween the Top Left Corner and Top Background section. Maybe someone knows a way around that?
"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)
Top • Bottom

Mottie (MVP) 6/7/2008 6:58 AM EST : RE: Sir Mottie - What am I doing wrong? link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Hehe Hi Ciannon!

Never been called Sir Mottie before LOL, but thanks!

When I looked at your border styles it looks like you used the built in Box Border Images page to add your style. I see two things that need fixing 
  • Everdark is right (*wave*), you are missing "ContentBoxTitleNoBackground" in your CSS. Copy the sample one below.
.ContentBoxTitleNoBackground {
 color: #ffffff;
 margin-top: 0px;
 padding-top: 0px;
 font-size: 12pt;
 font-family: Comic Sans MS;
}
  • You have an image named toprightcorner.jpg that is a solid block of red. This should be your "Top Background" image.
  • You are missing your "Top Right Fader" image. This is usually the same as your "Top Background". I've included a picture of what a content box looks like with and without a "Top Left Content Area" image.

  • Note: Top Left Content Area is ALWAYS 159 pixels wide. It's just the way GuildPortal set it.



If you still have problems, I'll be glad to help out
>>help-site<<
Top • Bottom

Everdark (MVP) 6/7/2008 7:50 AM EST : RE: Sir Mottie - What am I doing wrong? link
GuildPortal MVP
Everdark
Posts: 3918
Zomgawsh Poster
Heya Mottie (*waves back*), I have a question.

How are you getting your Top Right Fader to function? In both IE and Firefox, that image is skipped (using the Control Panel feature). I'd love to add a design to it, but always thought it a flaw in the way GP renders the borders. Even when I leave the Top background out, all I see is the Top Left Corner, Top Content Area, and the Top Right Corner. Did you use something special to get it to render other then what's in the Control Panel?
"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)
Top • Bottom

Ciannon (Guild Admin) 6/7/2008 9:04 AM EST : RE: Sir Mottie - What am I doing wrong? link
Ciannon
Posts: 2000
Zomgawsh Poster
Mottie said:
Hehe Hi Ciannon!

Never been called Sir Mottie before LOL, but thanks!

When I looked at your border styles it looks like you used the built in Box Border Images page to add your style. I see two things that need fixing 
  • Everdark is right (*wave*), you are missing "ContentBoxTitleNoBackground" in your CSS. Copy the sample one below.
.ContentBoxTitleNoBackground {
 color: #ffffff;
 margin-top: 0px;
 padding-top: 0px;
 font-size: 12pt;
 font-family: Comic Sans MS;
}
  • You have an image named toprightcorner.jpg that is a solid block of red. This should be your "Top Background" image.
  • You are missing your "Top Right Fader" image. This is usually the same as your "Top Background". I've included a picture of what a content box looks like with and without a "Top Left Content Area" image.



If you still have problems, I'll be glad to help out


Yeah, that was intentional. I originally had one for all corners, but I have since accidentally deleted the images I made, and I no longer have PS to fiddle with. Thanks for the help, I'll implement it sometime today and let you know if I have any more issues. I'm also bookmarking this thread as I know I'll have issues w/ it later down the line. LMAO

Also, the image you have down as "Topleftcorner.jpg, that was either the left or right border, not the topleftcorner


Epic quotes from Coils:
"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008
Top • Bottom

Mottie (MVP) 6/7/2008 10:54 AM EST : RE: Sir Mottie - What am I doing wrong? link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Hey Everdark,

The image I was showing is from the built in content box styles (Control Panel > Style & Colors > Box Border Images). The "gold" theme automatically adds the "Top Left Content Area". The Right fader is a repeated background, so I don't think you can style it to your liking.

I didn't use this way of doing it because I had less control over the content. I made my own content boxes and added the images using CSS. This way you can have a different style for each column on your page: Left, Center and Right.

Go to Control Panel > Style& Colors > Content Containers: Left, Center & Right... allthree can be modified. The HTML is below and you'll see that all three look very similarbut I added an L, R and C in front of the names to signify thedifferent column containers.

Left Container
<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><br>
Center Container
<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><br>
Right Container
<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><br>
Once that is done, you can addthis CSS to the end of what's already inside the "Custom StyleSheet". NOTE: If you started out with an completely empty Custom StyleSheet that is not enabled, you should "View Source" of your Guild Portal page and copy everything in between your <style="text/css"> and </style> very close to the top of the page, then paste that into your CSS. Oh and then enable it . Ileft the links to the images on my photobucket account so you can see the images I used - I combined all of the border images and sides into one image and all horizontal elements into a second image. Overall, this speeds up page loading time and decreases the number of times the site is accessed while loading (less lag).

I host all my images outside the guildportal site, because the file manager is not easy to use and if my subscription ever runs out, Ican't access any files there to change them. So maybe get a free image hostingsite, like photobucket (no I don't work for them LOL), and link to yourimages there!

Custom StyleSheet (from the home page of my test site)
.ctopleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left top repeat-x; height:53px; }
.ctopright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) left top repeat-y; width:5px; }
.crighttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) right top repeat-y; width:5px; }
.cbottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -53px repeat-x; height:15px; }
.cbottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -20px -53px no-repeat; height:15px; width:15px; }

.ltopleft, .rtopleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px top no-repeat; height:55px; width:16px; }
.ltoptile, .rtoptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -68px repeat-x; height:55px; }
.ltopright, .rtopright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px top no-repeat; height:55px; width:16px; }
.llefttile, .rlefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) left top repeat-y; width:2px; }
.lrighttile, .rrighttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) right top repeat-y; width:2px; }
.lbottomleft, .rbottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px -55px no-repeat; height:21px; width:16px; }
.lbottomtile, .rbottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -123px repeat-x; height:21px; }
.lbottomright, .rbottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px -55px no-repeat; height:21px; width:16px; }
Wow, I'm long winded... but, I hope this helps

Edit: I changed the container HTML as the old code would mess up rounded corners
Edit2: Changed "topbar" into "toptile" to match my most recent post about adding style sheets

>>help-site<<
Top • Bottom

Everdark (MVP) 6/7/2008 2:20 PM EST : RE: Sir Mottie - What am I doing wrong? link
GuildPortal MVP
Everdark
Posts: 3918
Zomgawsh Poster
Sweet! Thanks Mottie! 
"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)
Top • Bottom

Ciannon (Guild Admin) 6/7/2008 4:14 PM EST : RE: Sir Mottie - What am I doing wrong? link
Ciannon
Posts: 2000
Zomgawsh Poster
Everdark or Mottie,

When you have a spare minute, would you mind shooting me a PM via guildportal or an email (preferably email) at e.larrow@verizon.net.

I have something that I'd like you to help me with.

Thanks,
Ciannon


Epic quotes from Coils:
"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008
Top • Bottom

Boldernax (New Admin) 4/5/2009 9:37 AM EST : RE: Sir Mottie - What am I doing wrong? link

Boldernax
Posts: 1
Mottie said:
Hey Everdark,

The image I was showing is from the built in content box styles (Control Panel > Style & Colors > Box Border Images). The "gold" theme automatically adds the "Top Left Content Area". The Right fader is a repeated background, so I don't think you can style it to your liking.

I didn't use this way of doing it because I had less control over the content. I made my own content boxes and added the images using CSS. This way you can have a different style for each column on your page: Left, Center and Right.

Go to Control Panel > Style& Colors > Content Containers: Left, Center & Right... allthree can be modified. The HTML is below and you'll see that all three look very similarbut I added an L, R and C in front of the names to signify thedifferent column containers.

Left Container
<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><br>
Center Container
<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><br>
Right Container
<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><br>
Once that is done, you can addthis CSS to the end of what's already inside the "Custom StyleSheet". NOTE: If you started out with an completely empty Custom StyleSheet that is not enabled, you should "View Source" of your Guild Portal page and copy everything in between your <style="text/css"> and </style> very close to the top of the page, then paste that into your CSS. Oh and then enable it . Ileft the links to the images on my photobucket account so you can see the images I used - I combined all of the border images and sides into one image and all horizontal elements into a second image. Overall, this speeds up page loading time and decreases the number of times the site is accessed while loading (less lag).

I host all my images outside the guildportal site, because the file manager is not easy to use and if my subscription ever runs out, Ican't access any files there to change them. So maybe get a free image hostingsite, like photobucket (no I don't work for them LOL), and link to yourimages there!

Custom StyleSheet (from the home page of my test site)
.ctopleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left top repeat-x; height:53px; }
.ctopright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) left top repeat-y; width:5px; }
.crighttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) right top repeat-y; width:5px; }
.cbottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -53px repeat-x; height:15px; }
.cbottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld1.png) -20px -53px no-repeat; height:15px; width:15px; }

.ltopleft, .rtopleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px top no-repeat; height:55px; width:16px; }
.ltoptile, .rtoptile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -68px repeat-x; height:55px; }
.ltopright, .rtopright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px top no-repeat; height:55px; width:16px; }
.llefttile, .rlefttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) left top repeat-y; width:2px; }
.lrighttile, .rrighttile { background: #000000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) right top repeat-y; width:2px; }
.lbottomleft, .rbottomleft { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -2px -55px no-repeat; height:21px; width:16px; }
.lbottomtile, .rbottomtile { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld3.png) left -123px repeat-x; height:21px; }
.lbottomright, .rbottomright { background: #444444 url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbld2.png) -18px -55px no-repeat; height:21px; width:16px; }
Wow, I'm long winded... but, I hope this helps

Edit: I changed the container HTML as the old code would mess up rounded corners
Edit2: Changed "topbar" into "toptile" to match my most recent post about adding style sheets



hello i am new to the site i dunno where i am going wrong i am trying to add this but my page just looks like this http://www.guildportal.com/Guild.aspx?GuildID=307910&TabID=2581057
Top • Bottom

1 2Next
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%