Differences
This shows you the differences between the selected revision and the current version of the page.
| themes:fluid_themes 09-06-2009 10:39 am | themes:fluid_themes 09-06-2009 10:53 am current | ||
|---|---|---|---|
| Line 25: | Line 25: | ||
| **ALL IMAGES MUST BE THE SAME HEIGHT!!** | **ALL IMAGES MUST BE THE SAME HEIGHT!!** | ||
| + | |||
| Line 30: | Line 31: | ||
| ===== #top / #topmenu ===== | ===== #top / #topmenu ===== | ||
| Example: | Example: | ||
| - | {{ themes:top_menu_preview.png?600 }} | + | {{ themes:fluid_top3.png?600 }} |
| The HTML required to make a fluid #top is show below:<code html><div id="top_wrap"> | The HTML required to make a fluid #top is show below:<code html><div id="top_wrap"> | ||
| Line 48: | Line 49: | ||
| padding:0 2% 4px; | padding:0 2% 4px; | ||
| margin-bottom:12px; | margin-bottom:12px; | ||
| - | }</code>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** after **top** to position the background image to the right of the element. You will be left with this:<code css>#top { | + | }</code>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:<code css>#top { |
| - | background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat top; | + | background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat bottom right; |
| - | border-bottom:1px solid #3a5197; | + | |
| height:20px; | height:20px; | ||
| padding:0 2% 4px; | padding:0 2% 4px; | ||
| margin-bottom:12px; | margin-bottom:12px; | ||
| - | }</code>If you want to remove the border attribute, you can. 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). | + | }</code>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:<code css>#top { | At the end of this step we're left with this according to our example image:<code css>#top { | ||
| - | background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat top; | + | background:url(http://209.85.62.24/11/88/0/p84325/right.png) no-repeat bottom right; |
| - | border-bottom:1px solid #3a5197; | + | |
| height:20px; | height:20px; | ||
| padding:8px 2% 12px; | padding:8px 2% 12px; | ||
| margin-bottom:12px; | margin-bottom:12px; | ||
| }</code>{{ themes:fluid_top1.png?600 }} | }</code>{{ themes:fluid_top1.png?600 }} | ||
| + | |||
| + | **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. | ||
| + | <code css>#top_left { | ||
| + | background: url(http://209.85.62.24/11/88/0/p84323/left.png) no-repeat bottom left; | ||
| + | }</code>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. | ||
| + | {{ themes:fluid_top2.png?600 }} | ||
| + | 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. <code CSS>#top_wrap { | ||
| + | background: url(http://209.85.62.24/11/88/0/p84324/middle.png) bottom; | ||
| + | }</code> | ||
| + | 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: | ||
| + | {{ themes:fluid_top3.png?600 }} | ||
| ===== Logo/Banner ===== | ===== Logo/Banner ===== | ||