[Guides] My CSS Bookshelf

[Lady Saxophone]

♜CHAPTER 1: THE BEGINNERS GUIDE TO CSS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

This guide is meant as an introduction to coding for those unfamiliar with CSS.
Be aware that the subjects cover here only brush the surface of coding, and there is much much more you can do with it.
Also, this guide mostly covers Current (v2) layouts since those are easier for beginners.


What is CSS?

CSS stands for Cascading Style Sheets. It is used in conjunction with HTML and Javascript (JS) to design webpages.
In comparison to a human body, think of HTML as the skeletal structure, JS as the organs and nerves, and CSS as the outside appearance: skin, hair, and eye color, voice, etc. While there are many neat and pretty things CSS can do, be aware that it is not HTML or JS. Its abilities are limited by what it is designed to be for. Gaia will not let us edit the HTML or JS of the page for security reasons, so you are stuck with just CSS..


How can I use CSS to make a profile?

You can type your own CSS codes into your Theme Override Box (found under Profile Preferences)
For Current (v2) profiles, this box can also be accessed under "Edit My Profile > Theme > CSS"


The Basic Set-Up of CSS

selector{property: value;}
A selector is the element on the page which you want to target and change.
Following that, properties are the specific part of the selector which you want to change, like backgrounds, font sizes, borders, etc.
Finally, values are what you are changing the property to. For example, if "background" is your property and you want to have a red background, you would use "red" for your value. Values can vary between numbers, colors, keywords, and other things depending on the property.


Combining Codes

Let's say you have something which looks like this

.panel{background: white;}
.panel{color: black;}
.panel[font-size: 10px;}
.panel h2{background:#6396E7;}
.panel h2{color: white;}
Did you know that can be combined all into just two lines?

.panel{background: white; color: black; font-size: 10px;}
.panel h2{background:#6396E7; color: white;}
As long as the selector is the same, you can write multiple properties inside of the brackets.
This helps to both save on space and keep you from having duplicate or contradicting codes.


Parent, Child, and Sibling Relationships

Some of this guide will be mentioning parents, siblings, and children.
We're not referring to an actual family here, but rather the HTML structure of the page.
Parents are elements which are outer containers of other elements
Child are elements which are inside of these outer containers
Siblings are similar childen/parents on the same level
For example: #columns is the parent of #column_1, #column_2, and #column_3
#column_1 ~ 3 are all children and are all siblings because they are set up the same way
.panel is a child of #column_1 ~ 3, and panels inside of the same column are all siblings of each other
This is important to keep in mind while coding, since sometimes coding applied to parents will affect their children
(coding applied to children will not affect their parents though)

[Lady Saxophone]

LIST OF CURRENT GENERAL SELECTORS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Getting started into CSS is nice and all, but it's kind of hard to start coding when you don't know what anything's called!
Below is a list of some of the basic elements on a Current panel. These would be your selector names.


Main Profile Selectors

• body = The affects the entire page. Used to change backgrounds and resolution
  
  
• #gaia_header, #gaia_header ul = This affects your header at the top. Please remember to follow the rules when coding it.
  
  
• #gaia_header a = This affects the hyperlinks in your Gaia Header (My Gaia, Forums, etc.)
  
  
• #columns = This affects all of your columns
  
  
• #column_# = This affects only a specific column. Input either 1, 2, or 3 in place of the # (Columns are numbered from 1 to 3 from left to right)
  
  
• .panel = This affects all of your panels
  
  
• .panel h2 = This affects the header bar of each panel
  
  
• #pictures_container = This affects all of the image decorations which you have added to the page
  
  
• #texts_container = This affects all of the text decorations which you have added to the page
  
  
• .avatar_decoration = This affects all of your avatar decorations on the page
  

Specific Panel Selectors

• #id_about = Your "About Me" panel
  
  
• #id_comments = Your "Comments" panel
  
  
• #id_contact = Your "Contact" panel (with the Add as Friend, Trade, etc. links)
  
  
• #id_custom_### = Your "Custom" panel (See the Custom & Media sections post for more about the "###" part)
  
  
• #id_details = Your "Details" panel (with your avatar, drop-down menu, etc.)
  
  
• #id_equipment = Your "Equipped List" panel
  
  
• #id_forum = Your "Forum" panel (how many posts, Latest posts, etc.)
  
  
• #id_friends = Your "Friends" panel (with your list of Gaian friends)
  
  
• #id_guilds = Your "Guilds" panel (which guilds you are a member of)
  
  
• #id_house = Your "House" panel
  
  
• #id_interests = Your "Interests" panel
  
  
• #id_journal - Your "Journal" panel
  
  
• #id_media_### = Your "Media" panel (See the Custom & Media sections post for more about the "###" part)
  
  
• #id_aquarium = Your "Aquarium" panel
  
  
• #id_mycar = Your "Car" panel
  
  
• #id_signature = Your "Signature" panel
  
  
• #id_store = Your "Store" panel (marketplace)
  
  
• #id_wishlist = Your "Wishlist" panel
  
  
• #id_badges = Your "Badges" panel (zOMG! badges)
  
  
• #id_footprints = Your "Recent Visitors" panel
  
  
• #id_gifts = Your "Gifts" panel
  
  
• #id_playlist = Your "Playlist" panel (useless)
  

Inner-Element Sectors

These are selectors which exist inside of others. When targeting them, you can put them after their parent selector name. For example, if you want to target all of the images inside of your About panel in order to change their properties, then you would use #id_about img. Putting no parent panel in front of them will make that line target all of the elements under that classification on the page.


• a = This affects all of the hyperlinks (URLs) in the specified selector
  
• img = This affects all of the images in the specified selector
  
• object = This affects all of the Flash objects in the specified selector
  

Psuedo-Classes

These are basically different states of elements. There are actually a lot more than what is listed here, but this is just meant to give you a little look into using them. How you use them is putting them directly after an element's name, like #id_about:hover{ ... } -- that lets you apply properties to the About panel when it is hovered over.


• :hover = The element when being hovered over
  
• :active = The element when being clicked
  

[Lady Saxophone]

CUSTOM AND MEDIA PANEL SELECTORS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

In the previous post, you might have noticed how Custom panels and Media panels require special numbers on the end of their selectors.
If you only have one of those panels on your page and you want to target it, you can just use .custom_panel and/or .media_panel
However, for more than one panel, you will want to find their unique ID numbers.

How do your find their unique ID numbers though? Here are the different ways you can find them!
First off, add the panel(s) to your page and save, so that the system assigns it an ID number.


First Route - Only works in Edit Mode

Hover your mouse over the panel and you should get a little tooltip saying something like "div id: #id_custom_12345"
That number on the end is your ID number. Write it down in place of the ##'s for the custom selector.
Your final selector name would be "#id_custom_12345"


Second Route - Using your Page Source or Element Inspector

Right-click on the page and click "View Page Source" and find the part of the code which says ...
<div id="id_custom_12345" class="panel custom_panel" title="div id: #id_custom_12345">
(using Ctrl + F and searching "custom" will make things a lot easier)
As you can see, it lists your custom id number here as well. Your final selector name would be "#id_custom_12345"

Alternatively, you can right-click on the panel and click "Inspect Element" to save yourself from having to scroll through hundreds of lines of HTML

[Lady Saxophone]

QUICK AND EASY CODES
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Here are some little "fun" things you can do to start off your coding!
Change colored parts (red, green, blue, etc.) in order to fit it to your profile's needs.


Backgrounds

• Background Image:
  selector{background: url('insert image url here');}
  
  
• Background Color:
  selector{background-color: insert color here;}
  
  
• Transparent Backgrounds:
  selector{background: transparent;}
  

Text, Fonts, and Links

• Font Color:
  selector{color: insert color here;}
  
  
• Font Family:
  selector{font-family: insert font name here;}
  
  
• Font Size:
  selector{font-size: ##px;}
  
  
• Hyperlink Colors:
  selector a{color: insert color here;}
  

Borders

• Inserting a Border:
  selector{border: #px style color;}
  # = This will be the width of the border.
  style = This is the border style. Styles are solid, dotted, dashed, double, inset, outset, or ridge
  color = This is the color you want your border to be
  
  
• Making your Corners Round:
  selector{border-radius: #px;}
  

Heights, Widths, and Scrollbars

• Adjusting Height:
  selector{height: ##px;}
  
  
• Adjusting Width:
  selector{width: ##px;}
  
  
• Inserting a Scrollbar
  selector{height: ##px; overflow: scroll;}
  

Removing Elements

There is a way to "delete" certain content as well, which is quite simple:
selector{display: none;}


x

x

[Lady Saxophone]

ABOUT COLORS AND TRANSPARENCY
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Colors play an important part in much of what CSS does.
There a few different ways you can define a color though, so pick what method suits you best!


Accepted Color Values

• Color Name
  In order words, naming the color directly, like "red" or "blue" or "white"
  However, there are only so many names accepted by CSS, so this is pretty limited
  
  
• Transparent
  Simply typing "transparent" will make whatever property you are coding transparent
  
  
• Hexcodes
  Hexcodes are a string of six letters and numbers which stand for a color.
  For example, #FFFFFF is white, #000000 is black.
  When using hexcodes, make sure to put a number symbol (#) in front of the hexcode
  In order to get familiar with hexcodes, try using something like colorpicker to generate hexcodes for yourself.
  
  
• rgb and rgba values
  These use the amounts of red, green, and blue found in a color in order to set a color.
  RGB is the basic form, while RGBA allows you to adjust the transparency of the color you are using.
  For example, rgb(255, 255, 255) is white, while rgba(255, 255, 255, .6) is white which is 60% opaque.
  This can be useful if you want panels to be slightly transparent while keeping the content inside of them at 100% opacity.

Transparency

You can adjust the transparency of items on your profile with:
selector{opacity: 0.6;}
Change the number in red to any decimal value between 0 and 1 in order to increase/decrease transparency

[Lady Saxophone]

POSITIONING
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Sometimes you want to move your selectors to specific spots outside of the columns. This is possible through position properties.
Positioning elements is very similar to plotting points using X and Y coordinates, like back in Algebra class.
The only minor thing you have to keep in mind is overflow of outer elements. For example, #column_1 has a default overflow of "hidden", so if you try to position a panel outside of #column_1, it will disappear. To remedy this, simply set the column's overflow to "visible"


Step 1: Apply a position property

selector{position: value;}
The above code is your basic set up. The possible values for positioning is as follows:
relative = bases the selector's position based off of its surroundings and relation to its siblings. If you move a child above it, then the selector this is applied to will move as well.
absolute = removes a selector from its siblings so you can move it around freely within its parent. If a child above it is moved, it will not respond to this change.
fixed = removes a selector from its parent so that it is attached to the page
static = rarely used, but it is similar to relative positioning. However, none of the other positioning properties will work with it (top/bottom, right/left). You need to use margins instead.


Step 2: Apply your coordinates

I mentioned how this is like algebra class, with X and Y coordinates? In this case, you have top or bottom and left or right coordinates for elements. You typically only need one or two of these when re-positioning an element, and you do not use opposites together (i.e. don't use "right" and "left" for the same selector -- instead, you would use "right" and "top" or "right" and "bottom")
Their usage is very simple. For example: selector{top: 10px;}
That will position the element 10px from the top of its upper sibling or parent (depending on the position property you use along with it)
... And that's the very basics of positioning!


Something disappeared?!

Haha, no worries. Things almost never disappear unless you set them to display: none. They're always somewhere on your page.
Something to keep in mind while playing around with positioning is that #columns and #column_1 ~ 3 all have their overflow set to "hidden" by default. This means that if you try to move a panel outside of them, it will be clipped off once it passes the edges of its parent. In order to avoid this, simply set the columns to have a "visible" overflow.
#columns, #column_1, #column_2, #column_3{overflow: visible;}

Another thing which causes elements to "disappear" is when something covers up the thing you're trying to move. In order to avoid this, you might want to apply a z-index to the element which you want to be placed on top. z-indexing is used to make elements stack on top of each other, much like stacking sheets of paper into a pile. By default, all panels do not have an assigned z-index, so they follow the default stacking of the page: The first panel in the column stacks at the very bottom and the last panel stacks at the very top.
Applying a z-index is very easy. For example: #id_about{z-index: 1;}
You can assign any whole number to the element, both positive and negative (be aware that negative makes it stack behind your body element)
The bigger the number, the higher in the stack it will go, and vice versa.

[Lady Saxophone]

ADVANCED CODES
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

These are somewhat more complex codes


Centering everything on your page

#columns, #pictures_container, #texts_container {left: 50%; margin-left: -512px; position: absolute; top: 172px; width: 1024px;}
This works for the basic default set-up of v2 profiles, but if you want to change the width of the layout, then alter the "1024px" width.
The margin-left value must be half of the "width" value (and negative) in order for the layout to remain centered.

The "easier" way to do it is to use this code:
#columns{margin: 0 auto; float: none; position: relative; width: 1024px;}
Problem is this code is that if you apply the pictures and text containers to it, they can move around if the height of your #columns element changes.


Floating Avatar

This is a popular affect done using CSS animations, which are kind of complex for beginners.
NOTE: This only affects the image of your avatar inside of the "Details" panel
#id_details img, #animated_item {animation: bounce 1.0s ease-in-out infinite alternate;}
@keyframes bounce {0% {transform: translateY(0px);} 100% {transform: translateY(15px);}}
Numbers in green affect how fast the avatar moves
Numbers in red affect how high the avatar "bounces"


Rounded avatar decoration heads

.avatar_decoration img[src*='_48x48'] {border-radius: 100%;}
This only works with avatars which have been added through the "avatar" option on the profile editor
Images of avatars added through the "picture" or "text" option will not be affected


"Wallpaper" backgrounds

If you have a background image which you want to cover your entire page, use this:
html, body{background: url('image url here') no-repeat center center/cover fixed;}


Comments Panel -- Only Avatar Heads show

In order for this to work, your comments panel must be set to "Regular" display
#id_comments .dropBox{height: 45px; width: 45px; overflow: hidden;}
#id_comments .dropBox .avatarImage{height: 150px; width: 120px; position: relative; top: -30px; left: -46px;}
Note: Only works well for Human bases, not [Animal] ones


x

x

[Lady Saxophone]

RESERVED FOR FUTURE EDITING
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

[Lady Saxophone]

RESERVED FOR FUTURE EDITING
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

[Lady Saxophone]

RESERVED FOR FUTURE EDITING
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

[Lady Saxophone]

RESERVED FOR FUTURE EDITING
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀