I don't know where to put this anyway- guessing that VB is actually php based.. Gonna put it here- Move this if it isn't the right place. :o

How do you actually make a VB skin?
I looked on the site and I didn't really find a tutorial on it- and I decided to register on the message board, but I don't think my activation account was sent. >.<


-Thank you to whoever helps me.

Dani AI

Generated

Short answer: there are two practical ways to make a vBulletin skin — quick edits inside the Admin CP for minor visual changes, or build a full style package you can export and share. For beginners the safest route is to clone the default style (or add a child style) and make changes there so the shipped default remains untouched; the Style Manager is the place to do that. (Official docs describe the Style Manager and how styles inherit from parents.)
(https://www.vbulletin.com/docs/html/main/stylemanager)

A concise, safe workflow:

  1. Add a new style as a child of your default so you inherit markup and keep updates simple.
  2. Use StyleVars for colors, fonts, widths and most image-path settings — they feed into the CSS with {stylevar} and are easier to manage than editing templates.
  3. Put custom rules in css_additional.css (this template is intended for overrides and is preserved across upgrades) and only edit templates when you must change markup.
  4. Always test on a staging copy and take a style download (XML) before big edits.
    (See the manual pages on StyleVars and the css_additional workflow.)
    (https://www.vbulletin.com/docs/onepage/)

Packaging and images: exporting a style creates an XML with your templates, StyleVars and CSS but does not embed image files. Upload custom images by FTP into a dedicated images folder (eg. /images/yourtheme/) and update the image-path StyleVars to point at that folder. When sharing a skin, supply the XML plus an images archive and clear instructions so an importer knows where to put the images; vBulletin will warn if the style XML version doesn’t match the site.
(https://www.vbulletin.com/docs/html/main/acp_styles_uploadstyle)

Troubleshooting and tips: keep template edits minimal (use CSS/StyleVars where possible), back up by downloading the style XML, and after product upgrades run the “find updated templates” / rebuild styles checks so nothing breaks. Note that vBulletin 5+ uses a different style builder and a slightly different workflow — consult the vB5 style docs if you’re on that branch. Practical tip: use a dedicated images folder, keep filenames and case consistent, and test in multiple browsers.
(https://www.vbulletin.com/docs/html/main/acp_style_reference_css_templates)
(https://forum.vbulletin.com/articles/support-documents/styles-themes/4320302-creating-a-custom-style-with-vbulletin-5-connect)

Comments tied to the thread: this builds on ’s point about editing colors/CSS in the admin area and on // noting image/icon work and XML themes — but it adds a safer step‑by‑step workflow, export/import caveats, and upgrade precautions so you don’t lose work later.

Recommended Answers

All 6 Replies

I am not a specialist in VB since I use phpBB more. But ... I have 2 IPBs and I have tried working a bit in them. I think you can solve this from the admin panel. You have to find something related to skins/templates .. there you have the option to modify. In IPB I can modify the colours (links, text), the entire CSS (I copy in my text editor a play around) and certain parts of the HTML code. I usually get them in Dreamweaver and play more with the tables and texts. The images your template uses are stored in a folder and you can download them, mod and then reupload them.

When you are happy with the outcome you can export the theme (I see the option in IPB so it should work in VB too). Hope that helps ;)

Member Avatar for Member #36984

I too would like to know how to do this..

I have a skin made by a friend of mine and I need to code it but it's proving very difficult...

Creating a skin is pretty easy, when it comes to just the layout colors, and images, that is if you know something about CSS and little html. Just edit the deafult template to whatever you like go to your admin panel > Style Manager> Default Style>All Style Option >"Go"

Just easy header footer edits, and there is fill in the blanks, for background colors or URL table widths and tables text colors, pretty easy, If you want some more help. Don't hesitate,

I edited my default style into what i have, check my profile for a link to my site if you like.

Will
AIM- willietdb
msn-

Creating a skin is pretty easy, when it comes to just the layout colors, and images, that is if you know something about CSS and little html. Just edit the deafult template to whatever you like go to your admin panel > Style Manager> Default Style>All Style Option >"Go"

You may also need to create new graphics/icons too that go along with your new skin.

Creating a skin is pretty easy, when it comes to just the layout colors, and images, that is if you know something about CSS and little html. Just edit the deafult template to whatever you like go to your admin panel > Style Manager> Default Style>All Style Option >"Go"

Just easy header footer edits, and there is fill in the blanks, for background colors or URL table widths and tables text colors, pretty easy, If you want some more help. Don't hesitate,

I edited my default style into what i have, check my profile for a link to my site if you like.

or if your are as skilled as us professionasl we make fully custom theme/skin files where u upload and not tamper with the origional defult VB Skin . .lol na yea vb skins are hard to get a grip on at the start .. u may think there is alot of xml xhtml css codeing but if u just download a skin and look at all the images. . and open the xml theme file .. u can re edit it all and make it your own? as a start but then work to makeing one from scratch

it depen upon u want to make professtional or want just it edit custom..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.