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! > Broken content boxes
Mottie (MVP) 10/21/2008 7:53 PM EST : RE: Broken content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

It doesn't really matter what type of image you use for borders because the files are usually very small, but here are a few things to keep in mind:
  • GIF
    • Used if you want the image to have some transparency, such as rounded corners. Also allows for animation
    • Advantage: Transparency and small file size
    • Disadvantage: Only 256 colors (but it can have a custom pallete)
  • PNG
    • Used for photographs, graphics and line art. It also allows transparency and has an opacity setting. Image type of choice for making semi-transparent backgrounds.
    • Advantage: Much sharper color (16 million colors) and image quality
    • Disadvantage: Larger file size (doesn't matter that much for small images) and sometimes doesn't look correctly on IE.
  • JPG
    • Used for web photographs (16 million colors)
    • Advantage: Compatibility across platforms and small file size
    • Disadvantage: Blurring of edges is dependent on compression settings, so higher compression means image quality loss. No transparency is available.
  • BMP
    • Windows standard format. Usually used for textures.
    • Advantage: High image quality
    • Disadvantage: Huge image sizes
  • SVG
    • Vector image used for making scalable images
    • Advantage: no loss in image quality on scaling
    • Disadvantage: It's not really an image, it's a text file with coordinates and instructions telling the browser how to draw the image.
There are many other image types, but most are not used regularly for web site images. For more detailed information check out this wikipedia entry.
TopBottom

Kaysi (Guild Admin) 10/21/2008 9:35 PM EST : RE: Broken content boxes

Kaysi
Posts: 445
Fingers of Fury!

Hmmm... here's my dillema then.

I have two images that make up my present boarders that I've modified. But, when I try to replace the "old image" with the "new image" in the CSS the whole page gets messed up and the images break up in all weird sorts of ways.

Here's the two "old" images:

Old Eagles:
http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png

Old Lines:
http://farm4.static.flickr.com/3077/2826896343_4df9122100_o.png

Here's the two "new" images:

Blue Eagle:
http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg

Blue Lines:
http://farm4.static.flickr.com/3148/2962899327_4cfcb6864a_o.jpg

Here's the "old" CSS

.ctopleft { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: url(http://farm4.static.flickr.com/3077/2826896343_4df9122100_o.png) left top repeat-x; height:53px; }
.ctopright { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) left top repeat-y; width:5px; }
.crighttile { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) right top repeat-y; width:5px; }
.cbottomleft { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: url(http://farm4.static.flickr.com/3077/2826896343_4df9122100_o.png) left -53px repeat-x; height:15px; }
.cbottomright { background: url(http://farm4.static.flickr.com/3128/2826896349_b193a9fbc1_o.png) -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/3077/2826896343_4df9122100_o.png) 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/3077/2826896343_4df9122100_o.png) 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; }


And here's what I tried to do with the "new images":

.ctopleft { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: url(http://farm4.static.flickr.com/3148/2962899327_4cfcb6864a_o.jpg) left top repeat-x; height:53px; }
.ctopright { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg) left top repeat-y; width:5px; }
.crighttile { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg) right top repeat-y; width:5px; }
.cbottomleft { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_o.jpg) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: url(http://farm4.static.flickr.com/3148/2962899327_4cfcb6864a_o.jpg) left -53px repeat-x; height:15px; }
.cbottomright { background: url(http://farm4.static.flickr.com/3074/2963742548_0e4e2a727f_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/3148/2962899327_4cfcb6864a_o.jpg) 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/3148/2962899327_4cfcb6864a_o.jpg) 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; }

Any idea where I am messing this up at?

Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 10/22/2008 4:41 AM EST : RE: Broken content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Kaysi!

Well the problem is your old and new images aren't the same size. I can adjust the CSS to make the center box work, but I can't make the left and right ones work since the blue side borders are the same size as the original.

Here is a little bit of information to explain why the border images are added together... it's called an "image sprite"

The images are all the borders combined together into two images - one for horizontal images and the other for vertical images (and corners). The reason I did this was because it actually saves on page loading time because it only has to get two images from the web instead of eight and all your borders pop up at the same time versus pieces showing up one at a time, or that one image that takes a lot longer to load than others.

You can read more about image sprites here and here, or just do a google search for "image sprites"
TopBottom

Kaysi (Guild Admin) 10/22/2008 10:24 AM EST : RE: Broken content boxes

Kaysi
Posts: 445
Fingers of Fury!

OooOoOooooOooooo I seee..... *sigh* well that's certainly an easy fix! Thank you much again my dear!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Miles Clennell (Guild Admin) 10/23/2008 4:46 AM EST : RE: Broken content boxes
Miles Clennell
Posts: 3134
Zomgawsh Poster

Thanks again Mottie

I'm nearly there just got to do the navigation bar now.

I added the code from your test site to the CSS but it's not replacing the old navigation bar.
I guess I'm overriding it somewhere else but can't find out where

Benevolence website.
Anemia Sig 1
TopBottom

Mottie (MVP) 10/23/2008 8:08 AM EST : RE: Broken content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I believe you need to remove the tab images defined in the control panel... it's been a while since I looked at this LOL
Control Panel > Style & Colors > Tab Images
Clear all those boxes out and then check.
TopBottom

Miles Clennell (Guild Admin) 10/23/2008 11:17 AM EST : RE: Broken content boxes
Miles Clennell
Posts: 3134
Zomgawsh Poster

I know what you mean Mottie, after all I put the images there in the first place I just can't find 'em any mor.
I can't find 'Tab Images'. Must be going blind or something
Anemia Sig 1
TopBottom

Mottie (MVP) 10/23/2008 12:50 PM EST : RE: Broken content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Don't look at the tree on the left... it's in the right panel and right next to Page Styles near the top
TopBottom

Miles Clennell (Guild Admin) 10/23/2008 11:05 PM EST : RE: Broken content boxes
Miles Clennell
Posts: 3134
Zomgawsh Poster

Just looked at the site in IE, ooh dear
Anemia Sig 1
TopBottom

Mottie (MVP) 10/24/2008 5:31 AM EST : RE: Broken content boxes
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Oh wow, looks like the custom box HTML doesn't work too well on IE....

TopBottom

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