Master List of Modules

.xg_module - the general module code. The codes place here is applied to all modules present in the page. A module is compose of a module head, module body and a module foot.
     .xg_module_head - the general module head code. The codes place here is applied to all modules present in the page.

     .xg_module_body - the general module body code. The codes place here is applied to all modules present in the page.

     .xg_module_foot - the general module foot code. The codes place here is applied to all modules present in the page.

The List

#xj_module_gift - the module that shows your gifts...
.module_members - the module that shows your friends
.module_about_user - the profile information module
.module_blog - the blog module
 .module_birthdays - the birthdays module
.module_forum - the forum module(the one that displays your topics)
.module_feed - the feed module
.music - the music module
.module_photo - the photos module (your uploaded photos)
.module_notes - I kinda forgot what this was :/
.module_video - the video module(your uploaded videos)
.xg_module_comment_wall - the comment wall
.module_events - the events module
.module_groups - the group module
#xg_profile_activity - the activity module

To customize each module and each of its parts, first you choose a module to customize.
example:
I will be using the blog module.

.module_blog

To customize its header put the code (.xg_module_head) after it and separate it with a space in between the two codes. Like this:

.module_blog .xg_module_head

To customize its body put the code (.xg_module_body) after it and separate it with a space in between the two codes. Like this:

.module_blog .xg_module_body

To customize its footer put the code (.xg_module_foot) after it and separate it with a space in between the two codes. Like this:

.module_blog .xg_module_foot

Saiya's Guide To Hydronime CSS for Loki-nii~ (yay!)

As the title says =w=V

css syntax :
types of selectors:
      classes are  prefixed with a period (.)
      ids are prefixed with a hash( #)
element is the general

selector { property: value ;}
INDEX - will be updated once in a while
     ⇢ Master list of Properties and Values
     ⇢ Master list of Modules
     ⇢ Grouping and Nesting
     ⇢ Custom Column Codes
     ⇢ Slider Effect on Masthead

     ⇢ Customizing Module Position(N/A)

     ⇢ Different Hover Effects(N/A)

FLOW OF THE BASIC COMMON CODES    from the very back to the very front

BASIC/COMMON SELECTOR CODES  

body - this selector deals with the background color/image and main text color of your page.
#xn_bar - this is the ning bar selector
#xg_theme - dunno how to explain, just refer to picture :D
#xg_themebody - dunno how to explain, just refer to picture :D
#xg - this is the selector with the contents of your page
.xg_head - this is the selector class that holds the #xg_head and #xg_navigation

#xg_head - you can put a background here too
#xg_masthead - this is like the banner area....it's infront of the #xg_head
#xg_navigation - the ones with the tabs and links that lead you to other pages of the site
#xg_foot - the one with the created by area, useful links, trending topics and etc ads.
        #xg_ad_below_footer .xg_ad xj_ad_below_footer - 'general' code for the useful links etc...
       .navi - is the code for the useful links, trending topics and etc ads.
       .navi ul - is the code to edit its text, displau and etc....
       .navi ul li - is the code to edit list text display and etc....
       .navi ul h3- is the code to edit the head text, display and etc....
.copyright - the one with the created by area, useful links, trending topics and etc ads.

    TEXT SELECTORS 

a - this selector defines the normal text colors
a:link - defines the link text colors
a:visited - defines the links that you've visited's colors
a:hover - defines the link text colors when you've hovered on to it
a:active - defines the link text colors that are currently in use
h1 - the selector that defines the header types of texts in hydronime's case, the status text.

Slider Effect on Masthead

The very important ones in the code are in red and some are highlighted.

First before everything else, think of how many images you may want to be shown in your slider.

In my code's example I will be doing a slider on four images.
The effect will be a 'push-in' like effect in the direction of right to left.

Question: Why are there 5 URLs provided in the background?
Answer: If look through each image, the first and last image are actually just the same. The first image is duplicated and placed in the last part for a smoother transition effect between the fourth image and the first image.

 Question: How to add another image?
Answer: Simply place a comma(,) and url(link.png) -[, url(link.png)] code in the background area in the masthead element. But keep in mind that the first and the last image must be the same if you want a smoother transition. Also, make sure to add another coordinate set in the background-positions in your masthead and keyframes elements. 


 Question: Can I change transition direction?
Answer: Yep, you can. Just change all the positive values to negative and all the negative values to positive for left to right direction. And instead of subtracting, you add.  

Top to bottom and bottom to top transition means you're gonna be using the height, so substitute all widths in the formulas to heights, place the values in the y-coordinates and make sure all x-coordinates are zero. 

Top to bottom transition sample initial position code:
background-position: 0px 0px, 0px -590px, 0px -1180px, 0px -1770px, 0px -2360px;
For the next sets of codes you just add the height to the values

For bottom to top transition just make all the negatives in the top to bottom position sample code, positive. And subtract the height in the values for the next sets.

legend: first image, second image, third image, fourth image, fifth image

background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;
background-position: first image x and y coordinates, second image x and y coordinates...so on and so forth..

As explained in the background category in the properties master list, 0px 0px, means left top in words.
The flow of the background-position is the same all throughout the code.
Putting a comma between coordinates would mean that the set of coordinates is specifically for the corresponding image in the same order as it. Therefore, first set is for the first image, second set is for the second image, so on, so forth.

NOTES:

A.)In the keyframes, since the first image and last image is the same, doesn't mean keyframe 0% and 100% is the same. The flow for the x-coordinate values of 100% will be opposite the flow of 0%

0%{background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
----insert 25%, 50% and 75% here (will be shown in code)
100%{background-position: -3280px 0px, -2460px 0px, -14640px 0px, -820px 0px, 0px 0px;}

B.)The coordinates of the first image should always be 0px 0px. The x-coordinates of the preceding coordinates will depend on your masthead size.

lalala unicorn's made-up guide formula for the x-coordinates for 0%:

(0*width)px 0px, (1*width)px 0px, (2*width)px 0px, (3*width)px 0px, (4*width)px 0px
The formula continues until the last image. So, more images means more math! :D
For the next sets of coordinates(in 25%, 50% and so on), you just subtract the width to each.

C.)The more images the more percentages. In this example there are a total of five images involved, including  the repeated image. Therefore, there are five different sets of keyframe percentage, namely, 0%-25%-50%-75%-100%. To get the percentages you just have to follow the formula below.

n=total number of images
100/(n-1) for the first percentage. 2*[100/(n-1)] for the second percentage.....until you reach 100%

You subtract one because the initializing percentage will always be 0%.

------------------------------
/*code start*/
#xg_masthead
{
overflow: hidden;
margin-top: 10px;
margin-left:-170px!important;
height:590px;
width:820px;
background: url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsb913a39f.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/1_zps0ff2699c.jpg), 
url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsec37522f.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/2_zpse16f576a.jpg), url(http://i706.photobucket.com/albums/ww68/natsumeluka/masthead_zpsb913a39f.jpg);
background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;
background-repeat: no-repeat;
border: 3px solid white;
-moz-box-shadow:    3px 4px 5px -2px #000;
-webkit-box-shadow: 3px 4px 5px -2px #000;
box-shadow:         3px 4px 5px -2px #000;
-webkit-animation: slider 15s infinite;
-moz-animation: slider 15s infinite;
-ms-animation: slider 15s infinite;
-o-animation: slider 15s infinite;
animation: slider 15s infinite;
}

@keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;} 
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-moz-keyframes slider {
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;} 
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-webkit-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;} 
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-ms-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;} 
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}
@-o-keyframes slider{
0% {background-position: 0px 0px, 820px 0px, 1640px 0px, 2460px 0px, 3280px 0px;}
25% {background-position: -820px 0px, 0px 0px, 820px 0px, 1640px 0px, 2460px 0px;} 
50% {background-position: -1640px 0px, -820px 0px, 0px 0px, 820px 0px, 1640px 0px;}
75% {background-position: -2460px 0px, -1640px 0px, -820px 0px, 0px 0px, 820px 0;}
100% {background-position: -3280px 0px, -2460px 0px, -1640px 0px, -820px 0px, 0px 0px;}
}

------------------------------

Column codes( 1 or 2 columns)

legend:
A- first column(one with your avatar)
B- second column(wider column)
C- third column(with the signout box)

Two Column codes
     - columns included: A and B

The Key codes to remove column C are these

.xj_sidebar_content - under this is the events and birthdays modules omo
.xj_user_info - under this is the header of the sign out box and the awaiting comments box

.xg_widget_profiles_profile_show .xg_column.xg_span-4 .xg_last.xj_classic_sidebar,.xg_widget_profiles_profile_show
.xg_column.xg_span-4.xg_last - this is general code - the whole column.
                                    note: this code does not work on hydronime


so below, are the codes omo any comments will be prefixed with //
-----------------------------------
/*code start*/
.xj_sidebar_content, .xj_user_info {display: none!important;}

.xg_widget_profiles_profile_show .xg_colgroup.last-child 
{
width:750px!important;
}
.xg_widget_profiles_profile_show .xg_3col .xg_2col //code for column B
{
overflow-x:hidden!important;
overflow-y:hidden!important;
width: 500px !important;
}
.xg_widget_profiles_profile .xg_3col .xg_1col //code for column A
{
overflow-x:hidden!important;
overflow-y:hidden!important;
width:200px !important;
}
#xg{margin-left: 300px;}
-----------------------------------
To switch the position of column B and column A
you add the position property and use the left and right properties to move it around
-----------------------------------
/*code start*/
.xj_sidebar_content, .xj_user_info {display: none!important;}

.xg_widget_profiles_profile_show .xg_colgroup.last-child 
{
width:750px!important;
}
.xg_widget_profiles_profile_show .xg_3col .xg_2col
{
margin-right:0px!important;
overflow-x:hidden!important;
overflow-y:hidden!important;
position: relative!important;
width: 500px !important;
right:220px;
}
.xg_widget_profiles_profile .xg_3col .xg_1col 
{
margin-left:0px!important;
overflow-x:hidden!important;
overflow-y:hidden!important;
width:200px !important;
position:relative!important;
left: 510px;
}
#xg{margin-left: 270px;}

One Column code
     - column included: B

The Key codes to remove column A are these

 .xg_widget_profiles_profile .xg_3col .xg_1col - under this is the avatar and other modules under it
         *refer to Two Column Codes for Key codes to remove column C

-----------------------------------
/*code start*/
.xj_sidebar_content, .xj_user_info, .xg_widget_profiles_profile .xg_3col .xg_1col 
 {display: none!important;}

.xg_widget_profiles_profile_show .xg_colgroup.last-child 
{
width:750px!important;
}
.xg_widget_profiles_profile_show .xg_3col .xg_2col
{
margin-right:0px!important;
overflow-x:hidden!important;
overflow-y:hidden!important;
position: relative!important;
width: 600px !important;
left: 170px;
}

Grouping and Nesting

Grouping is when you put tons of elements together, put a comma to separate them and style them in the same manner.

example:

body, #xg, #xg_masthead {

  background-color: #000;  

  background-image: url(blah.png);  

  background-repeat: repeat-x;  

  background-attachment: fixed;

  background-position: center center;

}


Nesting is when you put tons of elements together, separate them with a space and style only what's a chosen element

In the example below, I will only be styling the 'a' or text of the module head of the comment wall.
The code if translated means that 'a' is a part of the module head of the comment wall who is found in the second column.

example:

#xg_layout_column_2 .xg_module_comment_wall .xg_module_head a{

  background-color: #000;  

  background-image: url(blah.png);  

  background-repeat: repeat-x;  

  background-attachment: fixed;

  background-position: center center;

}

Master List of Properties and their corresponding values

This is only based on what I know so this'll be updated from time-to-time and you might see new properties and values sooner or later~ :3

syntax - property: value;

Background
     - this sets the background of a class, it is applicable to any type of class even in text classes
background-color - this sets the background color - it's behind the image
              values:
                            rgb( 0, 0, 0, 1) 
                                ↳ rgb(red, green, blue, opacity)    
                            #000000/#ffffff 
                                ↳ hex code

       ⌦difference between rgb and hex is that rgb allows you to lower the opacity of your color

background-image - this sets the background image
              values:
                            url(www.insertdirectimagelinkhere.com) 
                  
background-repeat - this sets whether you want it to repeat horizontally. 
              values:
                            repeat-y 
                                ↳ vertical repetition of image    
                            repeat-x 
                                ↳ horizontal repetition of image

background-attachment - this sets how your image will be placed, will it remain in one spot when you scroll or be the same background until the end of time
              values:
                            fixed 
                                ↳ image is positioned relative to browser window   
                            scroll 
                                ↳ background remains in original position


background-position - this sets the original placement/location of your background image it is relative to the browser window of the viewer
              values:
                      value flow:
                            x-placement/horizontal y-placement/vertical    

                             center bottom  -  center top  -   center center   -  left top 
                             left bottom  -  left center   -  right top      -  right bottom  -  right center                        
                             x% y%
                                ↳ 0% 0% is for left top and 100% 100% is for right bottom   
                             xpos ypos
                                ↳ 0 0 or 0px 0px
                             xpos ypos
                                ↳ 0 0 or 0px 0px

shortcut: background: #00ff00 url('smiley.gif') no-repeat fixed center;

Border and Border-Radius
     - Border sets the border of a class, it is applicable to any type of class even in text classes
     - Border-radius sets the roundness of a class, it is applicable to any type of class even in text classes
border 
              values:
                             size-in-px    border-style     color
                             border styles:
                             dotted - dashed - solid - double - groove - inset - outset - ridge - hidden
                             color:
                            rgb( 0, 0, 0, 1)  - #000000/#ffffff 

border-radius
              values:
                             size-in-px
Color
     - sets the text color. - applicable to any class
color 
              values:
                            rgb( 0, 0, 0, 1)  - #000000/#ffffff 
Display
     - sets how a class is displayed  - applicable to any class
display 
              values:
                             inline
                                ↳ module 1  module being edited module 3

                             block
                                ↳ module 1 
                                    module being edited
                                   module 3
                             list-tem 
                                ↳     module 1 
                                   *   module being edited
                                       module 3
                             none  - module is not shown/hidden
                                ↳     module 1  module 3
Font
     - sets the font of the text of class  - applicable to any class
font-style 
              values:
                             italic  -  oblique
font-variant  - sets how text may appear( this is not included in shortcut)
              values:
                             small-caps  -  normal  -  inherit  
                                                                        ↳ follows the default preset of the server
font-weight 
              values:
                             normal  -  bold  -  bolder  -  lighter   -  100/200/300/400/500..... 
                                                                                          ↳ 100 being the lightest, 400 equal to 
                                                                                              normal 700 equal to bold, 900 being 
                                                                                              the boldest
font-size 
              values:
                             sizein-px
line-height 
              values:
                             sizein-px
letter-spacing  - sets the space between letters (this property is not included in shortcut)
              values: 
                             sizein-px
font-family 
              values:
                             font1, font2, font 3
                              ↳ if font1 isn't available, then it checks if the next one is and uses it 
                                   if it is available and so on and so forth.

ADVICE:  use common fonts like arial or serif since newer fonts availability would depend on the server and it may not be available

SHORTCUT: 
font 
              value:
                             italic bold 15px/20px "Times New Roman", Serif
                                ↳ respectively> font-style font-variant font-weight font-size/line-height font-family
Height and Width
     - sets the height and width of a class, this does not include borders, paddings and margins
     - add 'max-' to set the maximum height or width and 'min-' for the minimum
     - applicable to any class
height or width 
              values:
                             sizein-px  -  100% -  auto -  inherit
                                                  ↳ height is relative to browser window so 50% would mean only half 
                                                       the  size of the browser window 
Left, Right, Top and Bottom
     - sets the height and width of a class
     - works hand-in-hand with position property 
     - position property is a prerequisite 
     - applicable to any class
left/right/top/bottom 
              values:
                             sizein-px  -  100%
Margin
     - sets the height and width of a class
     - applicable to any class
     - add '-left', '-right', '-top', '-bottom' to set margin on left, right, top and bottom side differently 
margin 
              values:
                             sizein-px  -  100%
Opacity
     - sets opacity of a class
     - applicable to any class
opacity 
              values:
                             1 with full opacity  - 0 with zero opacity -  0.1 for 10%, 0.2 for 20%, etc.
Overflow
     - sets overflow of content
     - applicable to any class
     - add '-x' or '-y' for overflow direction customization
overflow 
              values:
                             hidden 
                             ↳shows only what fits in the container 
                             auto  
                             ↳puts scrolls depending on overflow 
                             visible 
                             ↳shows everything disregarding container size
                             scroll 
                             ↳puts scroll on both the x and y axis disregarding the overflow direction
Padding
     - sets 'space' between the content and edge of a class
     - applicable to any class
     - add '-left', '-right', '-top', '-bottom' to set padding on left, right, top and bottom side differently 
padding 
              values:
                             sizein-px  -  100%
shortcut: padding: topvalue rightvalue bottomvalue leftvalue ;

Position
     - sets position of the class
     - applicable to any class
position 
              values:
                             relative 

                             ↳ original position is it's default position    
                             fixed  
                             ↳ relative to browser window
                             absolute 
                             ↳original position is it's default position but it's default z-index 
                                is lower than the other modules
                             scroll 
                             ↳puts scroll on both the x and y axis disregarding the overflow direction
Text
     - sets how the text is displayed
     - applicable to any class
text-align 
              values:
                             right  -  left  -  center  -  inherit 
text-decoration 
              values:
                             overline  -  line-through  -  underline  -  blink 
text-shadow 
              values:
                             2px 2px 3px #fff 
                             ↳horizontal-displacement vertical-displacement blur-radius shadow-color
text-transform 
              values:
                             uppercase  -  lowercase  -  capitalize 
Visibility
     - sets how the class is displayed
     - applicable to any class
visibility 
              values:
                             visible  -  hidden 
Z-index
     - I don't really know how to describe this but...it's like layers in photoshop
     - applicable to any class
z-index 
              values:
                             numbers  

WITHOUT POSITION PROPERTY 
                        the lowest value(eg,1) is on the very top while the highest value(eg.999)
                        will be in the very back
WITH POSITION PROPERTY
                       the highest value will be on the very top while the lowest will be on the
                       very back