Need help to change forum direction in a line (Horizontal)

My forum in phpBB3.

Is there anyway to get forum direction in the topic looks like below image? I want it in a line (Horizontal) with this design.



Thank you!

If guests can see your forum, please post a link to a topic.

Please review this link: http://cotuong.forumvi.com/t1-topic

Please post your CSS stylesheet using the code tags.

Here is all in my CSS codes.

Code:

/* Personalize forum widgets with CSS */
/* Self service 2 */
.module .h3 { text-transform:none }
#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }

/* Most viewed Topics -> Self service 2 */
.module .h3 {
  color:#FFF; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

/* Đóng khung post profile */
.postprofile {
    border-radius: 10px;
    box-shadow: 0px 0px 5px #0000FF;
}

/* Vote/ Like system */
.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

/* Private post profile body and topic */

.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png");
    background-position: right top;
    background-repeat: no-repeat;
}
.row2 .postprofile {
    background-color: #E5F1F9;
}
.postprofile {
    border: medium none !important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
}
.postprofile {
    border-color: #FFF;
    border-right: 1px solid #FFF;
    color: #666;
    display: inline;
    float: left;
    margin: 5px 0px 0px;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}
div#wrap {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_wrap.png") repeat-x scroll center bottom #FBFBFB;
    border-color: -moz-use-text-color #00A5CD #00A5CD;
    border-top: 0px none;
    box-shadow: 1px 1px 10px;
    padding: 0px;
    width: 90%;
}
#wrap {
    background-color: #F7F7F7;
    border: 1px solid #666;
    margin: 0px auto;
    min-width: 951px;
    padding: 5px;
    width: 90%;
}
body {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_fdf.png") repeat-x scroll 0% 0% #D8E9F6;
    padding: 0px;
}
body {
    background-attachment: fixed;
    background-color: #FFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    color: #666;
}

#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    box-shadow: 1px 1px 1px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    border-radius: 4px;
}
.module {
    background-color: #E5F1F9;
    color: #666;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0px 10px;
}

.corners-bottom,.corners-top{
display: none !important;;
}

Please be informed that Twisted_Mods is helping me in another topic with below code. It still did not work well. However, I keep it for him checking.

Link to this topic: https://help.forumotion.com/t137738-need-help-to-change-style-of-post-profile-and-topic

Code:


.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png");
    background-position: right top;
    background-repeat: no-repeat;
}
.row2 .postprofile {
    background-color: #E5F1F9;
}
.postprofile {
    border: medium none !important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
}
.postprofile {
    border-color: #FFF;
    border-right: 1px solid #FFF;
    color: #666;
    display: inline;
    float: left;
    margin: 5px 0px 0px;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}
div#wrap {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_wrap.png") repeat-x scroll center bottom #FBFBFB;
    border-color: -moz-use-text-color #00A5CD #00A5CD;
    border-top: 0px none;
    box-shadow: 1px 1px 10px;
    padding: 0px;
    width: 90%;
}
#wrap {
    background-color: #F7F7F7;
    border: 1px solid #666;
    margin: 0px auto;
    min-width: 951px;
    padding: 5px;
    width: 90%;
}
body {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_fdf.png") repeat-x scroll 0% 0% #D8E9F6;
    padding: 0px;
}
body {
    background-attachment: fixed;
    background-color: #FFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    color: #666;
}

#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    box-shadow: 1px 1px 1px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    border-radius: 4px;
}
.module {
    background-color: #E5F1F9;
    color: #666;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0px 10px;
}

.corners-bottom,.corners-top{
display: none !important;;
}

Dear SL Gray,

This is the last CSS code at the moment.

Code:

/* Personalize forum widgets with CSS */
/* Self service 2 */
.module .h3 { text-transform:none }
#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }

/* Most viewed Topics -> Self service 2 */
.module .h3 {
  color:#FFF; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

/* Vote/ Like system */
.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

/* Quick reply bigger */
#quick_reply #textarea_content { width:80% !important }

/* Collaspe */

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://i39.servimg.com/u/f39/19/06/50/42/exp_pl10.gif);}
.contract {background: url(http://i39.servimg.com/u/f39/19/06/50/42/exp_mi10.gif);}


/* Color palette icons */
.color-option {
  display: inline-block !important;
  width: 15px !important;  /* width of the icon */
  height: 15px !important;  /* height of the icon */
  border: 2px solid #fff !important;  /* white border around the icon */
  margin: 3px !important;  /* space between each icon */
  box-shadow: 0 0 2px #778899;  /* shadow */
  cursor: pointer !important;
}

.color-option span{
  display: block !important;
  width: 15px !important;  /* width of the icon */
  height: 15px !important;  /* height of the icon */
}

.color-option, .color-option span {
  border-radius: 2px;  /* roundness */ 
}

/* Whole palette - the width influences how many icons appear */
.sceditor-dropdown.sceditor-color-picker {
  width: 200px !important;  /* width of the palette */
  height: 100px !important;  /* height of the palette */
  padding: 5px !important;
  border-radius: 5px !important;
}

I find out the tutorial in another forum. It show how to customize forum direction in Punbb version. My forum is in phpBB3 version, so I can not use this.

Here are all the steps in Punbb version:

1, Find in "overall_footer_begin":

Code:

<div id="pun-foot">

2, Add below code on above of code in step 1:

Code:

<script type="text/javascript">
//<![CDATA[
/* breadcrumb for punbb - devs.forumvi.com */
$(".pun-crumbs").each(function() {
        var $crumbs = $(this),
                $items = $crumbs.find(".crumbs").children(),
                $navstrip = $('<ul class="navstrip clearfix"></ul>');
        $crumbs.empty().html($navstrip);
        $items.not(":empty").appendTo($navstrip).wrap("<li></li>");
        $items.first().parent().addClass("begin");
}).html(function() {
        return this.innerHTML.replace(/(»\s|&nbsp\;»&nbsp\;)/g, "");
});
//]]>
</script>

3, Add below code in CSS:

Code:


.pun-crumbs{padding:1em 0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#1f537b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}

And the result will be like this:


Hope this is a helpful so that my request can be solved faster.
Will you help me out?

Thank you!

Dear Forumotion,

I am still waiting for your support.

Best,

Dear @Ange Tuteur!

Can you help me?

Thank you!

Hello, hi, dear,

I have to say these words in five days. No one here take action.

I need to know that my request can be solved or not? I do not want to push you anymore.

Regards,