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! > Help with Box borders
edwar368 (Guild Admin) 10/4/2006 1:00 AM EST : Help with Box borders
edwar368
Posts: 938
Zomgawsh Poster

My site is still not quite how I want it.  I need to tweak my box borders, but I admit to pulling my hair out in frustration at trying to reverse engineer the css stylesheets of other sites to find out exactly how they work. I have got my existing box borders more through lots of trial and error more than anything else. I am already using custom css on my site, but admit to having no working knowledge of html or css.  However I am a professional mainframe programmer and have got my site to its current state by reading others web sites in "source" view and trying to reverse engineer.

Ok long intro over.  What I really want to know is:-
What are the component parts that make up a box border (i.e.  top left. top, top right etc), what order do they need to be in within the css file to correctly build my box border and what is the syntax for the border elements.  Assume for now I have all .jpg files I want as borders.  Also for now assume I have the following elements
    Top left graphic
    Top right graphic
    Top graphic
    Left Side graphic
    Right Side Graphic
    Bottom Left Graphic
    Bottom Right Graphic
    Bottom Graphic

Are there any elements of the box border I am missing?

Hope someone can shed a little light on this for me, its taking me away from my playing time

TopBottom

Neutrio (Guild Admin) 10/4/2006 1:32 PM EST : RE: Help with Box borders
Neutrio
Posts: 165
Posts With Wolves

The components that make up the Box Borders are all found under the GP Control Panel -> Styles & Colors -> Box Border Images.

They are (forgive my attempt at textually drawing a box here):

Top Left CornerTop Left Content Area1Top Background2Top Right Corner
Left Side Top3 Right Side Top4
Left Side Background Right Side Background
Bottom Left CornerBottom Background5Bottom Right Corner

1. This is where the box title is displayed
2. This is the graphic that is multiplied to fill out the top middle
3. This is used if you want to add a little something extra but if your not getting fancy use the same graphic as Left Side Background
4. This is used if you want to add a little something extra but if your not getting fancy use the same graphic as Right Side Background
5. This is the graphic that is multiplied to fill out the bottom middle

A small box would look something like:

Top Left CornerTop Left Content Area1Top Background2Top Background2Top Right Corner
Left Side Top3 Right Side Top4
Left Side Background Right Side Background
Left Side Background Right Side Background
Bottom Left CornerBottom Background5Bottom Background5Bottom Background5Bottom Right Corner

I did not see any effect of adding or leaving the Top Right Fader empty. At worst, just use the same graphic as Right Side Top.

NOTE:  I would not make the edge background pics too tall (use something like 2 pixels up to say 10 pixels).  I would also not make the middle background pics too wide (use something like 2 pixels up to say 10 pixels).  This is because the code will replicate the number it needs to fill out a box's dimensions based up on the box content's width/height.

NOTE 2:  The top pics all need to be the same height.  The left pics all need to be the same width.  The right pics all need to be the same width.  The bottom pics all need to be the same height.  The Top Left Content Area must be at least 159 pixels wide -- any thinner & you will see white space/background fill; it can be wider but I wouldn't make it too much wider.

NOTE 3:  Make sure the inside edge of each of the graphics is in alignment with their adjoining pic (respectively).  That part threw me off for about 2 days -- I'm not the most graphic or artistically aware person.  I just couldn't figure out why the bits weren't aligning properly & why there was just a sliver of white space where the edges met; or why the corner graphics were sticking/jutting way out from the edge graphics (or vice versa).

Enjoy!

- Neutrio
Heroes Inc
Neutrio
Neverwinter:  Defenders of Neverwinter
      Production:  Heroes Inc

Test: Connectus Interruptus
TopBottom

Guppy Queen (New Admin) 10/4/2006 1:38 PM EST : RE: Help with Box borders
Guppy Queen
Posts: 41034
Zomgawsh Poster

Awesome visual Neutrio. Thank you
TopBottom

edwar368 (Guild Admin) 10/4/2006 3:15 PM EST : RE: Help with Box borders
edwar368
Posts: 938
Zomgawsh Poster

Thx Neutrio,

This does go someway towards helping me out, though I cannot use the Guild Portal Control panel section of the Box Border Images as I have a Custom Stylesheet enabled (I realise I am making thimgs harder form myself this way lol, but thats me )

So my question is still what order are these coded in  the css file and are any otpional etc.

My site is here Fruit Loops and I am not happy with the sides of the boxes basically.  I have arrived at this point almost by accident and luck hacking at code and playing with paintshop pro.  in my css file I am using a lot of the same graphics in places, but not sure where I need to put the lines to achieve the box properly.  This is my current box css

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
    <tr>
      <td width="5" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg" height="28">&nbsp;</td>
      <td width="100%" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin.jpg" height="28" Align="Center" class="ContentBoxTitleNobackground">
      $block[title]</td>
      <td width="5" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg" height="28">
      <p align="center">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg">&nbsp;</td>
      <td width="100%" class="ContentBoxBody">
      $block[content]</td>
      <td width="100%" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg">
      <p align="center">&nbsp;</td>
    </tr>
    <tr>
      <td background="http://markmoore.zoomshare.com/my_images/boxborderbottom2.jpg" colspan="3" height="13">
      <font size="1">&nbsp;</font></td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2">
    <tr>
      <td width="100%" height="5"><font size="1">&nbsp;</font></td>
    </tr>
  </table>

TopBottom

Neutrio (Guild Admin) 10/4/2006 7:09 PM EST : RE: Help with Box borders
Neutrio
Posts: 165
Posts With Wolves

 Ah ...

You are not using the GP Control Panel's Style & Colors -> Box Border Images feature but rather you are using something in the CSS -- not quite sure how you're pulling that off but hey ... as long as it works

First off, let me list the order that I believe these pieces are being rendered in (just ground through the source code from my site):


Top Left Corner, Top Left Content Area, Top Background (n times), Top Right Corner

Left Side Top with a background of Left Side Background, content stuph, Right Side Top with a background of Right Side Background

Bottom Left Corner, Bottom Background (n times), Bottom Right Corner


NOTE:  Both the left & right side areas are in <DIV> blocks & it seems that the corresponding background pic is being used to fill the cell taken up by the Left Side Top & Right Side Top pics.  Since the intervening ContentBox cell is however tall it is based on its contents, the adjoining left & right side cells of that table row stretch to match the height of the ContentBox cell thus causing the fill pattern of the Background pic to fill out the cell.

I think I see what you are referring to though.  If I have it right, your left & right corner bits are not quite lining up with their corresponding middle bits.  If that is what your seeing as the problem, I see why.  Your Top Left Corner & Top Right Corner bits are 2 pixels thinner than your Top Background pic.

Though I applaud your efforts, I'm not sure you are gaining much by brute force -- at least with the content & box border elements I can see from your site; though I'm very likely missing a huge chunk of your CSS to be correct.

I just used the GP Control Panel's Box Border Images feature & pasted in the URL's to my border pics & let Aaron's code do its magic. 

- Neutrio
Heroes Inc
Neutrio
Neverwinter:  Defenders of Neverwinter
      Production:  Heroes Inc

Test: Connectus Interruptus
TopBottom

edwar368 (Guild Admin) 10/4/2006 7:32 PM EST : RE: Help with Box borders
edwar368
Posts: 938
Zomgawsh Poster

Thx Again Neutrio,

I think you are probably right about my CSS efforts, but it came about as a result of a conversation I had with a friend who was going on about the wonders of CSS.  Despite being in IT for over 20 years now I had never touched anything to do with web authoring.  But I do have a sad desire with IT to want to know "how" and "why" stuff works, so I have thrown myself in at the deep end.  Your contributions have been helpful thank you and added a few more pieces to the puzzle, so I will carry on trawling through.

TopBottom

Brennig (New Admin) 2/15/2007 12:38 AM EST : RE: Help with Box borders
Brennig
Posts: 210
Fingers of Fury!

For some reason when I set my box border images in the GP Control Panel it changes the images on the site, but for some reason it isn't saving the images in the control panel.  When I click on box borders again all the fields are blank.  Does anyone know why this may be?

I click save every time.

TopBottom

Neutrio (Guild Admin) 2/15/2007 2:30 PM EST : RE: Help with Box borders
Neutrio
Posts: 165
Posts With Wolves

It does that to me too ... suspect that this is because CSS is enabled -- which I want for my site -- so this is either by design or a d'oh! in the code.
Neutrio
Neverwinter:  Defenders of Neverwinter
      Production:  Heroes Inc

Test: Connectus Interruptus
TopBottom

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