vBulletin 4 Style...

[Wayne Luke]

Now this is what I am waiting for...

First go into your style manager and look at your header and navbar templates. Got them in your mind now?

Now you're a new user and you want to add a link to your navbar... Where do you add the code?

Now this is the header and navbar for vBulletin 4:


<div id="header">
<div><a href="forumhome.php" id="logo-image"><img src="images/logo.png" alt="" /></a></div>
<div id="toplinks">
<a href="#">Kier</a>
<a href="#">Settings</a>
<a href="#">Log-out</a>
</div>
<hr />
</div>

<div id="navbar">
<ul id="navtabs" class="floatcontainer">
<li><a class="navtab" href="#">Site</a></li>
<li class="selected"><a class="navtab" href="#">Forum</a>
<ul class="floatcontainer">
<li><a href="#">User CP</a></li>
<li><a href="#">New Posts</a></li>a
<li><a href="#">Today's Posts</a></li>
<li><a href="#">Mark all Forums Read</a></li>
<li><a href="#">Subscribed Threads</a></li>
<li><a href="#">Private Messages</a></li>
</ul>
</li>
<li><a class="navtab" href="#">Blog</a></li>
<li><a class="navtab" href="#">Projects</a></li>
<li><a class="navtab" href="#">Calendar</a></li>
</ul>
</div>

<div id="breadcrumb">
<ul class="floatcontainer">
<li class="navbit"><a href="#" name="top">My Site</a></li>
<li class="navbit"><a href="#">Forums</a></li>
<li class="navbit"><a href="#">General</a></li>
<li class="navbit"><a href="#">Off-Topic Stuff</a></li>
<li class="navbit"><a href="#">The Forumdisplay Example Forum</a></li>
</ul>
<hr />
</div>


http://images.vbulletin.com/blog-content/kier/40-style-firstlook/hnbt.png
Personally, I prefer the code above to what is in the navbar and header templates now. What is that you are saying? You don't like tabs and want dropdown menus? Okay... just go edit the CSS and voila, you are done. Want new backgrounds, go edit the CSS and in a couple lines your done. Want to assign little Icons to the links? Yeah, you guessed it, go edit the CSS.

The power and the freedom will be yours. No more worrying whether you need 5 or 6 table cells in a row. No more worrying about tables opened 5 templates ago and closed in yet other templates.

That is what I am looking forward to. If this was the only improvement in vBulletin 4, I would be happy.

[Peggy]

I LOOOOOOOOOOOOOVE IT!!!! :bunny:

Thanks for this preview Wayne. I'll sleep happy tonight :D

[Dave A]

I really like the list approach too :cool:

If this was the only improvement in vBulletin 4, I would be happy.
You're waaaayy too easy to please, Wayne :p

[Wayne Luke]

The other features are nice but really its the style that has been holding vBulletin back. The underlying engine is one of the strongest out there and you can do a lot with it. Making the templates conform to your will though will break a man's soul. That is an exaggeration but the new style will allow sites to break out of the mold a lot easier. Allow newcomers to customize it more and we'll see a lot more user facing innovation over the life of the version. Something that hasn't really happened since the Plugin system was introduced in 3.5.

[Peggy]

my dev board is itching for it.

[Wayne Luke]

As I have an extra license, I am going to install a copy on my site as soon as I get ahold of it to let people play. May even allow Admin Access under specific conditions under Demo Mode.

[Peggy]

kewl :)

[Joeychgo]

Yes, so far I have been impressed by what I have seen of vB 4. I am looking forward to seeing the CMS in operation.

[Sofia]

Nice vB4 style :p

It will be hard to adapt styles 3.8 on 4.0.
I've 2 styles (Imagination & CA Evo) with each 13 XML, so just for two styles, 26 XML.
Long, very long...



and voila

"voila" is a french phrase :p

[Peggy]

I know what you mean Sofia. I have 40+ styles that I have to port over to vB4.
Fun.

[protoss]

<//snipped//>
If this was the only improvement in vBulletin 4, I would be happy.

Ditto. Really looking forward to a demo or the beta.

[Peggy]

I know. I can't wait to get my hands on this.

[Wayne Luke]

Nice vB4 style :p

It will be hard to adapt styles 3.8 on 4.0.
I've 2 styles (Imagination & CA Evo) with each 13 XML, so just for two styles, 26 XML.
Long, very long...


Here's a little tidbit of information that should making styling easier. The default style of vBulletin uses 24-bit alpha-transparent PNG gradients instead of GIF gradients. This means you can apply a new background color via CSS and the gradients will change colors. You won't need new images for 13 different color styles.

Also the majority of buttons (e.g. new thread, quote, reply, etc...) in vBulletin 4 use the <button> tag and are not images. Changing their colors is also as simply as changing the CSS behind their formatting. Rounded corners, gradients, hover effects can all be done with CSS without the need to edit a single image. Makes phrasing them for alternative languages easier as well.

[Big Dan]

Here's a little tidbit of information that should making styling easier. The default style of vBulletin uses 24-bit alpha-transparent PNG gradients instead of GIF gradients. This means you can apply a new background color via CSS and the gradients will change colors. You won't need new images for 13 different color styles.

Also the majority of buttons (e.g. new thread, quote, reply, etc...) in vBulletin 4 use the <button> tag and are not images. Changing their colors is also as simply as changing the CSS behind their formatting. Rounded corners, gradients, hover effects can all be done with CSS without the need to edit a single image. Makes phrasing them for alternative languages easier as well.

Now that's gonna be worth the upgrade.. Especially for graphics numbnuts like me. :D

[Peggy]

Here's a little tidbit of information that should making styling easier. The default style of vBulletin uses 24-bit alpha-transparent PNG gradients instead of GIF gradients. This means you can apply a new background color via CSS and the gradients will change colors. You won't need new images for 13 different color styles.

Also the majority of buttons (e.g. new thread, quote, reply, etc...) in vBulletin 4 use the <button> tag and are not images. Changing their colors is also as simply as changing the CSS behind their formatting. Rounded corners, gradients, hover effects can all be done with CSS without the need to edit a single image. Makes phrasing them for alternative languages easier as well.I'm lovin' it. :D

[Sofia]

Here's a little tidbit of information that should making styling easier. The default style of vBulletin uses 24-bit alpha-transparent PNG gradients instead of GIF gradients. This means you can apply a new background color via CSS and the gradients will change colors. You won't need new images for 13 different color styles.

Also the majority of buttons (e.g. new thread, quote, reply, etc...) in vBulletin 4 use the <button> tag and are not images. Changing their colors is also as simply as changing the CSS behind their formatting. Rounded corners, gradients, hover effects can all be done with CSS without the need to edit a single image. Makes phrasing them for alternative languages easier as well.

Wow !! a good news :) Thank you, Wayne :)

[protoss]

Great news!. Forget the portal and all the other stuff, bring on the new style that will be so much easier to work with and customize. :D