[resources.invisionpower.com - pliki] Skinning > Simple global sidebar for fixed width boards

[DawPi]

This will add a simple table free sidebar for ads/navigation etc using simple divs. It's only suitable for fixed width boards but should be pretty simple to modify for fluid widths. Just change the colours to match your board. The following is for a 960px width board but it's really easy to adjust the css according to your requirements. We will make use of the IPB wrapper, which is there but not defined in the css when the board comes out of the box.

Open up your ipb_styles.css and add the following...

#ipbwrapper {

background-color: #fff;

color: #555;

padding: 10px;

margin: 10px auto 0 auto;

text-align: left;

border: 1px solid #555;

width: 960px;

}

#ad-sidebar {

background-color: #fff;

text-align: left;

margin: 20px 0 0 788px;

width: 170px;

}

.row3

{

background: #fff;

padding: 3px 3px 3px 3px;

}

.row3 a {

text-decoration: none;

}

.ad-sidebar-title

{

background: #e5e5e5;

padding: 3px 3px 3px 3px;

font-weight: bold;

}

The open up your global template, find the following...

<div id='content'>

<a id='j_content'></a>

<if test="mainpageContent:|:$html">{$html}</if>

<br class='clear' />

</div>

and add the following...

<div id="d-sidebar">

<div class="row3">

Add some stuff here.

</div>

<div class="ad-sidebar-title">This is a nice bold title div. Repeat is as required.</div>

<div class="row3">

Add some content here.

</div>

<div class="row3">

Add more content here... repeat row3 divs as required.

</div>

</div>

Re-cache your browser and test. You're done. Wyświetl pełny artykuł