The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by HaPham on December 26th 2014, 12:40 am

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!

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by SLGray on December 26th 2014, 1:29 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36644
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

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

Post by HaPham on December 26th 2014, 1:50 am

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

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by SLGray on December 26th 2014, 4:45 am

Please post your CSS stylesheet using the code tags.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36644
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

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

Post by HaPham on December 26th 2014, 8:37 am

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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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: http://help.forumotion.com/t137738-need-help-to-change-style-of-post-profile-and-topic


Code:

.online .postprofile {
    background-image: url("http://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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;;
}

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by HaPham on December 27th 2014, 5:16 pm

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!

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by HaPham on December 28th 2014, 4:50 pm

Dear Forumotion,

I am still waiting for your support.

Best,

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by HaPham on December 29th 2014, 11:06 am

Dear @Ange Tuteur!

Can you help me?

Thank you!

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

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

Post by HaPham on December 30th 2014, 6:41 pm

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,

HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum