by HaPham Sat 27 Dec - 17:16
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| \;» \;)/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!