Welcome to Gaia! ::

Should I make a detailed v2 template guide?

Yes - Is a must have! 0.6547619047619 65.5% [ 55 ]
Definitely - When you have time! 0.22619047619048 22.6% [ 19 ]
No - We the people don't care.. 0.05952380952381 6.0% [ 5 ]
Just STFU and go away 0.05952380952381 6.0% [ 5 ]
Total Votes:[ 84 ]
1 2 3 4 5 6 >

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Welcome to Profile Plus Solutions Classic CSS tutorial
I hope this will be easy to understand and learn.


The profile v2 template is now fully supported here. But not mentioned.

New CSS guide is complete and more detailed, having handy CSS3 codes.

Click here to see CSS tutorial

I'll start on the new Classic/Current combined guide.

As previously stated: this is a Classic style CSS tutorial. So please don't have a Current style theme and then say, "these codes don't work". If your not sure what your style of profile you have you can check it out here: account profileprefs.
Or you can do it the manual way My Gaia - Account Settings - Profile Options.
If you're new to CSS then start at step one, don't just skip posts and then say your confused or lost about what to do.

Side Note: I do all my coding in Firefox, with little cross browser configuration for Google Chrome/Safari, & Opera.

You can do your profile testing on your account, or you can also use GaiaTools - ProfileArchive (Profile Tester). Which can keep people from viewing your unfinished work if your picky about that sort of thing.
  • GaiaTools is provided by WindPowa not myself


I know there are a few threads out there to help people. But mine focuses on the CSS directly instead of how to customize each part of the profile.
This thread does have (or soon will have) every single customizable part of the OldSchool style profiles.
Note: I'll add some more things such as padding, cursors, Pseudo-elements, and some others..

User ImageThread is live.

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
RULES & Violation Results~
    Follow Gaia's T.o.S. and rules!
    1. Do not(!) PM Knight Yoshi (myself), unless directed other wise.
      1. Warning and thread redirection.
      2. Instant deletion of message.
      3. Instant deletion of message + Ban Hammer.

    2. Do not spam the thread with the same question, wait a few pages (approximately two or three pages).
      1. Warning x2.
      2. Ban Hammer.

    3. Do not spam the thread at all.
      1. Warning.
      2. Ban Hammer.

    4. Do not argue with anyone on this thread (no trolling/flaming/verbal abluse).
      1. Instant Ban Hammer.

    5. Do not Quote any of the information on in this tutorial or quote any large post.
      1. Instant Ban Hammer.

    6. Try to keep on topic, conversation is fine. But keep it to a minimal; thanks.
    7. Keep your grammar as legible as possible, no text talk.
    8. Apply yourself to finding the answer first (if possible) before posting here
    9. When posting a question, be detailed in your question. The better the question, the more I can be of help to you.

    Thread Staff~
    User Image Knight Yoshi - Owner
    Message - No
    Other Threads - (Coming Soon)

    Navigation~
    1. Welcome
    2. Rules & Violation Results
        A. Thread Staff
        B. Navigation (You are here)

    3. Browser Commands and Legend Key
        A. Miscellaneous Codes


    4. Section Names & Accessible Parts
        A. Gaia Header
        B. Extended Header
        C. Profile
        D. Details
        E. Wishlist
        F. About
        G. Friends
        H. Journal
        I. Multimedia
        J. Comments
        K. Signature
        L. Other


    5. THE BASICS
      1. Defining An Element/Section - Height & width, position, and margin
      2. Borders
      3. Elements/Sections Background
      4. Setting Fonts/Text Styles
          A. Font Types
          B. Text Formatting

      5. Properties of a Link


    6. ADVANCED CSS
      1. Section Hover
      2. Section Overflow
      3. Element Depth
      4. Advanced Text Formatting
      5. Section Transforming
      6. Opacity
      7. Box Shadow
      8. Text Shadow


    7. Reserved
    8. Thread Links & Affiliations
    9. Frequently Asked Questions

    10. Page Two
      • Post 1 - 5 Reserved.


    To be edited later IF needed.

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Browser Commands and Legend Key

Firefox specification; -moz-
Opera specification; -o-
Safari/Chrome; -webkit-

To add a comment into your coding "name" each part in your coding
/* This would be a comment */ All web browsers recognize this as an implemented comment in the coding and it will not show up on your profile or affect it in anyway.
Example:
/* This is for sizing the about section */
#about {height: 100px; width: 100px;}


To select all the children of a DIV, you use the asterisk( * ), this will select every child of the parent down to the text and links.

#friends * { Declaration properties } this will select all the elements listed below because they are child elements of the friends list DIV.
#friends h2
#friends .links
#friends p
#friends #friendGroup li
#friends #friendGroup li p
#friends #friendGroup li img

Units
Pixels = px (most commonly used and recommended)
Inches = in
Percent = %

Miscellaneous Codes


This will remove a section #section {display: none;}

This will remove that annoying border to the right #content {border-right:none;}

This will center the profile #site {margin-left: auto; margin-right: auto;}

This will remove "find friends" #find_friends_banner {display:none;}

This will remove the "alert me of comments" #alerts_banner {display:none;}

This will remove the drop box from the Current theme profiles that occurs in Classic theme profiles #avatar_dropbox {display: none;}

This will reverse the positioning of your profile
#content #sidebar { left: 520px; width: 230px }
#content #main { margin-left: -10px; width: 500px; }


This will remove everything except the required Gaia nav. bar at the top of the page.
#extendedProfileBody h1 {display: none;}
#content {display: none;}

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Section Names & Accessible Parts
    Remember this Ctrl+F is your best friend
    when looking for something specific.


Gaia Header
#gaia_header ~ It's the bar at the very top of your profile that your not allowed to edit (except for background color/images).
    #gaia_header #header_left ~ It's the left part that sits on the #gaia_header. It contains the "My Gaia, Shops, etc".
    (Not allowed to remove, or edit, except for color/images and height/width.)
      #gaia_header #header_left img ~ Is the part that says "Gaia" in the black box next to the links
      (not suppose to remove).

    #gaia_header #header_right ~ It's the right part that sits on the #gaia_header. It contains the "Register link (for those not registered/logged-in), Profile Options (for the owner), Recommend (for the visitor), and Sign Out"
    (Not allowed to remove, or edit, except for color/images and height/width.)
      #gaia_header #header_right img ~ Is the part that has the "Register Now" image for when your not logged-in
      (not suppose to remove).


Extended Header
#header ~ Controls the box with the default house background image.
    #extendedProfileBody #header h1 ~ It's the part that contains the house image at the top of every basic OldSchool profile.
      This image view image


Profile
#sidebar ~ Contains the entire profile box; contact bar, avatar, and equipped items list.

#profile ~ Contains the contact bar, avatar, and equipped items list.
    #profile h2 ~ Controls the header (your name) for the profile box.

#profile .avatar ~ Controls your avatar; height/width, background, etc.
    #profile ul.items ~ Controls the items equipped to your avatar.
      #profile ul.items img ~ Controls each image individually as a whole.

#profile #bar ~ Controls the contact bar.
    #bar #onlineButton ~ Controls the online option for when you're online.
    #bar #offlineButton ~ Controls the offline option for when you're offline.
    #profile #bar #addButton ~ Controls the add button.
    #profile #bar #msgButton ~ Controls the message button.
    #profile #bar #tradeButton ~ Controls the trade button.
    #profile #bar #ignoreButton ~ Controls the ignore button.


Details
#details ~ Controls the entire details section.
    #details h2 ~ Controls the header of the details.

#details dl ~ Controls the details info part (all of it).
    #details dl#info ~ Controls Location, Occupation, Gender, and B-day.
    #details dl#stats ~ Controls Last Login, Total Posts, Posts Per Day, and Member Since

#commonFriends ~ Controls the friends in common, people see when they view your profile.
    #commonFriends li img ~ Controls the friends in common images.


Wishlist
#wishlist ~ Controls the place of all your wishful items.
    #wishlist h2 ~ Controls the wishlist header.

#wishlist .items ~ Controls each wishlist item as a whole.
    #wishlist .questing ~ Controls the questing wishlist items.
    #wishlist .bought ~ Controls the bought wishlist items.
    #wishlist .donated ~ Controls the donated wishlist items.


About
#about ~controls the entire about section.
    #about h2 ~ Controls the about header.

#about .links ~ Controls the view posts, view guilds, and view store links.


Friends
#friends ~ Controls your friends list that are displayed.
    #friends h2 ~ Controls the header to the friends.

#friends .links ~ Controls the view all friends link.

#friends p ~ Controls the view # of # friends under the view all friends link.
    Side Note: This will also control the displayed friend username. To fix this, see #friends #friendGroup li p below.


#friends #friendGroup li ~ Controls the part that the friends displayed avatar sits on.
    #friends #friendGroup li p ~ Controls the user names of your displayed friends separate from the #friends p.
    #friends #friendGroup li img ~ Controls the displayed friends avatar.


Journal
#journal ~ Holds your journal entries section.
    #journal h2 ~ Controls the header for the journal section.
      #journal h3 ~ Controls the title name of your journal.

#journal .links ~ Controls the view journal link at the top.
#entries ~ Controls the three most recent journal entries title & date.


Multimedia
#multimedia ~ Controls the box for your flash content on your profile.
    #multimedia h2 ~ Controls the header to the media section.

#multimedia embed ~ Controls the flash content; height/width.


Comments
  • I do believe everything is now up-to-date and better organized.

#comments ~ Controls the displayed comments that people leave.
    #comments h2 ~ Controls the header to the displayed comments.

#comments .links ~ Controls the add comment and view comments links.

#alerts_banner ~ Controls the alert me of comments that the owner sees.

#comments p ~ controls the Viewing 10 of 20 comments. Also controls the Report button, comment date, and avatar user name.

#comments dl dt.avatar img ~ Controls the displayed avatar on the left.
#comments dl dt.avatar2 img ~ Controls the displayed avatar on the right.

#comments .message ~ Controls all the text and caption arrow from the avatar in all comment boxes.
    #comments .date ~ Controls the time stamp (date and time) as well as the Report button for the comments.
      #comments .date a ~ Controls the Report button for the comments.
        #comments .postcontent ~ Directly controls the users comment text for all comments.


#comments .caption ~ Controls the odd number boxes (the 1st, 3rd, 5th, 7th, & 9th posts).
    #comments .caption .message ~ Controls all text and the caption arrow from the avatar inside the odd number comment boxes.
      #comments .caption .date ~ Controls the time stamp (date and time) as well as the Report button for the odd comments.
        #comments .caption .date a ~ Controls the Report button for the odd numbered comments.
          #comments .caption .postcontent ~ Directly controls the users comment text for the odd numbered comments.


#comments .caption2 ~ Controls the odd number boxes (the 2nd, 4th, 6th, 8th, & 10th posts).
    #comments .caption2 .message ~ Controls all text and the caption arrow from the avatar inside the even number comment boxes.
      #comments .caption2 .date ~ Controls the time stamp (date and time) as well as the Report button for the even comments.
        #comments .caption2 .date a ~ Controls the Report button for the even numbered comments.
          #comments .caption2 .postcontent ~ Directly controls the users comment text for the odd numbered comments.


#comments ul.admin ~ Controls the delete and the comment back buttons that the owner sees.
    #comments ul.admin a ~ Controls the comment back button.
    #comments ul.admin li ~ Controls the delete button.


Signature
#signature ~ Controls your own personal signature box.
    #signature h2 ~ Controls the header to the signature box.


Other
html ~ The entire web document
    body ~ Body of the web document, often used for setting page backgrounds & cursors
      #site ~ Wrapping container for the entire profile content
        #content ~ child element of '#site' also a wrapping container for the profile content

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Frequently Asked Questions

  1. Question: Why have you not responded to my question yet!?
    • Answer: I might be busy, maybe your question wasn't clear enough, maybe it was just too simple (check the thread before posting)


  2. Question: Can I PM you for help?
    • Answer: Did you not read the rules? You can't PM me unless directed other wise.


  3. Question: Where did you get your profile, and can I have it!?
    • Answer: I made it myself using my vast knowledge of CSS, and no you may not, it's too complex anyways.


  4. Question: Since you won't give me your profile, will you make one for me?
    • Answer: I can make one for you yes, but I don't do graphics, you will already need the images and tell me how you want it.


  5. Question: Sweet, so I have everything for you to make my profile, you'll make my profile for free right?
    • Answer: Most definitely not. Because it does take my time. Prices will vary on the complexity of the profile.
      • Payment is required upon me completing the profile.
        ---I will work out how to calculate prices later.
        • I reserve the right to reject making a profile at anytime.


  • Question: Can I be a Thread Staff member?
    • Answer: Yes, but you must at least know the basics and how to assist people with their questions. Also you must know how to help fix an error. You will also need to fill out an application (view below) and PM it to me. Yes really PM me your application.
      Message Title: Profile Plus Application
      (Place avatar head here)[color=green][b]USERNAME - Thread Staff[/b][/color]
      Message - Yes or No
      Owned Threads - Have a thread, Link it.

      FIND THE MISTAKE(s):
      #profile {position:absolute; top: 215px left: 440px;
      background: #CC000 url(http://www.CAN_YOU_FIND_IT.png) top left no-repeat;
      height: 350px; width: 400px;

    Get your avatar head BBcode HERE (the one on the right)

  • Question: Will you put my thread link on your thread?
    • Answer: Yes, just PM me your thread banner.
      Message Title: Thread Affiliation
  • Quick Reply

    Submit
    Manage Your Items
    Other Stuff
    Get GCash
    Offers
    Get Items
    More Items
    Where Everyone Hangs Out
    Other Community Areas
    Virtual Spaces
    Fun Stuff
    Gaia's Games
    Mini-Games
    Play with GCash
    Play with Platinum