Welcome to Gaia's forums, where millions of members gather to discuss random stuff, make new friends,
complain about life, argue about nothing, laugh at dumb pictures, discuss serious issues and/or curse like sailors.
Lurking is creepy. Quit skulking in the shadows and join the conversation!
Register to reply| Yes. |    |
84.8% | [ 1008 ] |
| No. | |
15.2% | [ 180 ] |
 |
UPDATE || View Misc. Codes post to figure out how to make
your own hover image buttons! *points to links below*                 http://c.statcounter.com/3828060/0/e56b2013/0&var sc_security="e56b2013"" |
|
 βΌ #STEPONE{ s e t t i n g s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ There are two versions of editting Gaia CSS: Classic and Current. (*Note: Classic used to be called 'Old School') This guide will only discuss Classic profiles not V2 which is the much newer system. My Gaia > Account Settings > Preferences  * Image is clickable. Directs you to your preferences Also, in this area you can choose to make your profile viewable to the public or whom can comment your profile. : ) βΌ #STEPONE{ r e m e m b e r;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ From here on out you will put your codes in the theme section THIS IS WHERE YOU PUT ALL THE CODES FROM THIS PAGE. This will be your best friend for the next few hours. My Gaia > Account settings > Profile Theme BEFORE YOU START MAKE SURE YOU'RE IN THESE SETTINGS   * Image is clickable. Directs you to your theme settings Your content and body text or images must be inserted into the about me section :: My Gaia > Account settings > About Me  *Image is clickable. Directs you to your about me settings. WHY IS THIS SO IMPORTANT? So you ask me why I bother even mentioning this, because I've seen it so many times when people just put their text in the theme. IT WONT WORK! ONLY CSS CODES, K? The about me section is for the text about yourself and whatever crud you want. Images of yourself, icons, nekkid Ichigo, or just anything that turns you on. βΌ #STEPONE{ f a m i l i a r i z e ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ HOW?
sections you are dealing with. If you wanted to change the background for your about me section, you would need to know the class tag for that section. So, in that case, it would be #about. It would be the same for if you trying to change the size of your multimedia. You would need to know the main tag would be the #multimedia tag. If you are trying to change specific parts within the section, it would be something like #about .??? |
 |
|
 |
 βΌ #STEPTWO{ b e h i n d t h e s c e n e s;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ /*THE SECTIONS & THE CLASSES WITHIN THE SECTION*/ I M P O R T A N T! As mentioned in the post above, if you read it. You have to know which section you are handling. I don't know how to stress that much to you. You MUST know the main class you are dealing with to get you started. If you want to a specific thing altered, you'll have to refer to the sub-classes. Usually, when gaia names it it's really simple. Let's say your avatar in the profile. It would be in the main class of #profile with the avatar you want changed; hence, the introduction class tag would be #profile .avatar. NOTE There are usually in most cases periods in front of the sub-class you want altered. Rarely, the pound sign (#) exemplified with altering the status bar. (#profile #bar) It's pretty simple, baby. I'm here to show introduce to you all the sub-classes and main classes you'll be attacking with much passion. There may be some lacking especially with the details & profiles, because I omit them in my profiles...all... the.. time. So, after we figure this which section you need to alter. We'll move on to the attributes to alter your baby. You can use it for all sections, yes? <3 HEADSUP :: I used the 'block' theme, so it's easier for you to see the sections I'm talking about. x) Please stay with the custom setting  [contains your avatar, items you are wearing and status bar] I will not go into detail about how to customize your buttons because I don't use them, and I think it's easier to create your own using your about section. ;_; kokoko#profile {insertattributeshere;} kokokoThis is the OVERALL code for your section. It allows kokokoyou to have control with the border and background color kokokoof the box. I will introduce the properties that demonstrate kokokohow to stick backgrounds in the back.   #profile {xxx;} #profile h2 {xxx;} #profile #bar {xxx;} #profile .items {xxx;} #profile .avatar {xxx;} #profile .message {xxx;}  [contains the content you write in your about me section, three links (viewpostsetc) and the opportunity of creating many sections (advanced).] Until you have fully understand the fundamentals of gaia CSS, I personally don't recommend learning how to create new sections, YET. YES! It's possible... you'll get there! ; 3 OHNYA; REMEBER you post your content in the about me area NOT in the theme. Theme only holds CSS codes where we discussed the classes and sub classes on this second post. kokoko##about {insertattributeshere;} kokokoGenerally, the "meat" of the whole profile. Consists of the view posts, kokokoview guilds and view store links. Allows you to type cool mumbo. kokokoIf advanced, very capable of creating multiple sections that kokokoexpands creativity.   #about {xxx;} #about h2 {xxx;} #about .links {xxx;} βββ    #details {xxx;} #details h2 {xxx;} #details #info {xxx;} #details #stats {xxx;} #details h3 {xxx;} #details hr {xxx;} #details dl {xxx;} #details dd {xxx;} βββ    #friends {xxx;} #friends h2 {xxx;} #friends #find_friends_banner {xxx;} #friends #friendGroup li {xxx;} #friends #friendGroup img {xxx;} βββ  This contains your journal. Out of all the sections we mentioned so far, this, the friends and signature section are the least used. : O #journal {xxx;} The journal is one of the useless sections in the profile. xO;; Uhm.   #journal {xxx;} #journal h2 {xxx;} #journal .links {xxx;} #journal .journal-date {xxx;} βββ  The wishlist can be selected if you got to the marketplace and find the item you like and click on a link that looks like this:  ...and then change the status of each item in your account > wishlist section.  #wishlist {xxx;} The main section of the overall section. This controls the background, borders and etc. of the entire box.   NOTE: The img will not be introduced even if it is a sub class for all images. Will be explained in full detail later on in the guide when combining codes, but for the purposes of introducing it to you. I included it. #h2 h2 {xxx;} #wishlist .items img {xxx;} βββ  Many people create their own playlist or get some random video from Youtube. This section controls it all. For kicks and giggles, since people generally use youtube, I will help you add a colored player. (NOTE: I will direct you to guides that discuss how to create your own player.) This is how you fix up your multimedia then we'll worry about positioning this section later. If you are in a rush, ctrl+f and type in positioning.   #multimedia {xxx;} #multimedia h2 {xxx;} #multimedia embed, #multimedia object {xxx;} Click here to change your multimedia because the link to that section has gone missing. Click here to alter the color of your Youtube player βββ   #comments {xxx;} Controls the overall section. TOP PORTION #comments h2 {xxx;} Header for the comments section #comments .alert_container a {xxx;} Contains your add comments and view comments. The "a" here stands for the link. If we just left it as "#comments .alert_container" it wouldn't work because you have to specify the link. #comments #alerts_banner {xxx;} Viewable to you only. If it is bothering you, just add the "display:none;" attribute (taught later) in between the squiggly doodles. #comments p{xxx;} Viewing ### of ### Comments. The "p" here is a subclass for the text. This allows you to alter the color/size of the text. CAPTION 1 (within the blue highlights) #comments .caption{xxx;} Covers the overall section for the first caption bubble #comments .caption .date{xxx;} The date for the first caption bubble #comments .caption a{xxx;} Your (first caption bubble) commentor's link name #comments .caption .message{xxx;} The message for your first caption #comments .avatar .message{xxx;} First caption writer's avatar CAPTION 2 (within the orange/red highlights) #comments .caption2{xxx;} Covers the overall section for the second caption bubble #comments .caption2 .date{xxx;} The date for the second caption bubble #comments .caption2 a{xxx;} Your (second caption bubble) commentor's link name #comments .caption2 .message{xxx;} The message for your second caption #comments .avatar .message{xxx;} Second caption writer's avatar  "Another common browser compatibility is rounded corners on captions and comments in Old School. The developers designed the captions using "pseudoclasses" that IE doesn't support. So if you design your profile in IE, you won't see these little rounded corner images, but anyone using any other browser will." - taken from the FAQs & Resources (Saeline) So, to remove the "round" corners just chug and plug this: .caption:before, .caption:after, .caption2:before, .caption2:after {display:none;} To get rid of the pointing thing sticking out, just omit the background for your message because that's where it is. #comments .message {background-image:none;} To change the color of the border you simply need to know which overall caption you want (either 1 or 2) then change it with the border attribute. : ) Something like this: #comments .caption {border:#px solid colorhere;} βββ  #gaia_header {xxx;} (The black bar running across the page)
Please scroll down. βββ  #extendedProfileBody #header h1 {xxx;} 
to do is combine attributes to allow you to change it. This section also holds the 'nasty gray line' to omit that all you have to do is disable your borders... which... will... also be taught later. For now, just remember this is the main class you need to know to alter the header. : ) TO GET RID OF THE GRAY BORDER You must specify the width and height of an image. Also, you must disable the borders as well. It would look something like this: #extendedProfileBody #header1 {background-image:url('URLIMAGEHERE');width:###px;height:###px;border:0px;} The attributes within the brackets will be described later. βββ   content {xxx;} Includes everything below your #extendedProfileBody #header h1 (the house looking thing). This includes your about, profile, signature and just everything under it. Users generally have a background image and set the content to a certain height. The gray line appears in this section and also the #extendedProfileBody #header h1. To remove it, refer to the border attributes. Just know it's a part of this class. βββ   #site {xxx;}
#header h1 and the #content. If you omit this section, everything will be gone except for the gaia header. (<--- do not do this) Users generally use this main class to position the WHOLE site to the center or right which can be easily done with positioning.(margins) βββ   body {xxx;}
This allows you to change the overall scrollbar of the page or add a background to the overall page. This means you can change the crappy blue to something that matches your layout. βββ |
|
 βΌ #STEPTHREE{ s u b c l a s s e s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ h2 β header of the section img β controls the images within a main class (think of images of your wishlist items with that section) p β controls any paragraph text li (list) β just know itβs a list! xD ul (unordered list) β mainly used in custom sections ol (ordered list) β another custom section class a β links in general a:link β the link how it looks like without hovering a:hover β the link how it looks like when cursor hovers a:visited β how link appears when clicked a:active β has not been clicked SPECIAL!SPECIAL! :hover β when you combine this with another subclass the attributes will change when you hover over it. This is how the mouse over sections work. If you refer to the experimental theme at the bottom, you will notice I used this :hover option on the #friends and #wishlist images. : ) Check it out. |
|
|
|
 βΌ #STEPFOUR{ a t t r i b u t e s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  background-color:insertcolororhexcodehere;
Please scroll down a bit to find 'colors' background-image:url('insertanurlhere');
A common place to save photos are at photobucket Want to use that image? Upload it there. I'm not saying; it's the only place you can upload; it's just a lot easier and more organized. wink  You should copy the direct link and past it there in between the ''. Then you're done! background-repeat:xxx;
 (^background remains blue because I didn't change it to white. :3) Choices: repeat (makes the image repeat itself) no-repeat (does not repeat at all) repeat-x (image is repeated horizontally [right and left] ) repeat-y (image is repeated vertically [up and down] ) background-attachment:xxx;  scroll (when you scroll the image will move as you scroll up and down)  fixed (when you scroll the image will stay in place)  background-position:xxx; Background positions may vary depending on how you want your page to be designed. The thumbnail will only display images on the top, center, left. The rest... I'm pretty sure you can figure out. : 3 top top left top right center center left center right bottom bottom left bottom right βββ   border:#px; (Basic border tag that automatically makes the border thicker when #px is increased) [first example with black solid border: #whateversection {border:1px;}] border:#px solid colorhere; (A little bit advanced. Thickness is increased with higher number. Allows you to have free reign over what color it should have) [second example with teal border: #whateversection {border-right:2px solid #429DA8;}] border-right:#px solid colorhere; (Only changes the color/thickness of the border on the right) [third example with right hotpink double border: #whateversection {border:3px double hotpink;}] border-left:#px solid colorhere; (Only changes the color/thickness of the border on the left) [fourth example with a really thick gray border on the left: #whateversection {border-left:3px solid gray;}] border-top:#px solid colorhere; (Only changes the color/thickness of the border on the top) [fifth example with thing solid border on top: #whateversection {border-top:1px solid black;] border-bottom: #px solid colorhere; (Only changes the color/thickness of the border on the bottom) [sixth example with thing solid border on bottom: #whateversection {border-bottom:1px solid #000000;] All you have to remember if you want a specific border is: right, left, bottom and top. : ) ( like border-bottom, border-left and etc) βββ  Very important. Allows you to change the size of any section. This is very important when you are going to use scrollbar, but I'll up on that later. As you noticed before, the higher the pixels the longer it'll get. The smaller the pixels the shorter it is.  width:###px;
. height:###px;
Why is it important? Sometimes, you want the size of your section to be the same exact width/height of an image, especially when dealing headers, buttons and such. How do you do it? Easy. Look back at the 'OH ME STITCHES' pic. right click > view properties > look at the dimensions  Thus, it will appear like this: #whateversection {width:200px;height:133px;} βββ   display:none;
from your profile whether they are links and sections you hate. This is how you do it. βββ  font-family: xxx; 
this is a kind reminder to be wary of which font you used because some fonts are not installed in all computers. So, downloaded fonts on YOUR computer are a 'no go.' font-size:#pt or #px;
Higher the number, the bigger the font. Lower, the smaller. Easy, eh. xO The commonly used one is __px. Pt is a bit strange to handle sometimes; nevertheless, it's still used.  font-style:normal; Mainly used to make text revert back to it's original look. For instance, comment's date is automatically italicized, but with this you can make it 'normal.' This is the only attribute offered (from what I know) D: color:insertcolorhereorhexcode;
You can type in words or choose hex colors that look something like this: #000000. It's usually a combination of letters and numbers that give you the exact color you want if you are trying to be specific. I mainly use Photoshop to do my graphics. It gives me the hex colors without any hassle.  If you don't have Photoshop, go to tektek and sample there. It'll give you the exact color you want. smile IF YOU DONT WANT TO DO THAT, just type in random colors like dodgerblue, hotpink, pink, brown and etc. A color palette I created so you can experiment with hexcodes.  When asked to change attributes for ANYTHING dealing with color, you are to type either the hexcode or the name of the color [ example: #whateversection {background-color:black;} OR #whateversection {background-color:#000000;} Note: Black and #000000 are the same thing. ]  text-transform:xxx;
spiffy code can make you look angry in two seconds. The first picture is the original it has both Upper and Lower case letters. As you transition, to the right, you'll notice how angry you look WITHOUT using your caps button. ;O It just shows that CSS can make your life a lot easier. uppercase (makes everything all caps) lowercase (makes everything lowercased)  (An alternative to BBCode) text-align: xxx; center (center, of course) justify (spaces it out so it extends to two ends) left (to the left... to the left) [Not Pictured: Left is by default] right (to the right... to the right) font-weight: xxx; normal lighter  letter-spacing:#px;
the bigger the gap is. The lower the number the text will begin to 'squish' each other. {imagehere} text-indent:###px;
Attribute is also used to get rid of text in the headers simply by placing an exageratted negative number #about h2 {text-indent:-9999px;} βββ  Links are subclasses. Refer to the next post about it. text-decoration: xxx;
underline overline (a line at the top and bottom of link) none (no underline) βββ  padding:##px; padding-right:##px; padding-left:##px; padding-top:##px; padding-bottom:##px; [notcomplete] |
|
 βΌ #STEPFIVE{ c o m b i n i n g ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  * Video uploaded on 10/26/08 You know how which section you need to change. You know which attributes you WANT to use. Now, you just have to combine them. βββ COMBINING ATTRIBUTES If you noticed the tag h2, is universal for the header of anything that possesses one. #about h2 {xxx;} --- #multimedia h2 {xxx;} I have a question for you. Is it any different to change the background of #about section or the #multimedia section? No and Yes. You use the same attributes; however, only the main classes changes. Example: #multimedia {background-color:white;} #about {background-color:black;} Simple, rah? Now, letβs say you wanted to change the color of the text in your about me section; take the existing code and type a semicolon after it (;). This is important. If you donβt insert a semi-colon, it will immediately throw off your code. So make sure, you have the symbols typed in correctly, and itβs all in between the two squiggly doodles { } NOT brackets [ ]. #about {background-color:black; color:white;} So, pretty much, once you get a handle on this you can combine your knowledge and attributes to get to what you want to appear. #about { color: hotpink; background-color:pink; background-image:url('URLHERE'); background-repeat:no-repeat; background-attachment:fixed; border: 1px solid black; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; } βββ COMBINING SUBCLASSES These can be changed if there is a specific item you want changed in a section (main class). This could be changing the links in the about section or changing the border of all images within the wishlist section. For instance, you can NOT change links by inserting a:link within {;}. You have to indicate the main class THEN establish your sub class after it. ONLY the attributes above can stay within the {} NOT THE SUBCLASS. Hereβs a case scenario. Letβs say you want your #gaia_header links to be a different color. Letβs just assume you already made all the other links on your profile the same. To make them different how would you go about doing it? We know the main class we plan to use. (#gaia_header) and the item we want altered (the links). The sub class for the βlinkβ is βa:link.β So, now itβs just a matter of combining them. #gaia_header a:link {color:###;text-decoration: xxx;text-transform: xxx;} Do not confuse the subclass as an attribute it SHOULDβNT look like this: #gaia_header {a:link: color: pink;} <-- this is beyond wrong. The sub class should not stay within the attributes. And thatβs pretty much it! If you plan on changing the hover for the #gaia_header links. You would just have to change the sub class,again. #gaia_header a:hover {color:###; text-decoration: xxx;text-transform: xxx;} Note: To change the OVERALL links of the page you do not need the body main class body {;} . It is just assumed if you leave a:link, a:hover and etc. by itself the browser will understand. So changing overall body links would just remain like this: a:link {color: colorhere;} No need for the main class. βββ COMBINING MAIN CLASSES WITHOUT BEING REPETITIVE If you are tired of writing the same codes for EACH of your sections, you can just Easily combine the main sections together. All you need to have is a comma to separate the main classes. Example: #about, #profile, #multimedia {display:none;} Easy, eh? You can still edit a specific part of one of the sections. : ) : ) |
|
|
|
 βΌ #STEPSIX{ g a i a h e a d e r ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ REMINDER: You are responsible for adhering to Gaiaβs rules regarding the gaia_header. Do NOT remove the links or omit the Gaia Logo completely. If you do, however, you will get your profile disabledβ¦. which is sad. βββ OVERALL #gaia_header Consists of the components within the black horiztonal line crossing the page. To change the black bar color of the gaia_header all you have to do is combine background attribute tag and chug it with this header class~ #gaia_header * {background-color:hotpink !important ;} The black background will be turned to hotpink. (* and !important) These codes will be discussed in detail in the debugging and hacking section. For now, just bear with me. #header_left li, #header_right li Refers to the ' | ' between the links. By using this you are capable of changing the color of the lines within this class #header_right img A combination of the header_right main class and subclass of img. Strangely, there is a weird line on the right side. Some people think this "line" is due to the ' | ' between the links, but it is not. Gaia, for some lame reason, put an imageless strip down there. To omit it, simply use the remove attribute. βββ SECTIONS  #header_left Consists of the gaia logo image and links on the left side  #header_right Consists of the Recommend and Sign out link. (^ recommend link can not be viewed when you log on. Only viewable to visitors.) Assuming you read the previous posts (instead of going straight to this), you can easily change the links for each class. If you want to change the links for the header, they would look like this: #gaia_header a:link {color: xxxx; text-decoration: xxxx;} The link will appear as it is. #gaia_header a:hover {color: xxxx; text-decoration: xxxx;} This change will appear if you hover the link. #gaia_header a:visited {color: xxxx; text-decoration: xxxx;} When the link has been clicked on βββ GAIALOGO Unacceptable alteration of the navigation bar: The navigation bar is in place at the top of the profile so that users who visit your profile know they are still on Gaia, and can navigate away from your page easily without having to try to figure out how. You may change the background color, and the color of the links for the navigation bar. However, you may not alter the Gaia logo, reposition the navigation bar, or remove the navigation bar all together. Altering the Gaia logo includes removing it all together, as well as making it semi-transparent to the point that it is hard to see or nearly invisible. You may alter the Gaia logo image to remove the black background, or change the black background to a different color, but the logo itself must remain as is. Change logo? : ) Profile Discussion Forum Rules and Guidelines Multiple people have asked HOW to change the background of the gaia logo. I'm sorry, guys, but only people with an imaging program are able to edit. D: I made life easier by creating a .PSD (photoshop file) so all you have to do is change the colors in the back and wala~ Download file here and open file in Photoshop. File uploaded to personal account @fileden.com on 10/22  You should see three layers: Background, Gaia Logo, and the color overlay Double click on the color overlay (where I highlighted around the green area). On your document, you should see an apricot color. Now, a color palette should pop up. Click, Okay.  Make sure you are on the background layer this time by clicking on it. Now click on the paint bucket and go back to the yellow green background and click. It should now be a color of your chosing. Wasn't that easy?  --&  Now, it's just a matter of uploading your image and pasting it into this coding. I am not a fan of giving you guys codes, but this is the only way. : ) #header_left img {padding: 0px 47px 23px 0px;background:url('URLHERE') top left no-repeat;height: 0px;width: 0px;} img - subclass for the images padding - attributes fitted to the size of the image. (right click > properties > dimensions) background - combines all attributes for background: image, position and repeat dimensions (width & height) |
|
 βΌ #STEPSEVEN{ d e b u g g i n g & h a c k s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ βββ WHYWHYWHY? Sometimes, there is just some point when you really want to pluck your nose hair in frustration. Iβm kiddingβ¦ At this point, you are scratching your head trying to figure out why your layout looks so messed up in a different browser; yet, so good with the on you usually view it in. Wellβ¦ thatβs because some browsers interpret the codes differently. Why is Cross Compatibility important?
You canβt always assume that everyone has the same browser as you, so itβs best to make it so everyone can see it. And if you are planning on getting spotlighted *nudge nudge* β¦. You must! Recommend: Arm yourself with Firefox. (You can easily download it at its official website for free) Why? Firefox tends to not screw up the codes. Most of the problems appear with IE because the browser reads the codes all funky. For my personal prefences, itβs just much easier to do my codes in Firefox, and debug all the differences in IE with hacks. The hacks are different for browser versions. Thus, IE 6.0 and IE 7.0 hacks are different. It isnβt that bad. MOST ISSUES WILL HAPPEN WITH POSITIONING. Something could be a ___ pixels off, and this is a fix for it.  IE 6.0 The _ will be your friend when trying to make corrections in this browser. It's really simple. All you have to do is insert the underscore (_) in front of the attribute you want fixed with the new setting to make it work. Case scenario: You've discovered your #about ol ol section is off by 20px from where you want it to be. What do you do? USE THE _ Old Coding: #about ol ol {position:absolute;top:640px;} New Coding: #about ol ol {position:absolute;top:640px;_top:660px;} Simple? I thought so. Just remember to put the _ before the attribute fixed with a new number to make it "right" for the IE 6.0 browser. : )  IE 7.0
corrections in this browser. This one is a bit more different than the other one. You don't place it with an attribute it just goes in front of the same section. Old Coding: #about ol ol {position:absolute;top:640px;} New Coding: #about ol ol {position:absolute;top:640px;} *:first-child+html #about ol ol {position:absolute;top:620px;} All you have to do is keep the code in front of the section you want and make new changes. Keep the bottom one separate for IE7. The first one is for Firefox and things in general. To combine both IE6 and IE7, it would look like this. #about ol ol {position:absolute;top:640px;_top:660px;} *:first-child+html #about ol ol {position:absolute;top:620px;} _ = IE6 *:first-child+html = IE7 Remember the second line is only for IE7. : ) *note: there are different ways to go about with these hacks, but these are what I use.. X) βββ LAST DEFENSE *
part or all of the page. Click here for more information *I'm not too entirely sure, but I only use it for the gaia_header which allows me to make changes to the gaia_header. That's the only case I've used it so far. D : !important;
this property attacked to an attribute, it will deem it as in "important" and override the already existing attribute written by Gaia's development team. Think of the gaia_header, Gaia's CSS has already made the background of the bar "black." To override this, !important; gives users the power to do. This will ensure that whatever thing you add with !important will always be applied. |
|
|
|
 βΌ #STEPEIGHT{ f i l t e r s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ These filters are only viewable in their respective browsers. Firefox is very limited when it comes to filters In general, IE tends to have more including the colored scrollbar, scrollbar directions and so on. I know I don't have have an extensive library of filters for IE. You can just easily view them on the web if you are curious. So, if you want both browsers to be transculent looking you'll have to place both opacity tags for Firefox and IE. βββ FIREFOX OPACITY  opacity: #.##;
The opacity filters allows you to have a "transculent" or "transparent" look (whichever of the two). Remember by using this, it is only viewable in Firefox, and not in IE. In the example, I used #site {opacity:.50;} in the image shown above. βββ INTERNET EXPLORER OPACITY  filter: alpha(opacity=##);
The opacity filters allows you to have a "translucent" or "transparent" look (whichever of the two). Remember by using this, it is only viewable in IE, and not in Firefox. In the example, I used #site {filter: alpha(opacity=20);} in the image shown above. INTERNET EXPLORER SCROLLBAR || DIRECTION RIGHT TO LEFT  direction:rtl;
Changes the scrollbar from the right to the left (rtl). However, it not only flips the scrollbar to the other side, but the content as well. In the example, I used body {direction:rtl;} in the image shown above. For more IE filters, please visit this website. SCROLLBAR COLOR  html { scrollbar-arrow-color: red; scrollbar-face-color: yellow; scrollbar-track-color: blue; scrollbar-3dlight-color: orange; scrollbar-darkshadow-color: purple; scrollbar-highlight-color: green; scrollbar-shadow-color: black;} html indicates the class for all items within the page. For some reason, I encountered that if you use the body main class instead. It will not work; however, if you use html it will change the scrollbar for the overall page. You can also change the scrollbar of an individual section if you just place these attributes inside the main class. |
|
 βΌ #STEPNINE{ y o u t u b e c o l o r s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ βββ TO CONVERT A YOUTUBE LINK  Copy the url of the page. Omit the following things that are red and add a slash (/) afterwards. http://jp.youtube.com/watch?v=/fuuulqTx6j8 It should look like this. http://jp.youtube.com/v/fuuulqTx6j8 βββ COLOR PLAYERS Now, you finally have the url created. There are only a few colors for the youtube player. I found a forum that discussed changing the youtube color player. (Visit the Sign Out links!) Anyway, here are the colors they offer. I have no idea how to choose a specific color. You should have your link and add an amp sign ( & ). The amp sign acts like a semi colon ( ; ) to add attributes together when you input in the account > multimedia section. http://jp.youtube.com/v/fuuulqTx6j8& ...wait you're not done yet. See the colors below? *points down* I already done the hard part (not really xO) of copying the colors. Choose which color you like and copy the color section of code you want. I used pink because I like it. http://jp.youtube.com/v/fuuulqTx6j8&color1=0xcc2550&color2=0xe87a9f  RED PLAYER β color1=0x5d1719&color2=0xcd311b PINK PLAYER β color1=0xcc2550&color2=0xe87a9f PURPLE PLAYER β color1=0x402061&color2=0x9461ca BLUE PLAYER β color1=0x2b405b&color2=0x6b8ab6 SKYBLUE PLAYER β color1=0x006699&color2=0x54abd6 GREEN PLAYER β color1=0x234900&color2=0x4e9e00 GOLDENROD PLAYER β color1=0xe1600f&color2=0xfebd01 GRAY PLAYER β color1=0x3a3a3a&color2=0x999999 WHITE PLAYER β color1=0xd6d6d6&color2=0xf0f0f0 YOUTUBE || Input  Paste your final link in your Multimedia section. (Account > Multimedia) http://jp.youtube.com/v/fuuulqTx6j8&color1=0xcc2550&color2=0xe87a9f If you want to autoplay your multimedia add this &autoplay=1 It would look like this then: http://jp.youtube.com/v/fuuulqTx6j8&color1=0xcc2550&color2=0xe87a9f&autoplay=1 WARNING: USERS VISITING PROFILES DISLIKE AUTOPLAY MUSIC. |
|
|
|
 βΌ #STEPTEN{ b b c o d e s & c u s t o m s e c t i o n s ;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ βββ BBCODE BASICS You probably wondering how you are going to create your OWN link or image. Itβs very simple. If you go back to the second post (Setting up), youβll notice for the most part we were discussing where to put your codes (Gaia CSS). Now, you have to transition to the about section where you will place your content through BBCODE. Unlike, what I have discussed throughout this whole guide all our items will be within brackets [ ] not these {}. Iβm pretty sure by now you are somewhat familiar with BBCODE (assuming you post a lot in gaia and what not). This is pretty much the gist of it. To create a link: [url=URLLINKHERE]NAME OF THELINK[/url] To get a link, you just have to right click > properties > highlight the url Shown > right click on that > copy > paste inside both of the tags. To post an image: [img]IMAGEURLLINKHEREl[/img] Note: People usually host their images at imageshack.us or photobucket.com View the previous post how to upload and get the url link. To align anything: [align=center]contenthere[/align] [align=right]contenthere[/align] [align=left]contenthere[/align] (align=left by default) You can insert your image within the βcontenthereβ area. As long as itβs within Those beginning and ending tags the browser will perform the action. βββ CUSTOM SECTIONS Now you have meddled with BBCODES and CSS, now itβs time to conquer the long and awaited custom sections. How is this possible? You have to insert codes in your about me and in your theme box. You can create MULTIPLE custom sections. Theyβre quite easy when you get the hang of it, but first, we will start with the basics. As we mentioned above in the subclasses, there are the ol and ul. Guess what? They signify the items within what YOU can put in the about me section. LISTS: Does it sound familiar? Yes, the ol or ul subclass allows you to alter the items written in your about me through your theme box. We know that the only place we can control the ol and ul lists is in the about me section. We are going to create one custom section. Start with one list and paste it in your about box like this. [list]contenthereforfirstsection[/list] Now switch to the theme box and generate your CSS code. We know Itβs in the about section AND itβs an unordered list. (Remember: no number, unordered) So itβs like this: #about ul {attributeshere;} Youβre done! The only thing you need to do is position, add backgrounds, or what not.This concept can be applied to the ordered list tag. It would be appear like this. In about me section: [list=1]contenthereforfirstsection[/list] (in about me) #about ol {attributeshere;} (in theme box) How do you create multiple sections more than these two? Think of a section WITHIN a section. You first must understand the dynamics of a box within the box. The first ol or ul reigns supreme, so whatever you do in the first ol/ul it will affect the other sections following after that. For you scrollbar lovers this means that you canβt make your first section a scroll bar. If you do, the other sections βcanβt get out of it.β Think of this way. Ol and ul are extensions of the #about (main class) they are only the subclasses. If you make the about class a scrollbar, ALL YOUR OL/UL SECTIONS CAN NOT GET OUT OF IT because the about dictates everything. OR If you make the first listβs background red, all your other sections will be red as well. The only way you can not make it not red is if you specify on all the sections to be a different color. THINK A LIST WITHIN A LIST. [list] First Section [list] Second Section [list] Third Section [/list] [/list] [/list] Then the theme would having something that looks like this: #about ul {attributeshere;} First #about ul ul {attributeshere;} Second #about ul ul ul {attributeshere;} Third Section We know it's an unordered list (no numbers) and that we used three of them. I recommend trying to make your lists organize. Once you delete or forget one, it will really mess you up. |
|
 βΌ #STEPELEVEN{ p o s i t i o n i n g;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  I have my own way of doing this. Others prefer using margin-left and margin-right, but I like using the absolute, top and left attributes. It's just easier for me to comprehend, but they're are pretty much move everything. ; ) position: xxx; THIS absolute Starts positioning from the top corner of the page. relative I don't recommend using relative. Use absolute instead.  (An easier depiction) top:###px; (-) Negative Number: Makes the section move up (+) Positive Number: Makes the section go down the page left:###px; (-) Negative Number: Makes the section move to the left (+) Positive Number: Makes the section move to the right This can be used for any section. So, let's say I wanted to move my about me it would look like this: #about {position:absolute;top: ###px;left: ###px;}  Margins are another way of approaching positioning. This is mainly used to make things centered, but used frequently for other things. margin:###px; Adds margins to all sides. By increasing the ##px, it will be moved. Think of Microsoft Word, you start with default margins, but once you change it will 'squish' your content into the fixed margins. In contrast with padding, the margins control the stuff "outside" and NOT inside of a section. Thus, it is the space around it that allows it to be moved. margin-top:###px; Add margins (or space) from the top. margin-right:###px; Add margins (or space) from the right. margin-bottom:###px; Add margins (or space) from the bottom. margin-left:###px; Add margins (or space) from the left. Possible Values: ###px auto Like with positioning, you can put numbers. Scroll up a bit for how negative and positive numbers come into play. Aside from numbers, auto is introduced to allow you to center your profile. I can't explain it much, but auto basically does the job for you. xD So, for instance, auto would be associated with margin-right and margin-left to allow things to be "centered." By making it auto, it fixes the profile in the middle when you declare. For all eternity, it's just been like that. I can't provide a clearer description. To center your profile, you would do this. #site {margin-left:auto;margin-right:auto;} _____..TOP..RIGHT.BOTTOM. LEFT margin: ###px ###px ###px ###px; Margins are used when you change the gaia logo. If we were to not specify the "margins" the gaia logo would not be visible because it is hidden by the original gaia logo embedded in the background of the #gaia_header section. |
|
|
|
 βΌ #STEPTWELVE{ m i s c c o d e s;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  Go to statcounter and sign up for your own account There are other counters available online, but I trust this one more.  You need to find a link that says add new project. Click on that and name your project accordingly. Now the bar graph obviously shows the stats on who visits your page and the wrench allows you to customize your counter. Click on the wrench icon  A list of links will appear, but click on the one that says Configure Counter. The link should direct you to a page where you can customize your counter. You can select the colors they offer, or place the hexcodes you want. Anyway, make sure to set the counter style at the bottom. After that, return to the list of links.  Click on the link that says Install Code. Make sure you click on the radio button that allows it to be a visible counter. Click next, and the next page will allow you to change how entries are stored. Click next (again) and it asks you if you want it to be a counter image (make sure it is)  Click next... next.... next until you see a screen that looks like the screen shown above. I know it's ugly to look at, but I will help you create the code. Just bear with me. xDDD Basically, the coding will look like this: [img]http://c.statcounter.com/#INSERTPROJECTNUMBERHERE#/0/#INSERTSECURITYNUMBERHERE#/0&var sc_security="#INSERTSECURITYNUMBERHEREAGAIN#"[/img] Remember when you type the letters. They are case sensitive!  This is where that ugly screen comes to play. These parts are the only things you should focused on. (Definitely not all the other crud that is meant to confuse you!) Basically you'll just have to plug the numbers where the pound signs are. Project numbers and security numbers accordingly people. : ) : ) The finished product would look like this [img]http://c.statcounter.com/3828060/0/e56b2013/0&var sc_security="e56b2013"[/img] As of now you have created the counter I use to count you people who mingle in this thread. xD Check out the bottom right corner of the first post! http://c.statcounter.com/3828060/0/e56b2013/0&var sc_security="e56b2013"  Basic Cursors #whateversection {cursor: xxx;} Cursors offered & supported with browsers:  Replace the 'xxx' with the names above. This attribute are mostly used with the body, link and images classes/subclasses. Your own Customized Cursor #whateversection {cursor: url(filename.cur);} I don't know how to create cursors, but if I do find a guide I'll point them out to you. You just have to find a cursor thing file type that ends w/ .cur. If you go on yahoo or google, you can search, but it's NOT recommended at all because most of the sites that offer cursors have spyware embedded in them when you download them (same goes for emoticons). If you find a reliable one, use it. Please be reminded. Firefox doesn't support cursor imports. IE, however, does. Proven from Ben Pond it is possible. I'm just too lazy right now to figure it out. xD  People use the status bar buttons to create their links, but people wonder how can people create buttons, but the only links the status bar offers are add friends, ignore, pm and trade. Well... people... it's not much of a secret. They create their own buttons using custom sections. Nothing special. If you haven't bothered reading how to create custom sections, I suggest scrolling back up a bit to refresh your mind, or if you don't know and skipped ahead go back. How does this work? Here's the logic.  PUSHONE You have a custom section and you put the image you want seen when hovered over. (This happens in your About me section) You must also link this to your desired location. Let's say you want to link to your comments you would have to go to your add comment link. Right click > properties > and copy that long url. It should look something like this: http://www.gaiaonline.com/profiles/?mode=addcomment&u=###### Basically if you know your gaia member number you just need to replace the pound sign to your Gaia ID Number. In my case, it's 102800.  PUSHTWO The image you want when it is not hovered will be placed in the theme box. PUSHTHREE Basically what happens with the coding, the background image appears and the image is hidden when the cursor is not on top of it. PUSHFOUR When cursor is over it, the image that you put in the BBCODE (about me) will appear. In summary, you need to use both your about me input text thing and your theme box. In your About me would look like this. [list=1][url=http://www.gaiaonline.com/profiles/?mode=addcomment&u=102800][IMG]http://i295.photobucket.com/albums/mm152/visualearner/hoverimage.gif[/IMG][/url][/list] Please reminded that spacing is important. If you space the gap between the list=1 and the url portion it will "move down." So, keep the spacing together.... so no... breakage. Remember list=1 is a custom section. You can create multiple sections and have more buttons this is just to create one button, but the concept still applies. This is all mentioned in PUSHONE. In your Theme Box would look like this. /*this allows me to move it*/ #about ol {background-color:black;position:absolute;top:500px;left:500px;} /*this is the image that first appears*/ #about ol {background-image:url('http://i295.photobucket.com/albums/mm152/visualearner/regularbackground.gif')} /*when the section isn't hovered over this hides the image in the ol*/ #about ol img {opacity:0;filter: alpha(opacity=0)} /*when the section IS hovered the image you put in the BBCODE about me section appears*/ #about ol:hover img {opacity:1.00;filter: alpha(opacity=100)} Where it shows the background-image that's where you place the image that first appears. To make it compatible, had to use opacity and filter. Filter is for IE (100= show fully, 0 = not to display, gone, kapeesh) and opacity is for FF (1.00 = same as 100 show fully, .0 = not to show, byebye) Read the comments to fully understand more. : 3  I bet the first thing you are wondering what is a patch. Well, it's a 50x50px image that represents you or your profile. You don't have to always have one patch. Nowadays, people create a patch for every new profile they make. Patches can be created in Photoshop or any other imaging program. These are the collection of patches I have created over time. 3 http://tinyurl.com/c8blh http://tinyurl.com/omuzq  
HOW TO ADD A BORDER AROUND YOUR PATCH  The first step is to start a new document and set up the dimensions for the patch. Simply use CTRL + N to start a new document. Then change the specifications of that document to 50px by 50px pixels. Click Okay.  Most patches are just a reflection of your new layout. So, copy ( CTRL + C ) and paste ( CTRL + V ) the image the exact way you want  Make sure you are on the correct layer and select all ( CTRL + A ) (<--- when this happens you should see something like white and black lines moving around the image as shown above) and cut ( CTRL + X ) then paste ( CTRL + V ) it back in, again. By doing this, this will only cut out an exact 50px by 50px patch to enable you to put a border. Think of a cookie cutter. xD   Look at your layers you should see a set of pictures at the bottom. Click on the one that looks like an f > click on stroke. Make sure you set it "inside" and not outside. The higher the number the thicker the border gets, and you can easily change the color by looking through the color wheel.  After that, you can just slap on some text, and wala~~~~~ your gorgeous patch.  You can organize code however you want. It is all up to the each person's personal preference. I (note: you don't have to follow, but is recommended) organize my codes based on the overall page and work my way from the top to the bottom. From there, you can alter the overall section (exp: #about) and then venture to the details/aspects within a specific section (exp: #about h2). I have created a sample theme you can alter/experiment with. The best way to coding is to be organized and "comment" your work. This is basically the easiest way to help you remember which part of the coding does what, and you simply write them within slashes and asterisks (exp: /* comment here */). People are sometimes against commenting parts of their code to keep others from stealing and altering it easily. For you, commenting will help you brand your work, and allow you to remember things easily without having to switch back and forth between this guide and your profile theme box. : ) So basically what I did was I created a sample theme, and commented each segment/portion of code for your understanding. If you notice, I go for the overall profile, then go from the top to bottom, and for all the stuff I remove/omit tends to go at the end. You'll notice sometimes my items are squished together. SPACING IS YOUR FRIEND. You can space your stuff between the portions of your code, so it's not all rammed together. If your list of attributes tends to be long. DO NOT MAKE IT A STREAM LINE OF CODING. It will be longer for you to sift through your coding instead of doing this: #about {background-color:red;color:white;letter-spacing:5px;position:absolute;top:200px;left:12px;text-transform:lowercase;text-indent:5px;padding:25px;border:1px solid black;text-align:justify;line-height:20px;} Do this: #about { background-color:red;color:white; letter-spacing:5px; position:absolute; top:200px; left:12px; text-transform:lowercase; text-indent:5px; padding:25px; border:1px solid black; text-align:justify; line-height:20px;} This will make it WAY easier on your eye, and less troubling for you. When you are looking for a specific part of your section, you can easily press CTRL + F and type in keywords to alter. ; )  * The image is clickable to my profile. |
|
 βΌ #STEPTHIRTEEN{ f a q s & e t t i q u e t t e;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  How come there is a gray line in my profile? It's always like that in profiles. You mainly just have to go back to the #extendedProfileBody and #content and set the attribute to border:0px; It's only a border. : ) Everyone has this problem Why are there round corners in my commentws in Firefox and not in IE? It's just how Firefox reads the codings. I'm not exactly sure, but it deals with the puesdo classes. So, to easily omit that problem all you have to do is add this _______. I'm not a fan of chugging and plugging, but this is the only way. xD My profile is screwed up! I don't know what to do! It happens to everyone. It could be you are missing a semi-colon or not closing off your statements properly. Remember: Everything should be within squiggly doodles. : ) I HATE THE INTERESTS SECTION! Is that it's own section #interests doesn't work! No, the "interests" section including the line is part of the #details section. Refer back to the third post for a detailed account. I correctly specified my main class and background. Why isn't the color changing in the my gaia_header? I don't know either, but the way to fix this problem is by using those special symbols that include * and !important. This is an all else... last attempt to combat gaia's strange way of not reading it. Refer up to the debugging/hacks post for further explanation.  I'm just going to set some guidelines for future individuals reading this guide. This will probably enlighten you a bit. I WILL NOT CHUG OUT CODES FOR YOU I can not stress it that much. D : You have to learn how to code yourself. I don't mind giving you tips of which section is belongs, but if you think I can solve all your problems you are sorely mistaken. Don't say "PLZGIVEMCODEthx." It's a bit insulting. The theme is for your experimental use only. The reason why I have the theme in the first place is to help you understand how code is organized, and what not. I get really annoyed if people just "use" it and don't say anything. I just want to know all my is effort is put into good use. Seriously... DO NOT REMOVE THE COMMENTS. I will shoot you... and please if you do experiment with it say something. Dx The obvious: do not bump the thread if isn't off the first page. Just to comply with PD guidelines Be niceeeeeeeeee. Doi doi. |
|
|
|
 βΌ #STEPFOURTEEN{ l i n k a r o o;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ  [url=http://www.gaiaonline.com/forum/profile-discussion/visual-old-school-beginner-guide-95-exptheme-ed/t.24095883/][IMG]http://img.photobucket.com/albums/v248/lil_neko/redpurp.jpg[/IMG] [/url]  [url=http://www.gaiaonline.com/forum/profile-discussion/visual-old-school-beginner-guide-95-exptheme-ed/t.24095883/][IMG]http://img.photobucket.com/albums/v248/lil_neko/blah-1.jpg[/IMG] [/url] βΌ #STEPFOURTEEN{ l i n k s o u t;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ MUSIC PLAYLIST GUIDES MYFLASHFETISH PLAYER β step by step guide to create your very own player WEBJAY PLAYER β another playlist tutorial HOSTING SITES PHOTOBUCKET β Image hosting site. IMAGESHACK β Another mage hosting site. OLD SCHOOL PD GUIDES KIRA CATGIRLS MAKING CUSTOM PROFILES β A very insightful guide FREAXS CUSTOM SECTION GUIDE β Very helpful. This guide tells you how to make many scrollable custom sections! : ) MIIMIC'S GUIDE β Posesses a list of main classes, sub classes and etc. Adds on to the basic knowledge attained in this thread. DOWNLOADABLE CONTENT FIREFOX 3.0 β A safe, secure browser. : ) *cough*FF>IE*cough* ADOBE PHOTOSHOP CS4 TRIAL β Adobe allows you to download their product for a 30 day trial period. If you like it... then buy it. XD βΌ #STEPFOURTEEN{ w o r d;} βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ I think it's about time that I finally finished this guide. I intended to make one since... a year.. or two years ago. I think it's pretty sad it took me this long to finish this. LOL, I'm just lazy.... and... it takes a lot of time processing the images and stuff. I hope many people will take a lot out from this guide. I haven't seen a guide that TAUGHT users how to combine the sections by themselves, so that's why I created it. I wish I had a guide like this when I first started. ; ____ ; |
|
