Over 16,528,701 people are on fubar.
What are you waiting for?
Ok... I have been asked numerous times how to make a fubar skin... and that the blog I had done previously was confusing and out dated and folks still don't understand. So I this is an updated version of that blog... lets just call it Fubar Skin's for Dummies!
First off... when ever you are coding theres a simple method when coding on google Chrome that you should be aware of... If you are stuck and you don't know what line of code does what this is what you do...
***NOTE: If you notice... the size of the header is also present in the highlighted div header as 985px by 300px so when designing your skin off of this platform you will need to use that same size to match it all up... If you choose to go bigger or smaller I will discuss that later in the blog.
Now... Go to the Skin's Code for this.... it only works if you have a pre made skin you stole off of someone else cause you liked the way it looked....
Now... the skin that I am using... is this one: http://fubar.com/c51?preview_skin=166001 (It's Pretty Basic... But it works great for learning)
The code for it is: If you see this ***hjakshdkuher*** this is NOT part of the skin... this is the explanation of the part in the skin you can change! (I will have definitians at the bottom of what these stand for if your confussed).
/* V:2 */
#userpagecontentstyle div#userprofile_headerbar {
border: red; ***Change the color of the boarder***
border-width: 0px 0px 0px 0px; ***Change the boarder width***
padding: 0px 0px 0px 0px; ***Change the padding***
overflow: hidden !important;
height: 300px; ***Change the height of the headbar... in case your banner is bigger or smaller than the skin itself***
background-color: transparent !important;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://i953.photobucket.com/albums/ae17/C51Creations/Pink-Floyd-Dark-Side-Wall-1.jpg); ***background Image link for banner***
}
#userpagecontentstyle div#userprofile_headerbar:hover {
border: red;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow: hidden !important;
height: 300px;
background-color: transparent !important;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://i953.photobucket.com/albums/ae17/C51Creations/Pink-Floyd-Dark-Side-Wall-1.jpg);
}
#userpagecontentstyle textarea {
height: 200px!important;
font-family: American Writer;
color: black! important;
font-size: 25px;
font-weight: bold;
background-color: red;
background-position: center;
background-repeat: repeat;
background-image: url(http://i953.photobucket.com/albums/ae17/C51Creations/Pink-Floyd-Dark-Side-Wall-1.jpg)!important;
}
#pagecontent {
background-color: #000000;
background-image: url(http://i953.photobucket.com/albums/ae17/C51Creations/pink_floyd_1.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
}
#userpagecontentstyle .tabs li.on {
background: url(http://i1208.photobucket.com/albums/cc379/mgomezmayorga/z_pinkfloid.gif);
font-family: American Writer; *** Font that you wish to use for all of your skins writing***
color: black!important;
font-size: 18px; ***Change Font Size***
font-weight: bold; ***Change font weight if you want your text to be bold/Italic... and so on***
}
#userpagecontentstyle #profile_box {
background: url(http://i1208.photobucket.com/albums/cc379/mgomezmayorga/z_pinkfloid.gif) !important;
background-repeat: repeat!important; ***Change if you want the picture in the background to repeat or not***
background-position: center!important;
border-color: red!important;
border-width: 3px!important;
border-style: outset!important;
background-color: #000000!important;
font-family: American Writer;
color: red!important;
font-size: 18px;
font-weight: bold;
}
#userpagecontentstyle #left_nav ul li a:hover {
text-decoration: underline;
color: red!important;
font-family: American Writer;
font-size: 18px;
font-weight: bold;
}
#userpagecontentstyle div#left_nav {
border: 3px outset red;
background: url(http://i1208.photobucket.com/albums/cc379/mgomezmayorga/z_pinkfloid.gif) !important;
background-color: #000000!important;
font-family: American Writer;
color: red!important;
font-size: 18px;
font-weight: bold;
}
#userpagecontentstyle .profile_module .main {
border: 3px outset red;
position: relative;
background: url(http://i953.photobucket.com/albums/ae17/C51Creations/pink_floyd_1.jpg);
background-color: #000000!important;
font-family: American Writer;
color: red!important;
font-size: 18px;
font-weight: bold;
}
#userpagecontentstyle #news_feed {
border: 3px outset red;
background: url(http://i1208.photobucket.com/albums/cc379/mgomezmayorga/z_pinkfloid.gif);
background-color: #000000!important;
font-family: American Writer;
color: red!important;
font-size: 18px;
font-weight: bold;
}
Now to define these Elements:
#userpagecontentstyle div#userprofile_headerbar { - Headbar... i.e. Banner on the top! Example: http://i46.tinypic.com/334i4hl.jpg
#userpagecontentstyle div#userprofile_headerbar:hover { - Headbar Hover... this is used to mimic two images... say you want two banners well when someone scrolls over the main banner it changes into another banner... as soon as they take their mouse off of it, it goes back to the original banner... If you don't put a 2nd banner and keep the banner the same... but the same background image into it as you did above: background-image: url(http://i953.photobucket.com/albums/ae17/C51Creations/Pink-Floyd-Dark-Side-Wall-1.jpg); If you leave it blank... when someone scrolls over it... it will disappear. Example: http://i46.tinypic.com/334i4hl.jpg
#userpagecontentstyle textarea { - This is where people leave you stats comments and profile comments... If your background image is to busy looking no matter what color you change the text to... no one will be able to read it... so I suggest making this background for the text area very light or dark in color and not so busy looking! Example: http://i48.tinypic.com/2lvlpq0.jpg
#pagecontent { - Main Page content... the entire background behind all the moduals and text and pictures you have already done... this is the MAIN BACKGROUND! The background needs to be at least 2100px by 1100px to fit the entire background of your skin... this also applys to lounge backgrounds.
#userpagecontentstyle .tabs li.on { - These are the tabs... Any tabs on the skin you can change the background to... (Note: They all have to stay the same pic... Choose wisely) Make sure they are at least 100px by 21px to fit the script. Exaple: http://i49.tinypic.com/2w5r0ur.jpg
#userpagecontentstyle #profile_box { - This is your profile, your bling box, your friends and family moduals... your blogs and lounges and so on.... Example: http://i49.tinypic.com/inu4vb.jpg
#userpagecontentstyle #left_nav ul li a:hover { - Leave it alone... nothing to do here captain!
#userpagecontentstyle div#left_nav { - Left Navigation boxes... This is where all your things you can do for others links come in... Send a PM, Friends request, Own someone, crush them, fan them... and so on.... Example: http://i47.tinypic.com/2nc3yh0.jpg
#userpagecontentstyle .profile_module .main { - This is for the profile box... which is where your "About Me" and "Intrests" are located... anything that is written on the main profile... this is also where your pictures in your album are stored if you have that option up instead of where the about me is... This is in the middle of your main page so this is an important spot to put someting... It can be a .gif pic or it can be a .jpg... and any size you want. Example: http://i47.tinypic.com/fjp8ab.jpg
#userpagecontentstyle #news_feed { - This is where your picture is... your buzz meter... your level is located... Example: http://i45.tinypic.com/2lt4lz.jpg
That about Sums that up.... Now lets move to defining What these odd words mean... Shall we...
boarder-width:
The border-width property sets the width of an element's four borders. This property can have from one to four values.
Examples:
Example: http://www.w3schools.com/cssref/pr_border-width.asp
padding:
With CSS Padding you will be able to change the default padding that appears inside various HTML elements (paragraphs, tables, etc). But first, let us make sure we understand the definition of padding. A padding is the space between an element's border and the content within it. Example: http://www.w3schools.com/css/css_padding.asp
overflow:
The overflow property specifies what happens if content overflows an element's box.
The overflow property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Example: http://www.w3schools.com/cssref/pr_pos_overflow.asp
The font-weight property sets how thick or thin characters in text should be displayed.
Example: http://www.w3schools.com/cssref/pr_font_weight.asp
Now... if I need to explain any other element... please let me know... but http://www.w3schools.com/ is one of the best websites to teach you anything about coding you are not sure about... best way to do it is to go to http://google.com and put in the search bar CSS what you are looking for and define... Example: CSS font-weight: define
If you have any other questions about this or had a hard time understanding this blog... please comment below and I will update the blog with what you asked... as well as let you know via SB what you wanted to know about!
Happy Skin Making!
DarkNymph