Oct 13, 2010 09:35 AM
(This post was last modified: Oct 13, 2010 09:45 AM by OldFag.)
On this lovely Wednesday I'm to teach you to customize your vBulletin skin to your own liking.Yes you can edit up the style via the new skin generator that the new versions of vBulletin have,but for people who want the [easy] way.
[Open up Adobe Photoshop]
[img]http://img707.imageshack.us/img707/8325/95205401.png[/img]
[Now go to your vBulletin skin/style you want to edit.Where it is hosted]
Take a screenshot of your forum.If you dont know how to take a screenshot google it.I'm not going to spoon feed you.
[img]http://img59.imageshack.us/img59/7135/50086880.png[/img]
[Open up Adobe Photoshop and go to File>New]
You will notice that the size of the project is already fixed.The reason is because you took a screen shot of your vBulletin skin.Make sure that it says Preset:Clipboard (Screenshot).
[img]http://img214.imageshack.us/img214/5467/81404071.png[/img]
[Once you click OK go to Edit>Paste]
And you will now see your screenshot on the new file.
[img]http://img143.imageshack.us/img143/5610/69542920.png[/img]
[Grab the Eye Dropper Tool and click anything you want to change]
A box will open up and you will see the code for the color.
[img]http://img100.imageshack.us/img100/9246/94202488.png[/img]
[Open up notepad and paste that code there]
You will need it to edit style.
[img]http://img405.imageshack.us/img405/1456/59373489.png[/img]
[Right click on (name of style).xml or css and open with Notepad]
Alot of the new skins you can edit in the css but some you can still edit in the xml.
[img]http://img233.imageshack.us/img233/5992/58343484.png[/img]
[Go back to your Adobe Photoshop document and use the the Magic Wand tool to select what you want to change.]
I selected the top bar.I want to change that to a nice red.So now you choose your color and use the bucket tool to change it.Its a really nice way to preview what you want.
[img]http://img833.imageshack.us/img833/4795/45386706.png[/img]
[img]http://img683.imageshack.us/img683/1173/95576404.png[/img]
[Now click on the the color you chose and copy the color code.In my case the color code is:#8b1212 Go back to the (nameofstyle).xml or css and look for the color code that you saved on your notepad.Now just find it using CTRL+F and change it to your color code that you chose]
[img]http://img409.imageshack.us/img409/6564/71893520.png[/img]
[Your finished! Save the (nameofstyle).xml or css and upload it in the admin cp in your vBulletin]
NOTE
Sometimes the skins/styles arent editable because they have no color codes.That is because the skin is made up of images.So if this method doesnt work.Its most likely because of that reason.Now to change images in your images folder in your vBulletin.
[Open up Adobe Photoshop]
[img]http://img707.imageshack.us/img707/8325/95205401.png[/img]
[Now go to your vBulletin skin/style you want to edit.Where it is hosted]
Take a screenshot of your forum.If you dont know how to take a screenshot google it.I'm not going to spoon feed you.
[img]http://img59.imageshack.us/img59/7135/50086880.png[/img]
[Open up Adobe Photoshop and go to File>New]
You will notice that the size of the project is already fixed.The reason is because you took a screen shot of your vBulletin skin.Make sure that it says Preset:Clipboard (Screenshot).
[img]http://img214.imageshack.us/img214/5467/81404071.png[/img]
[Once you click OK go to Edit>Paste]
And you will now see your screenshot on the new file.
[img]http://img143.imageshack.us/img143/5610/69542920.png[/img]
[Grab the Eye Dropper Tool and click anything you want to change]
A box will open up and you will see the code for the color.
[img]http://img100.imageshack.us/img100/9246/94202488.png[/img]
[Open up notepad and paste that code there]
You will need it to edit style.
[img]http://img405.imageshack.us/img405/1456/59373489.png[/img]
[Right click on (name of style).xml or css and open with Notepad]
Alot of the new skins you can edit in the css but some you can still edit in the xml.
[img]http://img233.imageshack.us/img233/5992/58343484.png[/img]
[Go back to your Adobe Photoshop document and use the the Magic Wand tool to select what you want to change.]
I selected the top bar.I want to change that to a nice red.So now you choose your color and use the bucket tool to change it.Its a really nice way to preview what you want.
[img]http://img833.imageshack.us/img833/4795/45386706.png[/img]
[img]http://img683.imageshack.us/img683/1173/95576404.png[/img]
[Now click on the the color you chose and copy the color code.In my case the color code is:#8b1212 Go back to the (nameofstyle).xml or css and look for the color code that you saved on your notepad.Now just find it using CTRL+F and change it to your color code that you chose]
[img]http://img409.imageshack.us/img409/6564/71893520.png[/img]
[Your finished! Save the (nameofstyle).xml or css and upload it in the admin cp in your vBulletin]
NOTE
Sometimes the skins/styles arent editable because they have no color codes.That is because the skin is made up of images.So if this method doesnt work.Its most likely because of that reason.Now to change images in your images folder in your vBulletin.