vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   Programming Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=188)
-   -   Design VBB styles - Lesson 1 (https://vborg.vbsupport.ru/showthread.php?t=115716)

vbviet 05-15-2006 10:00 PM
Design VBB styles - Lesson 1
 
1 Attachment(s)
Design VBB styles - Lesson 1:Fixing Default Style
Do you want design a vbb styles ? ^^ Reading this tutorial .I think it's very useful to you .Now we must view this job
http://www.vongtaythanai.net/img/uploads/9c209d7207.jpg
Lession 1 : Fixing Default Styles
Split css :
-After setup Default styles ,open notepad , copy and save it
Quote:
body
{
background: #E1E1E2;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
padding: 0px;
}
a:link
{
color: #22229C;
}
a:visited
{
color: #22229C;
}
a:hover, a:active
{
color: #FF4400;
}
.page
{
background: #FFFFFF;
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: #D1D1E1;
color: #000000;
border: 1px solid #0B198C;
}
.tcat
{
background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{
background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link
{
color: #FFFFFF;
}
.thead a:visited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active
{
color: #FFFF00;
}
.tfoot
{
background: #3E5C92;
color: #E0E0F6;
}
.tfoot a:link
{
color: #E0E0F6;
}
.tfoot a:visited
{
color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active
{
color: #FFFF66;
}
.alt1, .alt1Active
{
background: #F5F5FF;
color: #000000;
}
.alt2, .alt2Active
{
background: #E1E4F2;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #F5F5FF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
color: #666686;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #3E5C92;
color: #E0E0F6;
}
.fjdpth0
{
background: #F7F7F7;
color: #000000;
}
.panel
{
background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
background: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left;
color: #000000;
}
legend
{
color: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #738FBF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #BBC7CE;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
-Save with filename thietlapmau.css
-In headinclude template .Search $style[css] and replace
<link rel="stylesheet" href="thietlapmau.css" type="text/css" />
-Up file thietlapmau.css in root forum.Ex: http://yoursite.com/forum/thietlapmau.css .
It's not important but split css is very useful to manage or edit css file :)

Delete outer pages (grey area) :
You can del grey area outer pages .Open thietlapmau.css and find in body class

margin: 5px 10px 10px 10px change it to margin: 0px 0px 0px 0px .Save and F5 to load it again
Delete logo in header:
-In header template search :
Quote:
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">

</td>
</tr>
</table>
Delete it .We need more space to add banner :)

===========================

Optimize footer:
-In footer template search
Quote:
<br />
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>
<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
Delete .Next search :
Quote:
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
Add below:
Quote:
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>
<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
View this styles again .Your footer will better than default styles :)

Optimize statusicon:
-3 icon need mất 3 line .It's not well .Optimize it ,you can get new look
-In Forumhome template search:
Quote:
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->
Replace with:
Quote:
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom" align="center">
<td>
<table cellpadding="2" width="70%" class="tborder" cellspacing="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
</tr><tr>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><br><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
Done ! 3 icon in 1 line :D Is it better than old ? ^^

Move "Mark Forums Read & View Forum Leaders" below Statistics area
-In Forumhome template .Search:
Quote:
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
Move it above.
Quote:
</table><br />
<!-- end what's going on box -->
Split the catelogy :
-I'll teach you a basic split :) We have more cases but this is a easy case
-Go to FORUMHOME template ....At first we'll split reg area
Search:
Quote:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
Add below
</table>
-Search next
$forumbits </table> .
Delete </table> tag .Move 2 if tags (red color) outer.Meaning:
Quote:
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</tr>
</thead></table></if>

==================================


Next we'll split catelogy box
-In forumhome_forumbit_level1_nopost add above all template:
Quote:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
Next add below all template:
Quote:
</table><br>
Move thead area below tcat:

-In forumhome template ,search:
Quote:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Delete ..... Go to forumhome_forumbit_level1_nopost template search:
Quote:
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
Add below:
Quote:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Done ! F5 to view your styles :D
Move up the description
-In forumhome_forumbit_level1_nopost search:
Quote:
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
Replace with:
Quote:
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><font class="smallfont">- $forum[description]</font></if>
Join some catelogy column :
Default styles is more column (5column) .Very redundant :D We'll join to 3 column ^^ You know my current style have 1 column ^^
https://vborg.vbsupport.ru/showthread.php?t=115556
-Next the job,in forumhome_forumbit_level1_nopost search:
Quote:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Replace
Quote:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
</tr>
Next, go to forumhome_forumbit_level1_post replace all code with:
Quote:
<tbody>
<tr align="center">
<td class="alt1Active" colspan="2" align="$stylevar[left]" id="f$forum[forumid]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td><img src="$vboptions[cleargifurl]" alt="" width="9" height="1" border="0" /></td>
<td width="100%">
<fieldset style="padding: 10px;"><legend style="background: rgb(250, 250, 250) none repeat scroll 0%; padding-bottom: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></legend>
<div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[threads]</b>: $forum[threadcount]</td>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[posts]</b>: $forum[replycount]</td>
<if condition="$forum[moderators]"><td class="alt1" nowrap="nowrap"><b>$vbphrase[moderator]:</b>$forum[moderators] </td>
</if>
</div>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody>
$childforumbits
</tbody>
</if>
Next,go to forumhome_forumbit_level2_post and replace all code with:
Quote:
<tr align="center">
<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
<fieldset style="padding: 10px;"><legend style="background: rgb(250, 250, 250) none repeat scroll 0%; padding-bottom: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></legend>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="4" style="padding-bottom: 5px;">
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
<tr>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[threads]</b>: $forum[threadcount]</td>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[posts]</b>: $forum[replycount]</td>
<if condition="$forum[moderators]"><td class="smallfont"><b>$vbphrase[moderator]:</b>$forum[moderators] </td>
</if>
</tr>
</tbody></table>
</fieldset>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
</tr>
$childforumbits
-In FORUMDISPLAY .Search:
Quote:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Replace with:
Quote:
<tr align="center">
<td class="thead" colspan="2" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
</tr>
Finish! View your work :D
http://www.vongtaythanai.net/img/uploads/549f3f354c.png


(will be continued: Lesson2: CSS in vbulletin ...)

Zachery 05-16-2006 02:47 AM
So whats the point of removing the css and saving it as an extrenal file, when you can do it by default?

vbviet 05-16-2006 02:50 AM
Note:
-Thu gọn header : Optimize header
-Đưa l?n :Move up
-Chuyển xuống :Move down
-T?ch box: Split catelogy
-Gom c?c cột lại : Join column
-Thu gọn lại ,canh bỏ giữa : Optimize and align center
-Chuyển l?n tr?n:Move up

Quote:
Originally Posted by Zachery
So whats the point of removing the css and saving it as an extrenal file, when you can do it by default?
It's in thietlapmau.css .I put in root forum .When using private css file using css tool to edit it .I use topstyle pro to edit .You know I do this in 15 minites :D
http://www.vongtaythanai.net/4rum/img/ps3.png => Only using css file :)

PennylessZ28 05-16-2006 03:51 AM
Wow if I understood half of that and it was in English....

Zachery 05-16-2006 05:48 AM
You can also load your own custom CSS in the Style Manager at the bottom of the page.

Rich 05-19-2006 10:13 PM
I think he did it this way because the file itself can be editted directly without having to use the acp.

Zachery 05-19-2006 10:15 PM
Also means you'd always need ftp access to change things/

vbviet 05-20-2006 01:25 AM
:D I make styles in localhost .No need ftp acess .Use private css file and edit template in acp .Making a styles is very quickly .Acp isn't support css better than topstyle pro :)

arindra 06-06-2006 01:10 PM
liked this tut very much ... but all other links / tutes in ur site are all in vietnamese :(

Bubble #5 06-06-2006 05:29 PM
Quote:
Originally Posted by arindra
liked this tut very much ... but all other links / tutes in ur site are all in vietnamese :(
Yes we agree. It's not very useful if it's not in English :confused:

Revpolar 06-09-2006 11:47 AM
I for one followed your directions and loved the outcome. Looks great.

melefire 06-11-2006 12:59 AM
Hopefully people will make awsome styles with this guide then i will not have to make my own!!

vbviet 06-11-2006 04:51 AM
Quote:
Originally Posted by Bubble #5
Yes we agree. It's not very useful if it's not in English :confused:
I'll continue translate but I have some problem I don't know how to translate it..... I need a person can explain for me something :tired: Please PM me or contact in YIM :kusanagi.naruto :) Thanks all ...

Revpolar 06-11-2006 05:24 AM
++++++, I had an idea that would work into your styles possibly. In the last post column could it be coded to a scrollbar with last 10 post in that forum?

RFViet 06-13-2006 07:41 PM
Quote:
Originally Posted by vbviet
I'll continue translate but I have some problem I don't know how to translate it..... I need a person can explain for me something :tired: Please PM me or contact in YIM :kusanagi.naruto :) Thanks all ...
Good Tut, what parts you want to translate ??

vbviet 06-15-2006 02:02 PM
You can view all tutorial in vbviet.org
http://vbviet.org/forums/tutorials.php?do=view&tutid=15

I've written 4 lesson . Actually ,it's vietnamese ..... X_x

captainslater 06-18-2006 06:44 PM
On the screen the backgroundcolor of the 'Main Forum', 'aaaaa' and 'bbbbb' is white (#FFFFFF). Where can I change this?

vbviet 06-21-2006 01:01 PM
Quote:
<fieldset style="padding: 10px;"><legend style="background: rgb(250, 250, 250) none repeat scroll 0%; padding-bottom: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
Fix it here :)

captainslater 06-24-2006 03:59 PM
Ok thx for this.

After doing the redesign via your tutorial it doesn't look like on the screens.
So the translation would not make much sense, hm?

See http://www.crime-time.at for the result.

'Split category', 'Move down the forum/last post column', 'join column' and rearrange the subforums in one row doesn't work. I don't know what went wrong, maybe I don't understand your instructions?

baby9x 08-05-2006 11:13 PM
Uhm! Very simple and useful!
And I think we can use some effect in CSS: (You can open Notepad and try them :))
Quote:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">Alpha</span>
Quote:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">Blur</span>
Quote:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">Shadow</span>
Quote:
<span style="width: 300; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: FlipV">Flip</span>
Quote:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">Glow</span>
Quote:
<span style="width: 300; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Gray">Gray</span>
Quote:
<span style="width: 387; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Invert">Invert</span>
Quote:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">Mask</span>
Quote:
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">Color Shadow</span>
Quote:
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=10, Strength=10)">Wave</span>
Quote:
<span style="width: 300; height: 30; font-size: 18pt; font-family: Arial Black; color: red; Filter: Xray">X ray </span>
Quote:
<span style="width: 357; height: 20; font-size: 18pt; font-family: Arial Black; Filter: Mask(color=#FF0000) Shadow(Color=#0000FF, Direction=225) Chroma(color=#FF0000)">The truth of a thing is the feel of it, not the think of it.</span>

oninuva 08-06-2006 12:09 PM
The Site Dont Work?

amnesia623 08-09-2006 05:11 PM
Quote:
Originally Posted by Zachery
So whats the point of removing the css and saving it as an extrenal file, when you can do it by default?
I do this because other areas of my site share the same styles as VBulletin. For instance I have a business directory that integrates users, but not styles. I just attach the style sheet, change the class ids in the business dir app and it's set.

Klaymen TK 08-27-2006 08:07 PM
Great tut man. Thanks for it.

Retell 10-03-2006 04:26 PM
Thanks, I have been looking to split up my forum index! :D

vbviet 10-04-2006 05:11 AM
http://itvns.net/upload/itvns/Lesson1.rar
http://itvns.net/upload/itvns/Lesson2.rar
http://itvns.net/upload/itvns/Lesson3.rar
http://itvns.net/upload/itvns/Lesson4.rar
http://itvns.net/upload/itvns/Lesson5.rar

Lesson 2,3,4,5 are avaible but i don't have free time to translate .....Please contact if you like do it . I'm very busy and my eng isn't well to do it well .... T^T I have movie tutorial ,too .But it's very heavy to show here (Bandwidth isn't enough for everyone to download) ,PM me to get this link if you like this movie....

Sincerely , Kusanagi

letsjoy 10-05-2006 01:28 AM
cool...

ikorolis 10-06-2006 10:18 PM
1 Attachment(s)
Hi guys how can i fix only this bar by the default???

vbviet 10-08-2006 02:38 PM
Replace it with:
Quote:
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->

ikorolis 10-08-2006 04:19 PM
I Replace

Quote:
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->
This but which code i must replace???


All times are GMT. The time now is 03:54 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01941 seconds
  • Memory Usage 1,939KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (44)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (29)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete