How to create your own skin from Scratch

I have seen some nice skins on display on this forum and I'm wondering how is it a custom skin is actually created? I know how to customize a skin via the vb admin interface but I'm talking about doing some scratch.

I have some basic photoshop and css knowledge. I would greatly appriciate it if anyone can post up a link to any tutorials.

Thank you very much.

2b, if there were any tutorials they would be priceless! ATM there are none.

I do all of my designing in Paint Shop Pro, The Logo Creator, and the main css in the ACP.

Thanks for the reply Peggy :)
I'm still hopefull that someone will be able to provide a link to some resource..
(here's hoping anyway)

I've been looking for one, and designing, for quite a while.
If there is one, it's eluded me ;)

Peggy, (I must think you haven't anything better to do), why not create a thread depicting your method? I have a rudimentary understanding of what I'm trying to do when it comes to altering the existing skin, however all of my efforts result in screwing things up one way or another.

*chokes on my kawfee*

right! Actually I have a hard time explaining things, I just do them. But... I'll give it a whirl. It just might take a few days... or weeks... :rolleyes:

Have you taken a look at the vB Documentation? That explains very well each of the CSS elements that make up the basis of a style. Check it out...

But that doesnt really explain how to make the xml file, etc... How to 'code' a skin, so to speak.

Creating an XML file from scratch to come up with your vB style is most certainly not the way to do this. Doing so would be akin to totally reinventing the wheel!! If you wanted to create the XML from scratch you'd end up also either re-entering the code for each of the templates, or doing a lot of cutting and pasting - not to mention also doing a lot of reading, whilst concurrently climbing an incredibly steep XML/vB learning curve!!

The way to create your own style is to use the default XML supplied by vB - then simply amend this with your design elements/CSS/template code. Additionally, one could also do this the hard way if one wanted to; by creating a new XML within AdminCP and editing the XML file using your code editing software app of choice, or one could do this the easy way by using the vB Style Manager to edit the elements of the style, then use the vB Template Editor to customise ones templates et al - and only then use vB to create the XML from that, instead of basing it on an unedited default XML.

So... in my humble opinion, 'coding' a skin per sé is a very common misconception. Skins are not really coded, rather edited.

In creating a completely new drawing would you buy a complex mechanical extruder, dyes, wax/raw materials/paints to create new crayons, or would you use existing/buy new crayons? ;)

That's what I do... add a new "default" skin in the acp, and edit it in the Main CSS and StyleVars, and sometimes, some of the templates... after having designed the graphics in my graphics software(s).

The xml file is simply the end result of all of the editing.

The vB docs do a pretty good job of explaining what element alters what... I think the hardest part I have is wrapping my head around the .ccs, I've pulled a bunch of styles apart and tried to incorportate pieces that I liked into a 'clone' of the current skin.... by the time I was finsihed messing around in the tempates and css, well...lets just say the results were not pretty. I need a lot more practice.

Thanks in advance Peg, IF you get around to it... I've always been able to get a lot more from examples of seeing how something is accomplished and expanding on it than I could ever get from any generic book of how to write this or that.

So... in my humble opinion, 'coding' a skin per sé is a very common misconception. Skins are not really coded, rather edited.

In creating a completely new drawing would you buy a complex mechanical extruder, dyes, wax/raw materials/paints to create new crayons, or would you use existing/buy new crayons? ;)

So this can't be done??? in vBulletin?
HEADER (http://www.arcadia.progvisual.com/xbox360.jpg)

Ok, I just bought my License, where can I get the DOCS or Tutorial .DOC or .PDF, cause the only I know is online...
Thanks!

So this can't be done??? in vBulletin?
HEADER (http://www.arcadia.progvisual.com/xbox360.jpg)

that header? Is it a vBulletin skin? If not, then no, as it is a copyrighted design

Ok, I just bought my License, where can I get the DOCS or Tutorial .DOC or .PDF, cause the only I know is online...
Thanks!


you'll find the vB manual in your members section where you downloaded vBulletin software.

that header? Is it a vBulletin skin? If not, then no, as it is a copyrighted design

Yeah, is a copyrighted artwork for Microsoft, my question Ms Peggy, 'can something like this be used in vBulletin... the size and to place all the options like the 'HEADER'
Thanks!

Yes, this can be done in vBulletin. The way a forum looks and its layout is all carried out by standard HTML code which contains vBulletin variables, phrases and conditionals. This is the vBulletin template system.

The code (all the PHP files) runs the actual vBulletin programme which outputs what you see as HTML by calling the templates which display the html.

All you need to do is to amend one of the vB styles with your images, colours and layout. It is simple really.

Hi everyone, and thanks in advance for helping me out. First let me say that I'm completely new to administrating a forum, but I'm am definitely not new to coding. I've been perusing these forums, and while it seems like we're knocking on the door to my answers here, we just aren't quite there. Basically, what I'm trying to do is take the existing forum functionality, and just wrap it in a new skin. So, essentially, keep everything the way it is, except pull out the "vBullitin" header and replace it with my own design, and if possible, insert a footer. I have already figured out how to edit the CSS design for the forum itself, I just need a new wrapper. I've been following other posts, and I think I'm getting to a point where I'm ready to upload or insert my own code, but rather than just blindly inserting code, and hitting random submit buttons, I'd like to actually understand what I'm doing. So, if no one minds, here's what I've done, and I'd appreciate tips on where to go from here.

1. From the CP admin, I went Style & Templates -> Style Manager. I created a new child style to the default style. I realize this may not have been necessary, as I really want to keep the default style, and just tweak it to my needs through the admin. Lets call this style NewStyle.

2. Again, from CP admin, Style & Templates -> Style Manager. From NewStyle I just created, I added a new template, using NewStyle in the dropdown on the subsequent page. Lets call this template NewTemplate.

And this is where I am. My guess is from here, I would insert the code from my HTML design up to the cell that would contain the body. But, as I said, I don't want to just start blindly inserting code and hitting submit buttons without knowing what I'm doing. Where would the <div> end? Can I put in a footer? Thanks in advance for any help. If I need to clarify anything, just let me know, and I'll do my best!!

Thanks,
Drew