How do you code a skin?

Ok, teach me.

I know CSS, and I know about vBulletin template editing. What I don't know is how to package all of your CSS, graphic sets, and template changes into a skin. Can someone walk me through the basics?

I guess my big question is with template changes. A true "skin" won't just be cosmetic changes, but will affect the layout, organization, spacing... perhaps even the table structure. How do such changes become part of a skin, which can be toggled on/off, installed and uninstalled, etc.?

I'm not real sure than I'm reading your question correctly Thomas but I'll give it a try as I understand it to read.

There is a difference between a skin and a style, yes, altho sometimes the line does get crossed when a styler decides to edit a template.
But you're correct in that, for the mostpart, styles are cosmetic changes.

How everything become part of the package? The template and css changes are part of the xml file when you download it. The graphics/images and xml file are packaged together into a zip file. The graphics are uploaded to the server, the xml file is added via the acp, and waa laa, you have a new style.

Now go ahead and tell me that I misunderstood your question, lol

We're on the right track. How do you code the template changes? Are they placed within conditionals? Do you "test" to see if a certain style is loaded within the template(s)?

Or, do you simply replace the default template with a different version?

Me? I'm no skinner darlin'. I don't mess with template changes myself. I leave skinning up to those who know how to code templates.

As for testing my changes i.e. graphics, colors, etc... oh yeah. I have a separate browser window open at all times, and I save save save, after every change and refresh the other browser to see what I did.

Ok, so the basic question remains. How are template changes tied to a specific style/skin?

when the templates are changed, I'm assuming they are part and parcel of the xml?
I've downloaded a skin for my forum before, it was quite different from the default, and I didn't have to make any changes manually.

I guess we're still not communicating. I know how to change templates. I do it all the time. The question is, how do you associate specific template changes with a specific style?

I can think of two approaches. One is that each template change be wrapped in a conditional. I can't imagine vbulletin really uses this approach... too messy.

The other is that, somehow, there are copies of all the templates each time you "create" a style. You edit the templates for that style to your heart's content. Is that how it works?

The drawback would be all the duplicate templates in the database. A site with lots of skins/styles installed would have a massive database, if each style had a full complement of templates.

The other is that, somehow, there are copies of all the templates each time you "create" a style. You edit the templates for that style to your heart's content. Is that how it works?



This is what I was saying. The templates are changed for that particular style only. I wasn't telling you how to change a template, you misunderstood me. I said that when the templates are changed for that style, when you download the xml file, the template changes are in that xml. I don't know that ALL of the templates are there, I do know that the templates that are edited are there.

That is correct, whenever you do a template edit is associated only to the specific style that is beign modified.

The only case where template edits are inherited is on child styles. If you do a template edit on a parent style it will be applied on child styles as well.

When you download a style, all the style and template modifications associated to that style are loaded in the xml.

Ok, that makes sense. The way I did my forum was to simply make all the edits within the default style. I see now I should have created a "tgreer" style, in which to make my changes.

I can also see that a site with lots of styles may have a nightmare with updating. You have to revert/rebuild every altered template for every style, correct?

Yeah, that's where the child styles come in handy. If you setup all your styles as a child of the default skin, for example, all the changes you do on the default skin to comply with the upgrade will be applied to this child skins.

And don't worry on using the default style, whenever you create a new style without a parent style you get a brand new default vb skin.

yup you sure do. and it can be a nightmare, lol. Which is why I'm willing to settle with styling, and leave the skinning to someone else ;)

The main issue with the templates is that vBulletin is still solidly table-based. If they would move to a true "content-based" system, where they used DIVs for all block-level elements, it would very likely make template changes a thing of the past, and dramatically open up the styling possibilities.

As is, though, if you want to move the location of something, or add some features, you have to alter the underlying table structure.

I thought even the CSS freaks have already agreed, tables for certain tabular data cannot be replaced well by divs?

I thought even the CSS freaks have already agreed, tables for certain tabular data cannot be replaced well by divs?
thats correct...especially when dealing with IE...IE freaks at too many div's

Who says forum data is tabular? I guess that's the argument. To me, a table is something with rows, columns, and headers.

On a forum, I naturally see divs: blocks of content.

I'm no CSS freak and I like tables despite the drive to try and do away with tables. I think it's the CSS freaks way of trying to seem like better coders or something. I could care less.

Until I see someone make a style in ALL CSS with divs to prove it can be done, look the same and render in all browsers, I have to say, CSS with DIVs is nice but overrated in some cases.

It's just a conceptual thing with me, not a religious dogma. Like this Quick Reply box... when I see it I see a DIV, some spans, etc. because that's how I'd code it. There's just nothing about it that conceptually says "table" to my mind. I'm a very visual, kinesthetic designer/coder.

Looking below to the "Similar Threads" portion of the page, I definitely see a table, with rows, columns and headers.

I think of a "div" as a generic box, which can have borders or not, and space around or not, and in which you can put anything, including other boxes/divs.

The best example(s) of table-less layouts are at www.csszengarden.com. Of course, that site is a single static page, it isn't a forum.

On my site, which is simplistic in overall layout, only the forum uses tables.

I don't mean to come off like I know one or the other is better, But I have heard of this possiblity many times and not seen it produced.

I like divs, I can live with them. I just want once see them applied against tables, in vBulletin, by someone that says it will work.

When and if that happens, I'll most likely embrace it. Until then, it's just a debate IMO.

I like tables. In fact, I love tables. Tables make me a happy camper. :D