Forum Image alignment (MrMind pls lol)

[Rupture]

So yeah MrMind knows about this, I would like to know how to align the images for every one of my forums so they look good, right now they are under the title of each category, and I think I'd probably want them to the left of the title, I think lol.

[Omo Naija Concerned]

Can one place banner on the forum page?

[Ape]

So yeah MrMind knows about this, I would like to know how to align the images for every one of my forums so they look good, right now they are under the title of each category, and I think I'd probably want them to the left of the title, I think lol.

Please post your link to your forum you have the problem.

[Van-Helsing]

Hello,
Do you mean this type of alignment http://www.punbb.biz/t177-javascript-auto-alignment-subforums?highlight=alignment ?

[TheCrow]

Hello,

I am sorry for the delay. Ok so what we will do is this:


How to do it? Two steps only.
Go to Admin Panel >> Display >> Templates >> General -> index_box
Find the below code:

Code:

{catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Remove it and replace it with this one:

Code:

<div class="autoaligndescrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="autosubalign"><span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span></div>

Save the template and publish it. ( )
One step to go.
Go to Admin Panel >> Display >> Pictures & Colors >> Colors -> CSS Stylesheet
and add the below code:

Code:

a.forumlink {margin-left:60px;}
.autosubalign {margin-left:60px;}
.autoaligndescrip {margin-top:5px;margin-left:60px;}
.autoaligndescrip img {margin-left: -60px;margin-top: -15px;border: 1px solid #ddd;box-shadow: 1px 1px 5px;border-radius: 8px;}
.forumline .row1 {padding-top:12px;}
.dersuj{display:none;}
.forumtitle {margin-left:60px;}

And hit Submit.

Now go and see the result!

[Rupture]

Looks awesome! Now I just need some cool pictures to put in and it'll look awesome! Thank you MrMind

[TheCrow]

Please replace the code with this one make it look better!

Code:

.autoaligndescrip img {
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 1px 1px 5px;
margin-left: -50px;
margin-top: -22px;
}

[SLGray]

Since this topic is marked with the solved icon, it will be archived.