CSS Dominant Style (No layout Tables) [Archive]

View Full Version : CSS Dominant Style (No layout Tables)

Michael Morris

01-13-2009, 03:54 AM

I am currently working on a CSS dominant style that truly flexes the power of CSS. On the plus side once completed designers will be able to use it's templates as a starting point for creating true CSS powered layouts. On the negative using the styleset will make using mods more of a challenge - particularly the ones that have template hooks.

That said here's what I plan.

95% matching layout to the vbulletin normal default. Some mismatches will be tricks possible in CSS that are difficult without - buttons glowing on rollover, CSS 3 dropshadows on the pop ups (Firefox 3.1 and Safari 3.1 only at this time). Some mismatches will be due to improper declarations being changed (pts are for printers, not screens). And then there might be a couple just can't make it match examples, but these will be kept to a minimum.
Except in IE 6 the popup javascript that vbulletin ships with will be turned off in favor of CSS popups which are faster and more responsive than their javascript equivalents. IE 6 will continue to use the javascript because it doesn't respect li:hover.
Three primary stylesheets for browsers that can pass the Acid 2 test, IE 7 and IE 6. No other browsers will be supported by this styleset (that includes Firefox 2 not being supported). The IE stylesheets will be corrective sheets in nature.
All images will be selected from CSS. The images that will ship with the skin will be 32-bit png files and gif files for Suckernet Exploder 6.

Keep in mind this will be a rather massive template set. Almost every single template in vbulletin will need to be edited (and there are around 800 of them). I expect to be ready to start beta in a couple weeks. I had intended to do this earlier, but vb 3.8 got announced.

Bellardia

01-13-2009, 04:20 AM

Keep in mind that you may also have to recode a lot of javascript :( I've seen a lot of selectors based on html table tags.

While I feel like this is a good idea, it's benefits may not out weigh the time it takes to do (since there aren't really any benefits except from creating a semantic markup and some stylistic issues).

I just recommend reusing selectors as much as possible, while probably already considered by you, just remember that styling a board that has over 100-200 selectors would take a very long time.

I encourage you to go forward and would help design styles to gather support for this, provided it's not more difficult than current vb :)

Princeton

01-13-2009, 11:33 AM

I agree with Bellardia. There's a lot of javascript that you will need to alter. (the main reason why you don't see any vbulletin CSS tableless layout)

If you're releasing it to the public be prepared for a lot of support - for each vbulletin upgrade.

If this is a personal project - be prepared to spend 3 times as much on a typical upgrade.

I've been down this path. At first it's fun and challenging; but the upgrades really get to you after a while. There's also the issue of making it compatible between all browsers (and versions).

Personally, I want you to continue. The more vbulletin CSS tableless layouts the better the future looks for vbulletin.

GO FOR IT!

Michael Morris

01-13-2009, 12:14 PM

I agree with Bellardia. There's a lot of javascript that you will need to alter. (the main reason why you don't see any vbulletin CSS tableless layout)

I've written massive javascript applications so this doesn't intimidate me - but depending on how much has to be fixed I might start over with a prototype base instead of the yui base that vbulletin ships with.

If you're releasing it to the public be prepared for a lot of support - for each vbulletin upgrade.

That's one of the reasons I've waited until this late in vbulletin's life cycle.

If this is a personal project - be prepared to spend 3 times as much on a typical upgrade.

I've been down this path. At first it's fun and challenging; but the upgrades really get to you after a while. There's also the issue of making it compatible between all browsers (and versions).

Acid 2 or forget them. IE 6 and 7 are the only exceptions that I'm going to give - and if IE 6 gives me too much trouble it will be cut as well.

Personally, I want you to continue. The more vbulletin CSS [I]tableless layouts the better the future looks for vbulletin.

GO FOR IT!

I'm not sure it will be completely tableless. Tabular data, like thread lists, should go into tables. However the nested table after nested table situation that we currently have would be gone.

Last night I got through the navbar - that was a headache. However I have the rollovers working via CSS alone. I haven't tested the IE's yet and probably won't for awhile.

I will probably release this in alpha state with a milestone list.

nexialys

01-13-2009, 12:32 PM

actually, the CSS driven MooTools javascript engine is far more powerful than the actual vB js scripts for the menus, and you do not need any javascripts inserts in your html to make them work... so if you want to go with it, it will give you better popups and rollovers effects... you then can drop some .js from vbulletin itself when you're done.

i've done this path, and at the opposite of Princeton, it was not that complicated to execute... upgrades are to be done in a lot of other occasions anyway, so why not... there is a compare templates engine in vBulletin, that's ok. the best thing to do then is to create a child of the actual default style, and do not update it when you upgrade your forum... compare the changed templates and apply these changes to your own CSS-driven style. will cost way less than upgrade at first.

if you are the one to create your CSS driven style, you will know it by heart so when it's time to upgrade vB, you will be aware of all the needed changes anyway... the people who have problems are the ones who hire a designer and loose it before an upgrade.

Princeton

01-13-2009, 01:23 PM

i've done this path, and at the opposite of Princeton, it was not that complicated to executeit has nothing to do with "complications" - it's a matter of determining what's best time wise dollar for dollar

if you have a lot of time in your hands than it doesn't matter

Regardless of what you say
- You will be spending more time on upgrades.
- You will be spending more time on learning other scripts, APIs, etc.

When all things are done ...
your viewers will care less if a site is CSS tableless or not. What they want is fresh content on a fast site - nothing more; nothing less.

I agree with Michael (not sure if it was in this post)...
things will be changing next year for the better. Technologies are evolving. Older browsers are disappearing. Browsers are becoming faster (eg. Firefox BETA). Broadband connectivity increasing.

Personally, I don't think now is the time for a vbulletin CSS tableless layout. There's just too many issues to address.

The biggest issue I see is making the style accessible to all. Many corporations are still using IE 4, 5, 6. To me, this is very important - every reader that does not have access to the site is a potential LOSS.

----

PREDICTION: By the end of next year, you will see an explosion of vbulletin CSS tableless layout.

Michael Morris

01-13-2009, 01:31 PM

Here's the navbar template redone. This one is probably one of the more difficult. It's 95% done that is - I still need to work with notifications and move the page nav to where they belong rather than here.

<div id="navigation" class="tborder alt1">
<div id="breadcrumb">
<if condition="is_array($navbits)">
<ul>
<li class="start"><a href="#" onclick="history.back(1); return false;">Go Back</a></li>
$navbits[breadcrumb]
</ul>
<div>$navbits[lastelement]</div>
<else />
<li class="start"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">Home</a></li>
<li class="end">$vboptions[bbtitle]</li>
</if>
</ul>
</div>
<if condition="$show['member']">
<div id="memberData" class="alt2 smallfont">
<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

<if condition="$show['notifications']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show['popups']">
<script type="text/javascript"> vBmenu.register("notifications"); </script>
<else />
<script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications"); </script>
</if>
<else /><if condition="$show['pmstats']">
<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>

<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
</div>
<else />
<div id="navLoginForm" class="alt2 smallfont">

<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<div>
<div class="rememberMe"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></div>
<label for="navbar_username">$vbphrase[username]</label>
<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" />
</div>
<div>
<label for="navbar_password">$vbphrase[password]</label>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" />
<input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
</div>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$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>

</div>
</if>
<div class="clear"></div>
</div>
<div id="navbuttons" class="tborder">
<ul>
<if condition="$show['member']">
<li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li>
</if>
<if condition="$show['registerbutton']">
<li><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></li>
</if>
$template_hook[navbar_buttons_left]
<li><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></li>
<if condition="$show['communitylink'] AND $show['popups']">
<li><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <if condition="is_browser('ie') AND is_browser('ie', '6.0')"><script type="text/javascript"> vbmenu_register("community"); </script></if>
<div id="community_menu">
<ul>
<li class="heading">$vbphrase[community_links]</li>
$template_hook[navbar_community_menu_start]
<if condition="$show['quick_links_groups']">
<li><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></li>
</if>
<if condition="$show['quick_links_albums']">
<li><a href="album.php$session[sessionurl_q]">$vbphrase[pictures_and_albums]</a></li>
</if>
<li><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></li>
<li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
$template_hook[navbar_community_menu_end]
</ul>
</div>
</li>
<else />
<if condition="$vboptions['enablememberlist']">
<li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
</if>
<if condition="$show['quick_links_groups']">
<li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li>
</if>
</if>
<li><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></li>
<if condition="$show['popups']">
<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>
<li><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch'] AND is_browser('ie') AND is_browser('ie', '6.0')"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if>
<div id="navbar_search_menu">
<ul>
<li class="heading">$vbphrase[search_forums]</li>
</ul>
<div>
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
<div>
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</div>
</form>
</div>
<ul>
<if condition="$vboptions[threadtagging]">
<li><a href="tags.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a></li>
</if>
<li><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a></li>
</ul>
$template_hook[navbar_search_menu]
</div>
</li>
</if>
<if condition="$show['member']">
<li><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <if condition="is_browser('ie') AND is_browser('ie', '6.0')"><script type="text/javascript"> vbmenu_register("usercptools"); </script></if>

<div id="usercptools_menu">
<ul>
<li class="heading">$vbphrase[quick_links]</li>
<if condition="$vboptions['enablesearches']">
<li><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></li>
</if>
<li><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></li>
<li><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></li>
$template_hook[navbar_quick_links_menu_pos1]
$template_hook[navbar_quick_links_menu_pos2]
<li class="heading"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></li>
<if condition="$show['siglink']">
<li><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></li>
</if>
<li><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></li>
<li><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></li>
$template_hook[navbar_quick_links_menu_pos3]
<li class="heading">$vbphrase[miscellaneous]</li>
<if condition="$show['pmmainlink']">
<li><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></li>
</if>
<li><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></li>
<li><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></li>
<if condition="$show['wollink']">
<li><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></li>
</if>
$template_hook[navbar_quick_links_menu_pos4]
</ul>
</div>
</li>
</if>
<else />
<if condition="$show['searchbuttons']">
<li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li>
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>
</if>
<li><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></li>
<if condition="$show['member']">
<li><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></li>
</if>
</if>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<li><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li>
</if>
</ul>
</div>

<if condition="$show['notices']">
<form action="profile.php?do=dismissnotice" method="post" id="notices">
<input type="hidden" name="do" value="dismissnotice" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" id="dismiss_notice" name="dismiss_notice" value="" />
<input type="hidden" name="url" value="$return_link" />
<div id="notices" class="tborder">
<div class="thead">$vbphrase[notices]</div>
<div class="alt1">$notices</div>
</div>
</form>
</if>

<if condition="$show['forumdesc']">
<div id="forumDescription" class="tborder">
<div class="alt1"><strong>$foruminfo[title]</strong> <span class="smallfont">$foruminfo[description]</span></div>
</div>
</if>

$ad_location[ad_navbar_below]


<if condition="$show['popups']">

<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
<div class="heading">$vbphrase[go_to_page]</div>
<form action="$vboptions[forumhome].php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
<input type="text" class="bginput" id="pagenav_itxt" style="font-size:11px" size="4" />
<input type="button" class="button" id="pagenav_ibtn" value="$vbphrase[go]" />
</form>
</div>

</if>

<if condition="$show['member'] AND $notifications_total">

<div class="vbmenu_popup" id="notifications_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead" colspan="2">$vbphrase[your_notifications]</td></tr>
$notifications_menubits
</table>
</div>

</if>

nexialys

01-13-2009, 01:38 PM

Michael Morris

01-13-2009, 01:45 PM

If someone wants to go out of their way to make the site illegible for themselves screw them. Honestly, I'm not catering to every screwball configuration possible and every browser made for every computer since Mosiac 1.0 running on Trumpet WinSock for Windows 3.1. I've said it before - Acid 2 compliant, IE 7 and IE 6. That's 99.9% of the market. I'll give up the last .1%

The lists exist because they aid text-readers for the blind in sorting out the content.

Coders Shack

01-13-2009, 03:49 PM

remember that if you put a lot of UL in your header/navbar and someone visit your site with CSS deactivated, he will see a lot of lists of links on top of the page and will have to scroll a lot to see the content of your site... tables are not doing the same effect.
lol and who browses with CSS deactivated?

CSS is turned on for a better user experience... If they user doesn't have it on or cant enable it because their browser sucks. Then that sucks for them... (I'm a developer for a large company and we dont care what it looks like without CSS, as long as its readable for the search engine... and when CSS is on it has to look amazing.)

Lizard King

01-13-2009, 06:39 PM

Bellardia

01-13-2009, 07:43 PM

I've been using css based templated nearly for 2 years now. It is not really hard to accomplish removing all the tables and maintain the style. But if you are an upgrade maniac and try to follow every vBulletin upgrade you'll hate Jelsoft on each upgrade :D
Thats why i usually donot upgrade to latest versions and on each major release instead of working all the templates i decide to create a new style from scratch. But i never care to keep the look of vBulletin as i dont like it at all and without very carefull eyes my styles cannot be recognized as vBulletin ( the current one i use is half way done and it has the closes look to vBulletin )

Don't get me wrong your template is nice, but I wouldn't call it CSS based. I checked your sources and on your showthread template had the word table included 99 times. Your other pages didn't seem to have that many less tables either. Unless you have another style I would call it CSS styled not css based.

Lizard King

01-13-2009, 08:11 PM

Next time before responding me , please try to read the entire post.

( the current one i use is half way done and it has the closes look to vBulletin )

TECK

01-14-2009, 12:56 AM

Congrats Michael, on the good decision. You should sell this style.

Michael Morris

01-14-2009, 03:57 PM

I don't intend to sell it by itself - I do intend to sell sheets based off of it. I want it to be public as a foundation template set for multiple styles where users can just plug in the appropriate style sheet and be done with it.

I am considering adding some extra default divs, particularly for the header and footer, that will make the creation of decorative gutters and wraps easier to do.

--------------- Added 1231969104 at 1231969104 ---------------

Noting an idea here so I don't forget it. In the header I'm going to add a master wrapping div. However, the id of that div will be

<div id="forumPage_$forumid">

What this means is that with proper css selector use you can create unique look variations for each forum from one style sheet without using different style sets. For example, if you want the navigation to have a red background on one forum the css would be

#forumPage_5 #navigation .alt1 { background: #f00; }

There's a lot of fun that can be had with this.