1-17-11: I did write this Chris lol
Hello, in this tutorial I will teach you how to create a vBulletin 3.8x Style. You can use this tutorial to probably create a, for example, vBulletin 3.7x Style, but I just use the "3.8x" version because that is what I am looking for an example at.
Disclaimer
This tutorial will only teach you how to create a simple vBulletin Style. We will not go into all the "fancy" things.
First Off...
If you have vBulletin Admin Control Panel access, which I hope you do if you wanna create a vBulletin Style, go to Admin CP --> Styles and Templates --> Style Manager --->at botton hit "Add New Style"---> Name the style and set the needed fields then hit "save" -->Redirected at the Style Manager, go to the style you just created an hit "All Style Options" and select Go!
Now.....
Now that you are at the Style Editing page, we will get started on how to create the Style.
TUTORIAL BEGIN!!:
The first thing you should see if the three boxes titles header, headerinclude, and footer. For right now, if you don't know what the hell you are doing, just leave that alone.
Now below that you will find the following (in order):
Main Table Width
Spacer Size
Outer Border Width
Inner Border Width
Table Cell Padding
Form Element Spacer Size
Form Width
User Control Panel Form Width
Message Area Width
User Control Panel Message Area Width
Code Block Width
Title Image
Button Image Folder
Item Status Icon Folder
Attachment Icon Folder
Miscellaneous Images Folder
Text Editor Controls Folder
Poll Images Folder
Ratings Images Folder
Reputation Images Folder
HTML Doctype
Now, in the tut. I am not going to use a lot of these since, like I said, we just wanna create a simple style.
On the other hand, I will explain some of them.
--Main Table Width: This is width of your vBulletin forum. You can either make it pixels (by not including the % symbol) or you can make it percentage (include the % symbol). If you wanted the forum to match up with your banner, and that banner is 900 pixels wide, then you would put "900" in that field.
--Title Image : This is your banner that appears on each page. You can either put the location down on the server for the banner (i.e. root/public_html/forums/images/banner.png) or you could put the direct URL such as (http://www.image.com/bannerimage.png).
--The Folders : You put the location of the folders in which all the icons are at (not smilies), such as "New Posts", "this forum is inactive", etc. I won't really explain this that much, but if you wanna put some new buttons for you should get the original button folder (which ever one it may be), and copy all the files, paste them somewhere else on the server, and then rename it and add/ replace the desired buttons. After that, put the file path on the server in the correct field.
Now to the main stuff:
Okay, first off, let me explain what a few things mean since they appear on just about each box below the file location boxes, etc.
--Normal Links CSS: This is what color the normal links will be. It is just the color of the link that is just sitting there all by itself.
--Visited Links CSS: This is what color the links you have visited will have. For example, if I clicked on a link that says "Click!" and that link was the color blue before I clicked on it, and I have this sitting set as the color yellow, that link I just clicked on will be yellow from now on.
--Hover Links CSS: This defines the color the link will be when your pointer is "hovering" over it. Once you move the pointer from over it, the color will change to whatever color it was before (be is the Normal Link color or the Visited Link color)
--Font Size: Defines the size of the font in that field or area.
--Font Family: This will define what type of font is used in that field or area. If you want one specific font, such as Arial, you would clear the default settings there (verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif) and just simply put "arial".
--Font Color: this is the color of the regular font, not links.
--Background: This is the color of that area's or field's background.
--Font Style: This isn't nothing really important...I would just leave it blank.
--Text Decoration: This is the decoration your text will have. Things you can assign to this are "underline", "italic", "bold", and "strike".
--Extra CSS Atributes: Since in this tut. we are just creating simple styles, I would leave this alone unless you know what you are doing.
Now I will explain what each box means. I will be skipping a lot of this, so don't fret.
Body: This relates to the main background. This is where, for example, unless certain coding is done, the vBulletin Copyright and, if you have any, your copyright is. Another example of the body is that it is the area that doesn't contain anything.
Page Background: This is the area that contains everything...like the forum itself. If you experiment around, with different colors with the Body and PBG, you should be able to tell the difference.
Table Border: This is usually the color of the stripes that seperates the "cells" such as the cells that contains the Forum Name and the others that contain the last post, and then the other that contains the forum icon.
Now, the Table Border is the only one in which you might want to go into the "Extra CSS Atributes" field...changing the color in there (which by default is #0B198C😉 just change the #0B198C; to whatever color you want the border around pretty much everything to be.
Category Strips: This is pretty much self explanatory. It is the strips that holds the category and that category holds the forums located in it.
Table Header: This pretty much "heads" things. It tops the "Who's Online" box and it is at the very top of the forum above the first category strip. It says (on the skin) Forums | last Post| Threads | Posts.
Table Footer: This is the area in which you would think it would be a category strip. But it holds the text "Mark Forums Read" and "View Forums Leaders".
First Alternating Color: This FAC, is, oddly, the cell that contains the forum name. Such as, if the forum name is "News and Updates" that is where the FAC plays a role in. It is also displayed in the Posts as the field beside the area that has your username, avatar, stats, etc.
Second Alternating Color: Same as the FAC, the SAC (
), is the cell that has the forum icon and contains your username, avatar and stats, on the posts.
WYSIWYG Editor: I would just make it the same settings as the FAC.
SKIP A LOT OF THEM
Time Color: This is the color in which the time will appear.
Inline Moderator Element: I, personally, leave this a lone, but this is the color and stuff in which the threads will be highlighted when you do inline moderator.
Panel Surround: I am going to use the area in which is displayed when you are posting a new thread/ replying to a thread. This is the one that is on the outside edge.
Panel (forms): This is the other one, the one that is bigger than the other Panel Surround.
Popup Menu Controls: This is the area that has the various links such as "User CP" "Forum Rules". "FAQ" "Community", etc.
Popup Menu Body: This refers to the body in which a popup will come up, as such when you log in and you get taken to the box that says "Welcome, {username}....."
Popup Menu Option Row: This refers to when you, for example, get a notification, and you click on that arrow and that little box comes down...all the components in that.
Popup Menu Highlighted Option: Same as the Popup Menu Option Row, this just refers to when you hover over it and it gets highlighted.
Forum Jump Menu: Now you have a little box with a lot of options and thingys in it...I would just mess with the box that says "Selected Item". The forum jump, if you don't know, is the box at the bottom of every page where you can click on it and "jump" to whatever part of the forum you want to.
Now you have a lot of things below the "forum jump menu". Just skip the "additional CSS Definitions" unless you know what you are doing. Below the Additional CSS Definitions is the Text Editor Control Styles. This is relates to when you click on any buttons when posting. It is very self explanatory and should be easy to fill out.
NOTE: A lot of areas were skipped in the tutorial. They aren't needed to make a basic skin, but you can edit them if you know what you are doing.
EXTRA NOTE: You can place a image for an area, such as the Table Header or Category Strips. To do so, just put the following text beside the color you specified for that area "url(PUT URL HERE. EITHER IT BE ON THE SERVER OR DIRECT URL)."
Finally....I'm finished.
So, the tutorial may be a bit confusing at first, but once you experiment around with it you will learn how to skin faster than ever. Just keep praticing and experimenting with this and you will be able to understand it even better.
NOTE: This is only to create a basic skin, not a complex one that looks professional. If you have any questions on how to edit any of the not mentioned above or even mentioned above areas, PM me with the question ready and I will answer it the best I can.
COPYRIGHT
Do not copy this tutorial without giving me Credit. (c)2009-2010 London Coding.
Hello, in this tutorial I will teach you how to create a vBulletin 3.8x Style. You can use this tutorial to probably create a, for example, vBulletin 3.7x Style, but I just use the "3.8x" version because that is what I am looking for an example at.
Disclaimer
This tutorial will only teach you how to create a simple vBulletin Style. We will not go into all the "fancy" things.
First Off...
If you have vBulletin Admin Control Panel access, which I hope you do if you wanna create a vBulletin Style, go to Admin CP --> Styles and Templates --> Style Manager --->at botton hit "Add New Style"---> Name the style and set the needed fields then hit "save" -->Redirected at the Style Manager, go to the style you just created an hit "All Style Options" and select Go!
Now.....
Now that you are at the Style Editing page, we will get started on how to create the Style.
TUTORIAL BEGIN!!:
The first thing you should see if the three boxes titles header, headerinclude, and footer. For right now, if you don't know what the hell you are doing, just leave that alone.
Now below that you will find the following (in order):
Main Table Width
Spacer Size
Outer Border Width
Inner Border Width
Table Cell Padding
Form Element Spacer Size
Form Width
User Control Panel Form Width
Message Area Width
User Control Panel Message Area Width
Code Block Width
Title Image
Button Image Folder
Item Status Icon Folder
Attachment Icon Folder
Miscellaneous Images Folder
Text Editor Controls Folder
Poll Images Folder
Ratings Images Folder
Reputation Images Folder
HTML Doctype
Now, in the tut. I am not going to use a lot of these since, like I said, we just wanna create a simple style.
On the other hand, I will explain some of them.
--Main Table Width: This is width of your vBulletin forum. You can either make it pixels (by not including the % symbol) or you can make it percentage (include the % symbol). If you wanted the forum to match up with your banner, and that banner is 900 pixels wide, then you would put "900" in that field.
--Title Image : This is your banner that appears on each page. You can either put the location down on the server for the banner (i.e. root/public_html/forums/images/banner.png) or you could put the direct URL such as (http://www.image.com/bannerimage.png).
--The Folders : You put the location of the folders in which all the icons are at (not smilies), such as "New Posts", "this forum is inactive", etc. I won't really explain this that much, but if you wanna put some new buttons for you should get the original button folder (which ever one it may be), and copy all the files, paste them somewhere else on the server, and then rename it and add/ replace the desired buttons. After that, put the file path on the server in the correct field.
Now to the main stuff:
Okay, first off, let me explain what a few things mean since they appear on just about each box below the file location boxes, etc.
--Normal Links CSS: This is what color the normal links will be. It is just the color of the link that is just sitting there all by itself.
--Visited Links CSS: This is what color the links you have visited will have. For example, if I clicked on a link that says "Click!" and that link was the color blue before I clicked on it, and I have this sitting set as the color yellow, that link I just clicked on will be yellow from now on.
--Hover Links CSS: This defines the color the link will be when your pointer is "hovering" over it. Once you move the pointer from over it, the color will change to whatever color it was before (be is the Normal Link color or the Visited Link color)
--Font Size: Defines the size of the font in that field or area.
--Font Family: This will define what type of font is used in that field or area. If you want one specific font, such as Arial, you would clear the default settings there (verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif) and just simply put "arial".
--Font Color: this is the color of the regular font, not links.
--Background: This is the color of that area's or field's background.
--Font Style: This isn't nothing really important...I would just leave it blank.
--Text Decoration: This is the decoration your text will have. Things you can assign to this are "underline", "italic", "bold", and "strike".
--Extra CSS Atributes: Since in this tut. we are just creating simple styles, I would leave this alone unless you know what you are doing.
Now I will explain what each box means. I will be skipping a lot of this, so don't fret.
Body: This relates to the main background. This is where, for example, unless certain coding is done, the vBulletin Copyright and, if you have any, your copyright is. Another example of the body is that it is the area that doesn't contain anything.
Page Background: This is the area that contains everything...like the forum itself. If you experiment around, with different colors with the Body and PBG, you should be able to tell the difference.
Table Border: This is usually the color of the stripes that seperates the "cells" such as the cells that contains the Forum Name and the others that contain the last post, and then the other that contains the forum icon.
Now, the Table Border is the only one in which you might want to go into the "Extra CSS Atributes" field...changing the color in there (which by default is #0B198C😉 just change the #0B198C; to whatever color you want the border around pretty much everything to be.
Category Strips: This is pretty much self explanatory. It is the strips that holds the category and that category holds the forums located in it.
Table Header: This pretty much "heads" things. It tops the "Who's Online" box and it is at the very top of the forum above the first category strip. It says (on the skin) Forums | last Post| Threads | Posts.
Table Footer: This is the area in which you would think it would be a category strip. But it holds the text "Mark Forums Read" and "View Forums Leaders".
First Alternating Color: This FAC, is, oddly, the cell that contains the forum name. Such as, if the forum name is "News and Updates" that is where the FAC plays a role in. It is also displayed in the Posts as the field beside the area that has your username, avatar, stats, etc.
Second Alternating Color: Same as the FAC, the SAC (
), is the cell that has the forum icon and contains your username, avatar and stats, on the posts.WYSIWYG Editor: I would just make it the same settings as the FAC.
SKIP A LOT OF THEM
Time Color: This is the color in which the time will appear.
Inline Moderator Element: I, personally, leave this a lone, but this is the color and stuff in which the threads will be highlighted when you do inline moderator.
Panel Surround: I am going to use the area in which is displayed when you are posting a new thread/ replying to a thread. This is the one that is on the outside edge.
Panel (forms): This is the other one, the one that is bigger than the other Panel Surround.
Popup Menu Controls: This is the area that has the various links such as "User CP" "Forum Rules". "FAQ" "Community", etc.
Popup Menu Body: This refers to the body in which a popup will come up, as such when you log in and you get taken to the box that says "Welcome, {username}....."
Popup Menu Option Row: This refers to when you, for example, get a notification, and you click on that arrow and that little box comes down...all the components in that.
Popup Menu Highlighted Option: Same as the Popup Menu Option Row, this just refers to when you hover over it and it gets highlighted.
Forum Jump Menu: Now you have a little box with a lot of options and thingys in it...I would just mess with the box that says "Selected Item". The forum jump, if you don't know, is the box at the bottom of every page where you can click on it and "jump" to whatever part of the forum you want to.
Now you have a lot of things below the "forum jump menu". Just skip the "additional CSS Definitions" unless you know what you are doing. Below the Additional CSS Definitions is the Text Editor Control Styles. This is relates to when you click on any buttons when posting. It is very self explanatory and should be easy to fill out.
NOTE: A lot of areas were skipped in the tutorial. They aren't needed to make a basic skin, but you can edit them if you know what you are doing.
EXTRA NOTE: You can place a image for an area, such as the Table Header or Category Strips. To do so, just put the following text beside the color you specified for that area "url(PUT URL HERE. EITHER IT BE ON THE SERVER OR DIRECT URL)."
Finally....I'm finished.
So, the tutorial may be a bit confusing at first, but once you experiment around with it you will learn how to skin faster than ever. Just keep praticing and experimenting with this and you will be able to understand it even better.
NOTE: This is only to create a basic skin, not a complex one that looks professional. If you have any questions on how to edit any of the not mentioned above or even mentioned above areas, PM me with the question ready and I will answer it the best I can.
COPYRIGHT
Do not copy this tutorial without giving me Credit. (c)2009-2010 London Coding.
