Ishimaru-Design > Home > Tutorials > phpBB3 > [Prosilver] Tableless Aero-like borders

[phpBB3] [Prosilver] Tableless Aero-like borders

  • Author : Ishimaru Chiaki
  • Posted on : 2013-10-28 04:17:04
  • Updated on : 2013-10-28 04:26:03
  • Comments : 0
  • Type : Styles
  • Level : Newbie

The particularity of the Aero styles serie (available on phpbb3styles.net), is the border made with transparent PNGs that reminds Windows Vista's transparency effects and surrounds the forum list.  Because of this transparency, embedding (x)HTML elements isn't possible and we'll have to place them side-by-side.

So, I will show you how to do it, so you can get a result without overlapping, like in this example

Special thanks to Samurai and micka76 from phpBB-fr.com for the tests, error reports and fixes for IE6.

Summary

  1. Preparation
  2. XHTML part
  3. CSS part
  4. Bonus tip : IE6 compatibility

Preparation

Wether it's a border that comes from an Aero style or it's a border that you made yourself and cut into eight pieces, you must first send them in the styles/your_style/theme/images/ directory.  Also plan to have a background - preferably black and glossy - for the forum headers (forum name - topics - posts - last posts).  For example, we can use the cellpic1.gif background from the same Aero style.

For what will follow, I'll use these image names to identify the pieces and classes that will be associated to each appropriate piece :

  • tl.png : Top left

  • tm.png : Top center

  • tr.png : Top right

  • ml.png : Middle left

  • mr.png : Middle right

  • bl.png : Bottom left

  • bm.png : Bottom center

  • br.png : Bottom right

Now, we'll prepare the blocks that will contain our backgrounds.

In order to give you a good idea of the structure we'll use, nothing beats a sketch smile
sketch-prosilver-aero.png

So, the top and bottom parts of our border will have for each of them a div container that will contain three divs placed side-by-side.  For the middle part, it will contain three div elements that are nested into each other, and the most nested one will be the forum list.

We'll thus begin with the XHTML part, then we go for the CSS part.

0 comments - Next