Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 13 Jan 2009, 04:54
Michael Morris's Avatar
Michael Morris Michael Morris is offline
 
Join Date: Nov 2003
Real name: Michael Morris
CSS Dominant Style (No layout Tables)

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.
Reply With Quote
  #2  
Old 13 Jan 2009, 05:20
Bellardia Bellardia is offline
 
Join Date: Jul 2007
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
Reply With Quote
  #3  
Old 13 Jan 2009, 12:33
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
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!
__________________
Former vBulletin.org Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #4  
Old 13 Jan 2009, 13:14
Michael Morris's Avatar
Michael Morris Michael Morris is offline
 
Join Date: Nov 2003
Real name: Michael Morris
Originally Posted by Princeton View Post
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.
Reply With Quote
  #5  
Old 13 Jan 2009, 13:32
nexialys
Guest
 
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.
Reply With Quote
  #6  
Old 13 Jan 2009, 14:23
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
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.
__________________
Former vBulletin.org Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #7  
Old 13 Jan 2009, 14:31
Michael Morris's Avatar
Michael Morris Michael Morris is offline
 
Join Date: Nov 2003
Real name: 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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #8  
Old 13 Jan 2009, 14:38
nexialys
Guest
 
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.
Reply With Quote
  #9  
Old 13 Jan 2009, 14:45
Michael Morris's Avatar
Michael Morris Michael Morris is offline
 
Join Date: Nov 2003
Real name: 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.
Reply With Quote
  #10  
Old 13 Jan 2009, 16:49
Coders Shack Coders Shack is offline
 
Join Date: Apr 2007
Real name: Chad Scira
Originally Posted by nexialys View Post
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.)
__________________
resume: http://chadscira.com/
linkedin: http://www.linkedin.com/in/chadscira
elance (request a proposal): http://icodeforlove.elance.com/
Reply With Quote
  #11  
Old 13 Jan 2009, 19:39
Lizard King's Avatar
Lizard King Lizard King is offline
 
Join Date: Jan 2005
Real name: Mert
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
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 )
__________________
Mert G÷kšeimam / Crawlability Inc.

DepKaš | vBSEO 3.3.0 - vBulletin Search Engine Optimisation
Reply With Quote
  #12  
Old 13 Jan 2009, 20:43
Bellardia Bellardia is offline
 
Join Date: Jul 2007
Originally Posted by Lizard King View Post
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
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.
Reply With Quote
  #13  
Old 13 Jan 2009, 21:11
Lizard King's Avatar
Lizard King Lizard King is offline
 
Join Date: Jan 2005
Real name: Mert
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 )
__________________
Mert G÷kšeimam / Crawlability Inc.

DepKaš | vBSEO 3.3.0 - vBulletin Search Engine Optimisation

Last edited by Lizard King; 13 Jan 2009 at 21:32.
Reply With Quote
  #14  
Old 14 Jan 2009, 01:56
TECK's Avatar
TECK TECK is offline
 
Join Date: Dec 2001
Real name: Floren Munteanu
Congrats Michael, on the good decision. You should sell this style.
__________________
Floren Munteanu
Axivo Inc.
Axivo Community - Visit the forums to find out more about us
Why Queued - My personal blog
Reply With Quote
  #15  
Old 14 Jan 2009, 16:57
Michael Morris's Avatar
Michael Morris Michael Morris is offline
 
Join Date: Nov 2003
Real name: Michael Morris
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 14 Jan 2009 at 20:38 ---------------

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.

Last edited by Michael Morris; 14 Jan 2009 at 20:38. Reason: Auto-Merged DoublePost
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 08:38.

Layout Options | Width: Wide Color: