[IPB 3] Double Column Tutorial

Smith · Dec 26, 2009

Lot people want it so here, you can have it. And small Thanks would be nice!
Log in to your IP.Board Admin CP

1. Look & Feel >
2. Manage Skin Sets & Templates >
3. Manage Skin Sets & Templates > Your skin

Open CSS

ipb_styles.css

to the bottom of the css file and add the following code

Code:

[B]/*** Dual Column ***/
.dc_section {
        border-top: 1px solid #1b1b1b;
        height: 65px;
        width: 50%;
        background:#000000 url({style_images_url}/row_bg.jpg) repeat-x top;
        float: left;
}

.dc_section .dc_content {[/B] [B]
        margin: 10px 15px;
        float: left;

[/B] [B]         
}

.dc_section .cat_icon_bg {[/B] [B]
        background:#000000 url({style_images_url}/cat_icon_bg.jpg) no-repeat left top;
        border-right: 1px solid #1b1b1b;
        float: left;
        padding: 10px;
        height: 45px;
        width: 50px;
        word-wrap: normal;
        clear: both;
}

.dc_section .dc_content h2 {[/B] [B]
        margin: 0;
        padding: 0;
        word-wrap: normal;
        clear: both;
}

.dc_section .dc_content h2 a{[/B] [B]
        text-decoration: none;  
        font-size: .65em;
        word-wrap: normal;
        clear: both;
}

.dc_section .dc_content .desc {[/B] [B]
        font-size: 0.9em;
        word-wrap: normal;
        clear: both;
}

.dc_header {[/B] [B]
        background:#012150 url({style_images_url}/t_header_bg.jpg) repeat-x top;
        height: 31px;
}
.div {
        word-wrap: break-word; }[/B]

Save

Open:

AdminCP > Look & Feel > Manage Skin Sets & Templates > Manage Templates in your style > Templates > Board Index > boardIndexTemplate open

Find:

Code:

<div class='category_block block_wrap'> <h3 id='category_{$_data['cat_data']['id']}' class='maintitle'><a class='toggle right' href='#' title='{$this->lang->words['toggle_cat']}'>{$this->lang->words['toggle_cat']}</a> <a href="{parse url="showforum={$_data['cat_data']['id']}" seotitle="{$_data['cat_data']['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['view_cat']}'>{$_data['cat_data']['name']}</a></h3> <table class='ipb_table' summary="{$this->lang->words['forums_in_cat']} '{$_data['cat_data']['name']}'"> <tr class='header'> <th scope='col' class='col_c_icon'> </th> <th scope='col' class='col_c_forum'>{$this->lang->words['cat_name']}</th> <th scope='col' class='col_c_stats stats'>{$this->lang->words['stats']}</th> <th scope='col' class='col_c_post'>{$this->lang->words['last_post_info']}</th> </tr>  <foreach loop="forums:$_data['forum_data'] as $forum_id => $forum_data"> <if test="forumRedirect:|:$forum_data['redirect_on']"> <tr class='{parse striping="catTable"} redirect_forum'> <td class='altrow'>{parse replacement="f_redirect"}</td> <td> <h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['go_to_forum']}'>{$forum_data['name']}</a></h4> <p class='desc'>{$forum_data['description']}</p> </td> <td colspan='2'> {$this->lang->words['rd_hits']}: {parse format_number="$forum_data['redirect_hits']"} </td> </tr> <else /> <tr class='{parse striping="catTable"}'> <td class='altrow'>  <if test="unreadicon:|:$forum_data['img_new_post'] != 'f_locked' && strstr( $forum_data['img_new_post'], 'unread' )"> <a id='forum_img_{$forum_data['id']}' href="{parse url="app=forums&module=forums&section=markasread&marktype=forum&forumid={$forum_data['id']}&returntoforumid={$this->request['f']}&i=1" base="public"}" title="{$this->lang->words['bi_markread']}" class='forum_marker'> {parse replacement="{$forum_data['img_new_post']}"} </a> <script type='text/javascript'> ipb.global.registerMarker( "forum_img_{$forum_data['id']}", "{$forum_data['img_new_post']}", markerURL + "{$forum_data['id']}" ); </script> <else /> {parse replacement="{$forum_data['img_new_post']}"} </if> </td> <td> <h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['go_to_forum']}'>{$forum_data['name']}</a></h4> <p class='desc'>{$forum_data['description']}</p> <if test="showSubForums:|:$forum_data['show_subforums'] AND count( $forum_data['subforums'] ) AND $forum_data['show_subforums']"> <h5 class='hide'>{$this->lang->words['subforums']}</h5> <ol class='subforums'> <foreach loop="subforums:$forum_data['subforums'] as $__id => $__data"> <if test="showSubForumsLit:|:$__data[3]"><li class='newposts'><else /><li></if><a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{$this->lang->words['go_to_forum']}'>{$__data[1]}</a></li> </foreach> </ol> </if>  <if test="hasQueuedAndCanSeeIcon:|:!empty($forum_data['_has_queued_and_can_see_icon'])"> <em class='moderated'><a href='{parse url="showforum={$forum_data['id']}&modfilter=all" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}' title='{$this->lang->words['view_unapproved']}'>{parse expression="sprintf( $this->lang->words['f_queued'], $forum_data['queued_topics'], $forum_data['queued_posts'])"}</a></em> </if> </td> <td class='altrow stats'> <ul> <li>{$forum_data['topics']} {$this->lang->words['topics']}</li> <li>{$forum_data['posts']} {$this->lang->words['replies']}</li> </ul> </td> <td> <ul class='last_post'> <if test="hideLastInfo:|:$forum_data['hide_last_info']"> <li>{$this->lang->words['f_protected']}</li> <else /> <if test="hideDateUrl:|:$forum_data['_hide_last_date']"> <li>{$forum_data['last_post']}</li> <else /> <li><a href='{parse url="showtopic={$forum_data['last_id']}&view=getlastpost" base="public" template="showtopic" seotitle="{$forum_data['seo_last_title']}"}' title='{$this->lang->words['view_last_post']}'>{parse replacement="f_lastpost"}</a> <a href='{parse url="showtopic={$forum_data['last_id']}&view=getlastpost" base="public" template="showtopic" seotitle="{$forum_data['seo_last_title']}"}' title='{$this->lang->words['view_last_post']}'>{$forum_data['last_post']}</a></li> </if> <li><strong>{$this->lang->words['in']}</strong> {$forum_data['last_topic_title']}</li> <li> <strong>{$this->lang->words['by']}</strong> <if test="lastPosterName:|:isset($forum_data['last_poster_name']) AND $forum_data['last_poster_name']"> <if test="lastPosterID:|:$forum_data['last_poster_id']"> <a href='{parse url="showuser={$forum_data['last_poster_id']}" template="showuser" seotitle="{$forum_data['seo_last_name']}" base="public"}' title='{$this->lang->words['view_profile']}'>{$forum_data['last_poster_name']}</a>{parse template="user_popup" group="global" params="$forum_data['last_poster_id'], $forum_data['seo_last_name']"} <else /> {$this->settings['guest_name_pre']}{$forum_data['last_poster_name']}{$this->settings['guest_name_suf']} </if> <else /> {$this->lang->words['f_none']} </if> </li> </if> </ul> </td> </tr> </if> </foreach> </table>

Change with:

Code:

 <div class='category_block block_wrap'> <div class="main_cat_heading"><div class="mch_r"><div class="mch_l"> <h3 id='category_{$_data['cat_data']['id']}' class='maintitle'><a class='toggle right' href='#' title='{$this->lang->words['toggle_cat']}'>{$this->lang->words['toggle_cat']}</a> <a href="{parse url="showforum={$_data['cat_data']['id']}" seotitle="{$_data['cat_data']['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['view_cat']}'>{$_data['cat_data']['name']}</a></h3> </div></div></div> <div class="mcs_r"><div class="mcs_l"> <div class="dc_header"> </div> <div class='ipb_table' summary="{$this->lang->words['forums_in_cat']} '{$_data['cat_data']['name']}'"> <foreach loop="forums:$_data['forum_data'] as $forum_id => $forum_data"> <div class="dc_section" style="width: 50%; float: left;"> <div class="cat_icon_bg"> <if test="unreadicon:|:$forum_data['img_new_post'] != 'f_locked' && strstr( $forum_data['img_new_post'], 'unread' )"> <a id='forum_img_{$forum_data['id']}' href="{parse url="app=forums&module=forums&section=markasread&marktype=forum&forumid={$forum_data['id']}&returntoforumid={$this->request['f']}&i=1" base="public"}" title="{$this->lang->words['bi_markread']}" class='forum_marker'> {parse replacement="{$forum_data['img_new_post']}"} </a> <script type='text/javascript'> ipb.global.registerMarker( "forum_img_{$forum_data['id']}", "{$forum_data['img_new_post']}", markerURL + "{$forum_data['id']}" ); </script> <else /> {parse replacement="{$forum_data['img_new_post']}"} </if> </div> <div class="dc_content" style="word-wrap: break-word"> <h2><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['go_to_forum']}'>{$forum_data['name']}</a></h2> <p class='desc' style="word-wrap: break-word">{$forum_data['description']}</p> </div> </div> </foreach> <div class="clear"></div> </div>

Save.

That's it!

BlaZe · Dec 27, 2009

Thanks man... I'll post it on my site as a Tutorial.

Hussie · Dec 27, 2009

Thanks for the turtorial but it didn't work perfectly by me.
Colours got mixed.

Smith · Dec 28, 2009

Tutorial is made for Default IPB Skin, you will have to modify code yourself to suit your template.

SJshah · Dec 28, 2009

Hussie said:
Thanks for the turtorial but it didn't work perfectly by me.
Colours got mixed.

change the hex colours in the css you added stylesheet.

btw: nice tutorial Smith

alexandreperei · Jan 21, 2010

How to fix this?

Maz · Jan 21, 2010

Im going to have to invest in creating IPB skins seems to be popular and not many custom creators!

reeps · Jan 21, 2010

Maz we create over at ipbsource, there's 4 of us that do skins as yet

Rohit · Jan 21, 2010

That's what i've been looking for...

[IPB 3] Double Column Tutorial

Smith

Active Member

BlaZe

Active Member

Hussie

Active Member

Smith

Active Member

SJshah

Active Member

alexandreperei

New Member

Maz

Active Member

reeps

Banned

Rohit

Active Member