CSS Dominant Style (No layout Tables)

[Michael Morris]

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]

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]

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]

Originally Posted by Princeton

I agree with Bellardia. There's a lot of javascript that you will need to alter. [I] (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 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.

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]

Originally Posted by nexi

i've done this path, and at the opposite of Princeton, it was not that complicated to execute

it 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]

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.

PHP Code:

<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">
    <!-- login form -->
        <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>
        <!-- / login 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&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=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&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=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&amp;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]

<!-- This stuff still needs work. -->
<if condition="$show['popups']">
<!-- PAGENAV POPUP -->
    <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>
<!-- / PAGENAV POPUP -->
</if>

<if condition="$show['member'] AND     $notifications_total">
<!-- notifications menu -->
<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>
<!-- / notifications menu -->
</if> 


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.

[Michael Morris]

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]

Originally Posted by nexialys

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.)