Styling vB4 is a lot harder than styling vB3
 

I really dislike the default skin for the new vBulletin because it is much harder to customise. There is about 10x more CSS in VB4 versus VB3, and because the developers decided to avoid tables, the CSS is complicated and unintuitive. The total amount of CSS for a typical page in VB4 is around 70 KB whereas VB4 uses only 5 KB of CSS, this means you've got to do around 10x more work.

What would be awesome is for someone to create a skin for VB4, which uses a single and small CSS file, as with vB3. This could be a table based skin. Designers could then use it as a base to build upon.

What are other people's thoughts on this? Have you tried customising vB4's skin and run into the same kind of trouble?

Matt

Tables are dead and gone and they have been for ages. CSS is more customizable, SEO friendly and the standard for web design. If vbulletin went back to basing the design on tables I'd never buy another license.

I don't have problems customising the look of vbulletin4. Many changes can be made in the stylevar system and others just require the use of the search in templates function and additional.css template in conjunction with something like firebug (google it) to find what you need to edit.

I can only say that vB is now buggy more than ever regarding style, and there are compatibility issues with different browsers from version to version.

Tables + CSS may be better solution, but we are not who decide about this anyway.

I agree that CSS and divs, etc. are the new way of doing things but tables have worked well for forums for a very long time. Even though you say you've had no trouble with it, it is still a lot more work than vB3.

I have firebug too, one of the biggest problems I found was the way the CSS gets munged into a single file (style.php) or a small number of files (x-rollup.css) by the new vBulletin. Once you've identified lines of CSS code you want to change in Firebug, it's hard to identify the template that needs changing, it would be really nice if there was a special mode which includes each CSS template as a seperate file, for development purposes, but of course they haven't thought about that.

And seriously, additional.css is the messiest thing ever. We are told to override existing CSS, i.e. hack innefficiently. We should be changing the CSS at the source, and there should be an easy way to do it.

You could just go in and change up all the code but I prefer additional.css so I can track all the coding changes I have made.

I never said it was easier than vb3, but you (or atleast I) can still achieve desirable results with a bit of work. It takes me a day or 2 to pop out a nice looking theme.

The best way to use firebug and find the code is to copy the class or id name you want to make changes to, go to the vbulletin templates menu and select search in templates.

It will bring you up a list of templates which include the class name, you look in the CSS section of templates and from there you should be able to fairly easily find the template you need to edit.

I think styling on the new 4.x is a LOT easier then before
you know have a style generator, you can literally make 1 dozen new and unique stiles in 30 mins.

If you're not fussed about the details then sure, you can.

Use the generator and then just work on all those details, surely it would still save time.

Seems to me (and I mean this in the nicest way possible) that you're just frustrated with learning a new styling system and immediately put the blame on vbulletin.

I've worked with a few forum systems and nothing is as simple as a few colour palletes and mouse clicks if you're after perfect results.

Many of us are able to easily use the style system and with a little learning/adjusting you'll find the same.

Have you managed to complete a theme yet?

that was just an example
it's easy to customize vb4.0 even after using the style generator ;)

I would argue that point. I wouldn't say new styles. Sure you can make 100 new color schemes in a hour, but I wouldn't really call it restyling the page.

Yeah I have my complaints about vB4 styling vs vB3. For the most part vB3 was so simple to customize a caveman could do it. That?s my main gripe about vB4. However, vB4?s way of doing things allow for SOOO much more power over little individual items. What has me most miffed are what I perceive as being bugs with certain stylevars depending on the browser you use. One I am struggling with at the moment is I believe the threadbit_background stylevar. If I set the background image properly in the image line then everything displays fine in FireFox for example. In forums there are backgrounds behind the individual thread entries as they should be. I go check it in IE and they are there. I found a fix for this. Put the url(/images/whateverimage.png) line in the color bar and vwallah now the backgrounds show properly in IE. But wait!!! Now they are broke in FireFox and Chrome ? /facepalm. I haven?t figured out how to fix this one yet.

Another thing I am having issues with, and this I think is more browser related, is that the shadow variables don?t do anything for IE. They work properly in FF and Chr but not IE.

Yeah, those are the moz-x / webkit-x style attributes. It's impossible to get those bits of CSS to work in IE. They don't work in IE because they are kind of proprietry for webkit and firefox, they will be properly introduced in CSS 3. I wasn't very impressed when I saw the vBulletin were using these, as IMO a site should look the same in different browsers.

I was kind of stunned when I just tried to change the color of various elements. Some colors can be changed in style vars, others in templates. Some colors are even not defined at all, so changing i.e. the background color of the forum to black, one will have black text drowning in black background as some text boxes are just transparent. Some colors are specified in rgb(x,y,z)-syntax, others as #xxyyzz hex color codes which makes it quite difficult to find an replace colors all over the forum. Apparently, there is no logic at all behind the style system.

Admittedly, the longer I work with vB4, the more I am disappointed - and that's not just about the styles.

For me personally as a designer, when I first saw the vB4 stylevar system in the early alpha testing, I immediate disliked it. I have only gone back to it when working on clients' sites.

It's a pathetic mess and vBulletin (as an entity) should really be embarrassed by it IMO. And intriguingly enough - not much has changed from the alpha to beta to vB 4.0 Gold to vB 4.1 as far as I'm concerned. Admittedly - I have not tested the 4.1 series - but from what I've heard = YUCK!

A little tongue-in-cheek (but not really) ==> vB 4 should now almost be ready to be sold as a "gold" version. Wouldn't it be funny if we woke up tomorrow, only to read that the vB.com announcement of the day is that 4.0 Gold is now ready for purchase after a year and a half long testing phase...? NIGHTMARE!

Jacquii.

Speak for yourself. I vote with my dollars.

The table vs css thing has been around for a while and irrelevant to me. I pay for such a product so I don't have to think about these things. What I need is a product that "works".....which means I can build a huge community with the least amount of technical distractions.

The Stylevars would have been a fine system in 2001. A decade letter it's about the most inefficient manner for working that I can think of. In fact, I believe the vb3 system was superior. I could style a forum in an hour. The new method has taken me 30 so far and I'm still not happy.

Lack on inherit styles on the font end is INSANE.

Sometimes keeping fontsize on it's own and then other times including it under font is INSANE. Pick one. Stick with it. (I prefer the latter.)

The ability to view and change multiple css options at once seems to intuitive, that I'm tempted to develop a conspiracy theory as to why it was omitted.

Creating a little preview thing with stock data that updates real time via Regex or equivalent is something that could be developed in an afternoon for $80 using a guy on Odesk. In fact, I regret not having this created specifically for me before going into this theme change!

This "bit of work" is the problem. I don't have an issue with work. It's rare when I'm not putting in 18 hours. It's WHAT I'm working on. Walking is work, too. That's why we have cars and planes. I feel like I'm back to using a horse right now.

The same progressive viewpoint that leads to table-less css should be driving vBulletin to be as efficient as possible in achieving the webmaster's goals. vB4 is a step backwards in this regard so far.

Maybe. It's NOT easy when you have an old theme you want to match. I played with the style generator for 2 hours and never got anything that looked acceptable to me. That's subjective, I guess.

Definitely! It seems that if two web guys with any skill at all got together to create their dream setup, it would take them about 4 hours to put together something amazing, fast, ultra-flexible, and simple. The fact that 4 hours was not taken for something so important makes me wonder what else was thrown together on a whim with no thought.

Great! I really need an all-in-one solution for CMS, forum, etc. I wonder what else is out there.

What's interesting is it's not like they created a dumbed-down system so that anyone could create a theme. (I'm thinking the ol' Myspace layout generators.) I would have hated that, too. It seems the Stylevars system is bad for laymen and us experienced dudes.

"Embarrassed" is just a start. I'm wondering how many of us it would take demanding our money back to get them to actually give a damn about their software again.

Brandon

Well, I believe that in many cases "less" actually is more. In the meantime I've continued my work on my skin. I don't know how often I've come across hard-coded color codes - or something like "background: white" instead of referencing to a style variable for some default background.

Also, there are some tab-like links in a user's profile (about me, user messaging, friends, ...). Similar tabs can be found in the calendar to switch between yearly, monthly, weekly and daily views. Those tabs look different! And, what a surprise, they are defined in completely different places in a completely different way. Why don't use the same style sheet definition for both tabs?

To me it appears as if the developers were working on their own - not caring what the others were doing. I don't claim them guilty for this mess, the responsibility lies within the software management, those few guys that created functional and/or technical designs for the developers to work with.

That product definitely is not in a state which allows it to be sold as a completed software package. That's not even alpha stage, 'cause every serious management would have rejected that crap immediately and started all over again...

You probably have guessed it, I really am quite disappointed...

There are some things that you cannot do with CSS, no matter how hard you try. That is where the tables and tds come in handy.

You know, I've only worked with vB4 styles a little bit. And I while I kinda see the issue, I also kinda don't see the issue. I mean, sure, it's not the easiest thing the world. But then, when I got into vBulletin, it took me years to figure out what the CSS options did, too. Sure, I didn't know what I was doing back then, but from my perspective, the only thing I'm really seeing is I have something else I have to learn. Which pretty much is the story of my life when it comes to coding in general. Nothing has changed for me. And even the CSS in vB3 doesn't do what I want it to a lot of the time. It's just familiar. Not necessarily better.

I do have to disagree with Boofo in this last post, though. I'm convinced you can do anything you want in CSS that you could do with tables. The only difference, you won't necessarily be able to do it easily. Or quickly. Or within the year. But I've almost always found a solution if I look long and hard enough. The week long breaks in between notwithstanding.

I think as much as CSS may be the standard, we're still just not used to it. It's still the horseless carriage to our stagecoach. Faster, more modern, but not as friendly or as easy to brush.

Gotcha on this one. Try lining up a left column and right column in CSS like you could with TDs (like in the attached pic where the dates can vary in length). It won't happen with CSS no matter how hard you try.

I'm not sure what you mean, exactly. Do the two columns need to do anything special other than be side by side?

Yes, they both need to line up on the left of each column. Like in the pic. If one date is long, the second column will adjust for it so they are all even. You can't do that with CSS. I have searched all over the net, and that is what the consensus is from anyone and everyone.

Oh, I know what you're referring to. Getting the inner DIVs to resize. I can get equal size columns pretty easily, but there's an overflow problem when there's nowrapped text.

But...

I think there's a way around this. I certain there is. I just haven't finished my first year at it yet...>_>

Well, if you find a way around it, then you are doing better than others that have been doing CSS for a long time. They state it can't be done like it can in tables for things like that.

It isn't so much equal size columns as it is getting the columns to align the info properly. Take a closer look at the pic below and you will see what I mean. I think you're missing what I actually meant.

Are you referring to getting the info on the left to properly align with the info on the right? Well, yeah, I can do that. Only as long as the text doesn't wrap. But that, in of itself, creates the problem with the columns resizing to fit the content, which I've been trying to figure out. Maybe I'm misunderstanding you.

If the date is longer than the other dates, the right column adjusts to fit that so everything is lined up like you see in the pic. That can NOT be done with CSS, no matter how hard you try. I had to use a table and 2 TDs to get it to look like that. I scoured the net for an answer to doing it with CSS and the only way it can be done is with a table and TDs. If you can do it then I will eat my words and make sure all the CSS guys on the net that say it can't be done are made aware of your magical powers. ;)

I think we're talking about the same thing, and not. By resize, I mean I can't get the width to adjust for the content in either column if each line is set to nowrap. So, I can get:
-----------------------------
| Date 1 | Event Two
| Date 2 | Event Three
----------------------------
To line up as rows evenly. But if, say, Date 123456789 is the next event, I can't get that column to resize, as a direct result of the method that puts them side by side to being with. Ironically, the left alignment stays even. They just overlap.

So, I think we're in agreement in some respect.

Exactly! It can't be done with CSS if the first column has different length lines.

You see, I don't think it's impossible. But I think a different method needs to be developed. Kinda like what they did with dealing with clearing.

It is impossible the way CSS is now.