MyBB Community Forums

Full Version: Move content to sidebox
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
(2015-08-08, 04:53 PM)Ad Bakker Wrote: [ -> ]
(2015-08-08, 04:36 PM)Zalixus Wrote: [ -> ]Btw, how do I create unique content to sidebox? I wanna make a box with image in it.

You can add an image on top of the sidebar by changing your index template. Something like this:

{$header}
<div style="float:{$left};width: 74%;">{$forums}</div>
<div style="float:{$right};width:25%;"><img src="http://xxxxxxxxxxxxx"/>{$sidebar}</div>
{$boardstats}

Hmm, so I put "<img src="http://xxxxxxxxxxxxx"/>" in the sidebar text in index? But how to create like a box too and picture in it.
(2015-08-11, 08:31 PM)Zalixus Wrote: [ -> ]But how to create like a box too and picture in it.

You could give the image a border like:

<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc;"/>

where z is the line thickness of the border and #cccccc the hex color number (can also be a shortcut like "black" or "red").

When you want to have the image centered in the side box, you can use:

<div style="text-align: center;">
<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc;"/>
</div>


When the border is to close to the image you can shift it outward:

<div style="text-align: center;">
<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc; padding: ipx"/>
</div>

where i is the number of pixels that the border is shifted to the outside.

This works, I've tried them all out.
(2015-08-11, 08:58 PM)Ad Bakker Wrote: [ -> ]
(2015-08-11, 08:31 PM)Zalixus Wrote: [ -> ]But how to create like a box too and picture in it.

You could give the image a border like:

<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc;"/>

where z is the line thickness of the border and #cccccc the hex color number (can also be a shortcut like "black" or "red").

When you want to have the image centered in the side box, you can use:

<div style="text-align: center;">
<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc;"/>
</div>


When the border is to close to the image you can shift it outward:

<div style="text-align: center;">
<img src="http://xxxxxxxxxxxxx" style="border: zpx solid #cccccc; padding: ipx"/>
</div>

where i is the number of pixels that the border is shifted to the outside.

This works, I've tried them all out.

I love you man.
Pages: 1 2