Components for a Fluid Theme

This documentation has not been written with beginners to CSS/Themes in mind. Please only attempt this if you're comfortable with the jargon used.

There are two types of widths that themes can take on.

  • Fixed: A set width using px or em. Regardless of screen resolution, the width of the theme will be the same.
  • Fluid: Uses percentages, or the theme components simply spread to the width of the screen, much like fluid in a container. Using a percentage of 80% for example, will make the width 80% of the parent container. Not setting a width will make an element fill the area it's in.

It is common practice for more advanced theme creators, to make their themes fluid. This increases the usability of a theme as it adjusts to the user's screen resolution. This method requires left and right pieces for the side edges, and a middle image that can repeat side to side flawlessy. Having the middle image repeating behind the two side images will give the illusion of it being one complete shape:

The basic HTML for this would look something like:

<div id="parent">
<div id="left_piece"> </div>
<div id="right_piece"> </div>
</div>

Very simple HTML. Two divs within a div. These two left/right pieces are 'floated' to the sides of the parent div.

Throughout this documentation, I'll be using the following three pieces (except for the banner). If you wish to practice either method, you are free to use the images I have provided :P

ALL IMAGES MUST BE THE SAME HEIGHT!!

#top / #topmenu

Example:

The HTML required to make a fluid #top is show below:

<div id="top_wrap">
<div id="top_left">
<!-- TOPMENU -->
</div>
</div>

For this, <!– TOPMENU –> refers to the entire #top, which is

<div id="top">

in the HTML. Since this is a div in itself, we can use that as the right side.

Refreshing the page after altering the HTML shows that nothing appears to have changed at the top. But all we need to change this is some CSS.

1. Adding the right image

We are going to add the right image that ends up as the background image of the #top:

#top {
background:url(http://z1.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-bottom:1px solid #3a5197;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

First, you need to change the background image to the new URL of the right image. Then, since we don't want the image to repeat, we will change repeat-x to no-repeat, followed by removing the hex code since that will fill in the space not covered by the image, with a solid colour. Since the image needs to appear on the right hand side, you will then add right to the background positioning. The <!– topmenu –> includes the #top_bar too, therefore change top to bottom (this will make step 2 easier). Finish up by removing the border attribute. If you need a border in this area, you can add it later on. You will be left with this:

#top {
background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat bottom right;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

Adjusting the pixel values can then increase the height of the element and show the full image, while keeping the contents in the middle (or equally, adjusting one particular value to position text top/bottom more). At the end of this step we're left with this according to our example image:

#top {
background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat bottom right;
height:20px;
padding:8px 2% 12px;
margin-bottom:12px;
}

2. Adding the left image

For the left image, we're going to use the #top_left div that we created in the HTML. This requires us to add custom CSS to the Theme Appearance. Place the CSS where you can easily locate it.

#top_left {
background: url(http://209.85.62.24/11/88/0/p84323/left.png) no-repeat bottom left;
}

All that is required is a background image for the practice images, however you may feel the need to add a left padding to #top_left to shift the 'Welcome…' text toward the middle some more. After step 2, we're left with the above. Now all we need is to fill in the space behind :)

3. Adding the repeating background image

Once again, we're going to add some custom CSS to go with some of the HTML added.

#top_wrap {
background: url(http://209.85.62.24/11/88/0/p84324/middle.png) bottom;
}

Once again, all that is required for this on a basic level, is the background. If you then wanted to add a border around the entire fluid #top, you'd add it to the #top_wrap, since it encompasses both the #top_left and the default #top.

At the end, we're left with a simple, but fluid appearance:

Logo/Banner

This method does not allow for banner images of any size. If you want to make the banner area completely fluid, I'd recommend you using this documentation (full image border). It doesn't just work for image borders. In fact the method used for image borders, is the same method used in this documentation.

Example:

The HTML changes required for the Theme Layout. Since the <!– HEADER –> refers to the

<div id="logo">

part of the board HTML, there is no need to add a second side piece to this.

<div id="banner">
<div id="banner_l"></div>
<!-- HEADER -->
</div>

1. Adding the Repeating Background

ADD to the CSS:

#banner {
background: url(http://209.85.62.24/11/88/0/p84342/header_m.png) repeat-x;
height: 150px;
}

Insert the image URL for the main background that repeats behind the side images. Set the height for this to the height of the background images you're using. Whatever height you are using, the main clickable banner image ought to be smaller than this to make things fit properly.

2. The Left Piece The 'Main Banner Image' is the normal, clickable banner that people add to the Theme Settings. This documentation makes use of this default area, because the support team get bored of telling people to remove a CSS snippet that makes the logo disappear, because the theme designer has added the banner to the Theme Layout instead. Using default areas earns you extra cookies!

For the side opposite to where the banner will be (I'll use the left piece here to go with the example):

#banner_l {
background: url(http://209.85.62.24/11/88/0/p84343/header_l.png) no-repeat left;
float: left;
height: 150px;
width: 50px;
}

Add the background image, float it left, and set the width and height to the dimensions of the left image.

3. The #logo (right piece) Find the default #logo

#logo {
background:url(http://z1.ifrm.com/static/1/css/logobg.png) repeat-x top #566cb0;
border:1px solid #3a5197;
border-bottom:0;
clear:both;
margin:0 2%;
}

Strip it :P Remove the two border attributes, remove clear: both;, and remove the margin attribute. Remove repeat-x top #566cb0 from the background attribute too. Add the background image for the right piece (or left):

#logo {
background:url(http://209.85.62.24/11/88/0/p84344/header_r.png) no-repeat right;
float: right;
}

Rather than set a height, using padding to align the right image to the center image is the best way:

padding: (a)px (b)px ©px (d)px;

(a) top (b) right © bottom (d) left

Adding padding to (a) will increase the space between the top edge of the #logo, and it's content. Adding padding to © will increase the space between the bottom edge and the content. Increase both (a) and © by the same amount to keep the text centered inside the element. If you want the banner image to be slightly more to the top than the bottom, then the bottom padding value needs to be more than the top.

Add a right padding to move the image more to the left and to expose the right piece.

5. Aligning the Banner Image

#logo {
background:url(http://209.85.62.24/11/88/0/p84344/header_r.png) no-repeat right;
padding: 39px 50px 39px 0px;
text-align: left;
}

Add a text-align attribute to the #logo. Use either left, center or right. The initial example for this shows a centered banner.

If you have any problems with this documentation, please send in a support ticket :)

Example:

HTML change to Theme Layout required:

<div id="submenu_wrap">
<div id="submenu_l"></div>
<!-- SUBMENU -->
</div>

We're going to use the #submenu as the right piece for this. Therefore we only need one div to act as the left piece.

1. Adding the Repeating Background

ADD this to the CSS:

#submenu_wrap{
background: url(http://209.85.62.24/11/88/0/p84324/middle.png) repeat-x;
height: 40px;
}

Add the background image and set the height to the height of the images.

2. The Left Piece

ADD to the CSS:

#submenu_l {
background: url(http://209.85.62.24/11/88/0/p84323/left.png) no-repeat left;
height: 40px;
width: 40px;
float: left;
}

Add the background image and set it to not repeat, and be positioned left. Set the height and width to the dimensions of the background image. Float it left.

3. The #submenu (right piece)
Find the CSS for #submenu:

#submenu {
background:url(http://z1.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-left:1px solid #3a5197;
border-right:1px solid #3a5197;
color:#586eb1;
font-size:85%;
margin:0 2%;
padding:3px 1% 4px;
text-align:right;
}

Remove the border attributes and the margin attribute. Adjust the background image, change repeat-x to no-repeat and change top to right. Remove the hex code. Also remove the padding attribute. This will be added again in a different manner.

#submenu {
background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat right;
color:#586eb1;
font-size:85%;
text-align:right;
}

Setting the Padding:

padding: (a)px (b)px ©px (d)px;

(a) top (b) right © bottom (d) left

Adding padding to (a) will increase the space between the top edge of the #submenu and the text inside. Adding padding to © will increase the space between the bottom edge and the text inside. Increase both (a) and © by the same amount to keep the text centered inside the element. If you want the text to be slightly more to the top than the bottom, then the bottom padding value needs to be more than the top.

Set a right padding to expose the right piece.

4. Aligning the text

First, you'll need to make sure the right padding is the same width as the left piece. This will make sure that if you're centering the text, the text isn't 40px offset to the right (visually).

Simply change the text-align attribute to either left or center, since it is right aligned by default.

The navigation SHOULD always be on the left. People read left to right, therefore the navigation should always be on the left.

Example:

HTML changes required in the Theme Layout:

<div id="nav_wrap">
<!-- NAV -->
<div id="nav_r"></div>
</div>

The #nav acts as the left piece.

1. The Repeating Background
ADD the following CSS:

#nav_wrap {
background: url(http://209.85.62.24/11/88/0/p84324/middle.png) repeat-x;
height: 40px;
}

Add the repeating background image, and set the height to the height of the image.

2. The #nav (The Left Piece)
Locate the #nav:

#nav {
color:#5a70b3;
height:1%;
padding:10px 1%;
}

Add the middle background image and set it to not repeat, and position left. Then remove the height and padding attribute. Float it left:

#nav {
background: url(http://209.85.62.24/11/88/0/p84323/left.png) no-repeat left;
color:#5a70b3;
float: left;
}

Rather than set the height, we're going to use padding instead:

padding: (a)px (b)px ©px (d)px;

(a) top (b) right © bottom (d) left

Adding padding to (a) will increase the space between the top edge of the #nav and the text inside. Adding padding to © will increase the space between the bottom edge and the text inside. Increase both (a) and © by the same amount to keep the text centered inside the element. If you want the text to be slightly more to the top than the bottom, then the bottom padding value needs to be more than the top.

Set a right padding to expose the left piece:

#nav {
background: url(http://209.85.62.24/11/88/0/p84323/left.png) no-repeat left;
color:#5a70b3;
float: left;
padding: 12px 0px 12px 10px;
}

3. The Right Piece
ADD this to the CSS:

#nav_r {
background: url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat right;
height: 40px;
width: 40px;
float: right;
}

Add the URL to the right piece, and set the height/width to the dimensions of the background image.

Full Image Border

Please see the documentation on Image Borders here.

H2/Category Headers/Thead th

Please check for Choco's code here.

Category Footers (Index only)

Please read this.

Category Image borders

Pretty much index only..except for subforums. Hmm. Please read this.



themes/fluid_themes.txt · Last modified: 2015/01/09 16:02 (external edit)