Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

[Mr LNA]

tylevar vbb 4.0-Hướng dẫn chỉnh sửa giao diện của vbb 4.0(cơ bản nhất)

Style var vbb 4.0 khá lớn, nhưng mình chỉ HD một số thứ hay dùng để các bạn chỉnh giao diện( skin ) của mình.

Đầu tiền bạn vào admincp-->style and tamplate(giao diện)-->manager(quản lý giao diện)-->giao diện cần sửa và chọn đến style var như hình vẽ
http://sinhvienthamdinh.com/forum/redirector.php?url=http%3A%2F%2Fupanh.ninja9x.net%2Fimages%2F751.png

Bây h nó sẽ hiện ra một loạt lựa chọn,bạn chọn phần cần chỉnh .Trong đó các phần cần chỉnh chủ yếu như sau:
http://sinhvienthamdinh.com/forum/redirector.php?url=http%3A%2F%2Fupanh.ninja9x.net%2Fimages%2F472.png
Mình HD từ trên xuống dưới của skin:
Đầu tiên chỉnh header:
Nó là phần:
Header:
header_backgruond:
http://sinhvienthamdinh.com/forum/redirector.php?url=http%3A%2F%2Fupanh.ninja9x.net%2Fimages%2F233.png

Cái đầu tiên là màu header(Background Color)
Cái thứ 2 là ảnh nền Background Image.
Điền dạng
Mã:
url(link ảnh)
Background Repeat : có lặp lại hay không.

Tương tự:
Header_Border:Thay đổi thuộc tính viền bao quanh header.
Header_color:Thay đổi màu chữ ở phần header.
Header_Font:Thay đổi định dạng font chữ phần header.
Header_link_color:Thay đổi màu link ở header.
Header_Linkhover_color:Thay đổi màu link ở header khi di chuột qua.
Header_padding: Thay đổi khoảng cách của header với các đối tượng khác.

Muốn thay đổi các chữ chào mừng thành viên thì thay đổi ở toplink:
Toplink_linkcolor là màu chữ đó
Toplink_linkovercolor là màu link khi di chuột đến:
http://sinhvienthamdinh.com/forum/redirector.php?url=http%3A%2F%2Fupanh.ninja9x.net%2Fimages%2F184.png

Đã xong header.Đến phần menu bar:

Sửa menu bar:
navbar_tab_bacground:
Background Color: màu
Background Image :ảnh nền( cách chèn tương tự cái trên)
repeat: lặp lại: có thể chọn x để giảm dungluownngj ảnh
Sửa menu bar selected:
navabar_tab_bacground_slected
Các thông số tương tự navbar_tab_bacground:

Navbar:
Các thông số gồm có navbar_color,navbar_fotn : tự hiểu nhé:X
Màu nền toàn 4rum: Doc_background
Chiều rộng forum: Common -> Document Width hay doc_Width ko nhớ rõ
Chiều rộng sidebar blocks: Forum Sidebar Width

Còn lại các bạn tự mò mẫm là sẽ ra nhiều cái cần chỉnh thú vị trong style var đấy

* Blockhead_background => Thay đổi màu thanh khi post bài và quick reply
    * Blocksubhead_background => Thay đổi màu background chú thích forum (forum descript)
    * control_content_background => Thay đổi màu nút bấm Gửi bài trong postbit
    * control_content_hover_background => Thay đổi màu nút bấm Gửi bài khi di chuột vào trong postbit.
    * doc_background => Thay đổi màu nền ngoài forum
    * body_background => Thay đổi màu nên forum
    * border_radius => Thay đổi độ bo tròn toàn forum
    * Font => Thay đổi kích cỡ và kiểu chữ trên forum
    * footer_background => Thay đổi màu thanh footer
    * forum_sidebar_background => Thay đổi màu thanh sidebar
    * forumhead_background => Thay đổi màu thanh trên cùng forum head
    * foruminfo_header_background => Thay đổi màu thanh trên cùng forum info
    * forummenu_background => Thay đổi màu thanh trên cùng forum menu
    * woheader_background => Thay đổi màu thanh trên cùng whats going on
    * header_background => Thay đổi màu header
    * linkcolor => Thay đổi màu link trên forum (không thay đổi màu trên sidebar)
    * linkhover_color => Thay đổi màu link trên forum khi di chuột (không thay đổi màu link khi di chuột đến trên sidebar)
    * navbar_background => Thay đổi màu thanh navbar
    * navbar_tab_background => Thay đổi màu thanh tab navbar
    * navbar_tab_selected_background => Thay đổi màu thanh tab navbar khi chọn
    * postbithead_background => Thay đổi màu thanh trên cùng trong postbit
    * threadlisthead_background => Thay đổi màu thanh trên cùng list bài viết trong một box

 

[oaichua]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Cho em hỏi muốn đổi màu chữ của diễn đàn. Hic tìm mãi mà ko biết nhãn nào



với cho em xin cái mod quảng cáo & thông báo như của sinhvienthamdinh.com

thanksss

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Cái màu chữ là trong mục css của forum chứ không nằm trong stylevar, bạn vô lục trong css coi thử. Còn cái thông báo là mình tự code chứ không phải mod bạn ak. Bạn dùng code sau chèn vào teample forumhome nha, nơi nào bạn muốn hiển thị thì chèn vào.

<table width="100%" border="[B][COLOR=blue]1[/COLOR][/B]">
<tr>
                <td width="50%">
[COLOR=red][B]Chèn nội dung của khung bên trái[/B][/COLOR]
</td>
<td width="50%">
[B][COLOR=red]Chèn nội dung của khung bên phải[/COLOR][/B]
</td>
</tr>
</table>

Bạn chèn nội dung vào phần bôi màu đỏ nha bạn, nếu không muốn hiển thị viền của khung thông báo thì bạn đổi số 1 thành số 0 nha. Mình chỉ dùng table thôi.^^! Chúc bạn thành công.

 

[oaichua]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

hiccc chỉ vì ko để ý nên lại phải hỏi thêm
1. Cái quảng cáo tự code ấy có cách nào để hiện thị all page ko
2. Em thấy forum ko bị lỗi "load khi sửa nhanh bài viết". mà em thấy lí do vì cái Bộ AVIM Control. Cài mod Avim control anh có sửa thêm j` ko mà ngon vậy. Cho em xin mod bản của anh.
Thankssss

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

hiccc chỉ vì ko để ý nên lại phải hỏi thêm
1. Cái quảng cáo tự code ấy có cách nào để hiện thị all page ko
2. Em thấy forum ko bị lỗi "load khi sửa nhanh bài viết". mà em thấy lí do vì cái Bộ AVIM Control. Cài mod Avim control anh có sửa thêm j` ko mà ngon vậy. Cho em xin mod bản của anh.
Thankssss

Nếu muốn hiển thị ở mọi trang thì bạn chèn code vào teample navbar, chèn cuối cùng đó. Nó sẽ hiển thị ngay dưới thanh menubar. Đối với các mod khác cũng vậy, như mod thống kê, thông điệp yêu thương, chaxbox...khi bạn muốn hiển thị allpage thì chỉ cần chèn vào dưới cùng của teample navbar.

Mình up cho bạn bản AVIM bên dưới. Mình nhớ cũng có lần bị lỗi như bạn, nhưng không nhớ rõ lắm. Hình như là do chèn biểu tượng nhóm (cái hình hiển thị admin, thành viên, mod, smod đó), nên nó bị như vậy, bạn thử bỏ phần đó coi. Nếu không phải thì pm lại mình.

 

[oaichua]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Cám ơn bác nhiều với từ khóa "teample navbar". Mõ mẫm tí giờ đã vừa ý rồi. thanks nhiều. có j` thắc mắc nếu ko phiền xin lại dc hỏi bác. rất mong dc sự chỉ bảo. thanks

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Không có chi. Ak, cái chỉnh màu chữ cho tiêu đề của subforum, cái ban đầu bạn hỏi á, bạn vào teample forumhome_forumbit_level2_post_with_forumicon, tìm đoạn sau.

{vb:raw forum.title}

Thêm vào trước đó một thẻ Font để chỉnh lại màu, vì cái này mình không chỉnh trong stylevar được. Thêm vào như sau

<font color="[B][COLOR=red]màu bạn muốn[/COLOR][/B]">{vb:raw forum.title}</font>

Trong đó bạn thêm vào màu bạn muốn, ví dụ: red=màu đỏ, blue= màu xanh, white= màu trắng.....

 

[anhtun9x]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

may quá,có bác admin để hỏi rùi.e mới tập mò mẫm làm forum,bác giúp e với làm sao cho cái slidebar hiển thị newposter đc nhỉ

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

may quá,có bác admin để hỏi rùi.e mới tập mò mẫm làm forum,bác giúp e với làm sao cho cái slidebar hiển thị newposter đc nhỉ

Bạn vào mục quản lý chuyên mục trong admincp, kéo xuống phía dưới sẽ thấy Forums Blocks Manage chọn add Block, để hiển thị bài mới trong mục Select Block Type bạn chọn Forum Threads, sau đó trong mục Thread Type bạn chọn New Started. Thế là được. Chúc bạn thành công!

 

[anhtun9x]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Bạn vào mục quản lý chuyên mục trong admincp, kéo xuống phía dưới sẽ thấy Forums Blocks Manage chọn add Block, để hiển thị bài mới trong mục Select Block Type bạn chọn Forum Threads, sau đó trong mục Thread Type bạn chọn New Started. Thế là được. Chúc bạn thành công!

thanks bác nhưng e làm theo cách trên cũng ko đc bác à.bác cho em add nick bác có gì em pm nha.nick em là le_anhtuan9x đó bác

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

ok, có gì bạn pm mình qua điện thoại cũng được: 0168.447.2212. Bạn cài teamviewer đi, rồi pm mình, mình làm hộ cho. Vậy nha!

 

[nhokvjpbg]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Cái banner của em nó rộng quá lên trông nó ko gọn với diễn đàn các bác chỉ cho em chỉnh lại cho gọn với 2 gạch đỏ như thế đc ko ạ

Với lại em muốn thay mầu chữ ở các Tad như Diễn đàn Bài mới Trang chủ thành màu đỏ thì làm như thế nào ạ
các bác giúp em với nhé em cám ơn ạ

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Bạn đưa mình cái code của teample hearder mình coi thử nha, để mình chỉnh lại cái banner cho. hình như nó bị lặp lại thì phải. Còn cái chỉnh màu cho mấy cái như bạn nói, thì bạn vào style var, mục Navbar, bạn tìm xong thay từng cái một xem sao, mình chưa chỉnh thử nên không biết chính xác cái nào, cứ tìm cái nào có chữ color phía sau thì vào chỉnh thử. Nếu không được thì Pm mình nha!

 

[nhokvjpbg]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

vak ạ đây code phần header anh giúp em với nhé

<link rel="shortcut icon" href="http://tusononline.net/home/diendan/images/bbcode/icon_tuscon.ico" type="image/x-icon"/>
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<vb:if condition="$notifications_total">
<li class="popupmenu notifications" id="notifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
<ul class="popupbody popuphover">
{vb:raw notifications_menubits}
</ul>
</li>
<vb:else />
<li class="popupmenu nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
<vb:else />
<ul class="nouser">
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
<li>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>
<img src="{vb:stylevar imgdir_icons}/username.png" alt="Username" />
<input type="text" class="textbox" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
<img src="{vb:stylevar imgdir_icons}/password.png" alt="Password" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
<input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />
</div>
</div>
</fieldset>

<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
YAHOO.util.Dom.setStyle('navbar_username', "color", "#828282");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});

function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='black';
}
}

function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='#828282';
}
}

function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);

YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}

function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);

if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
</vb:if>
</div>
<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>

 

[Mr LNA]

Ðề: Stylevar vbb 4.0.x-Hướng dẫn chỉnh sửa giao diện của vbb 4.0.x

Bạn thay đoạn này nha

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Đoạn đó là để chèn logo cho diễn đàn, mặc định chỉnh trong style var, nhưng nó chỉ cho hiển thị nhỏ thôi. Nên bây giờ thay bằng đoạn khác để hiển thị banner. Bạn thay như sau:

<div><img src="[B]link ảnh banner của bạn[/B]" width="[B]Độ rộng banner[/B]" height="[B]độ dài banner[/B]"></div>

Bạn chỉnh độ rộng và chiều dài cho phù hợp nha. Có gì pm lại nha!

 

[hdp_laptop]

Mong admin hướng dẫn dùm cách làm các nút chia sẽ như diễn đàn mình, các nút chia sẽ dành cho postbit trên mang thì nhiều rồi nhưng mình muốn các nút chia sẽ này chỉ hiện duy nhất ở bài viết đầu tiên thôi, các bài reply thì không hiển thị
Nhờ admin hướng dẫn dùm
demo : giống sinhvienthamdinh.com
Cảm ơn