Welcome to Gaia! ::

Reply CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)
Tutorial Links and Commonly Asked-For Codes (Update: 09.01) Goto Page: 1 2 [>] [»|]

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Do you like CSS?
Love it!
49%
 49%  [ 119 ]
It's okay...
16%
 16%  [ 39 ]
I'm ambivalent.
8%
 8%  [ 20 ]
NO!
6%
 6%  [ 16 ]
I don't even know CSS.
18%
 18%  [ 45 ]
Total Votes : 239


Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline
PostPosted: Thu Jun 01, 2006 2:45 pm


Yup, I'm going to stream line some of the tutorials that are floating around here and answer some of the most commonly asked questions, mostly the ones that can't be found in tutorials. If you see something that needs to be added or have a tutorial you want on here, let me know. I'll get it added as soon as I can.

Table of Contents:

Post One: Introduction Post
Post Two: How do I make a profile? [Tutorial Links]
Post Three: How do I...
  • ...make things gray?
    [/color]
    [*]...make things glow? [color=#AAAAAA][Code][/color]
    [*]...make things slightly transparent? [color=#AAAAAA][Code][/color]
    [*]...make a section scroll? [color=#AAAAAA][Code][/color]
    [*]...color my scrollbars? [color=#AAAAAA][Code][/color]
    [*]...change my cursor? [color=#AAAAAA][Code][/color]
    [*]...resize my multimedia? [color=#AAAAAA][Code][/color]
    [*]...hide the text in the headers? [color=#AAAAAA][Code][/color]
    [*]...remove the corners from my comments? [color=#AAAAAA][Code][/color]
    [*]...and from my quote bubble? [color=#AAAAAA][Code][/color]
    [*]...remove the triangle from my comments? [color=#AAAAAA][Code][/color]
    [*]...and from my quote bubble? [color=#AAAAAA][Code][/color]
    [*]...remove anything? [color=#AAAAAA][Code][/color]
    [*]...get rid of the line down the right side of my profile? [color=#AAAAAA][Code][/color]
    [*]...get rid of the space at the bottom of my profile? [color=#AAAAAA][Code][/color]
    [*]...stop my comments from overlapping my signature? [color=#AAAAAA][Code][/color]
    [*]...remove the avatars from my comments? [color=#AAAAAA][Code][/color]
    [/list][b][url=http://www.gaiaonline.com/guilds/viewtopic.php?page=1&t=3330545#63462848]Post Four:[/url][/b] Mini-Tutorials
    [list][*]I can't get my YouTube multimedia to work. What URL do I use? [color=#AAAAAA][Explination][/color]
    [*]How do I move sections around? [color=#AAAAAA][Tutorial][/color]
    [*]How do I make custom sections? [color=#AAAAAA][Tutorial][/color] (rough draft)
    [/list]


    [b]Stuff to be added...[/b]


    [b]Mini-Tutorials[/b][list][*]Making Your Profile Work in Other Browsers [codes] - See [url=http://www.gaiaonline.com/guilds/viewtopic.php?t=2125351]this thread[/url] for now.
    [*]Sizes [info]
    [/list]

    Some Tutorials in this Guild:

    [list][*][b]Sticky: [url=http://www.gaiaonline.com/guilds/viewtopic.php?t=2232749]Getting Started - A CSS Over-ride listing[/url][/b] by Isaviel
    [*][url=http://www.gaiaonline.com/guilds/viewtopic.php?t=2898939]Profile - Guide to making a Flash Music Box in Flash[/url] by ElderKain
    [*][url=http://www.gaiaonline.com/guilds/viewtopic.php?t=2230412]Hoff's Random Goodies[/url] by Georgenhoff
    [*][url=http://www.gaiaonline.com/guilds/viewtopic.php?t=2729659]Adding titles to you friends (CSS2 declaration)[/url] by Rising King of Shojo
    [*][url=http://www.gaiaonline.com/guilds/viewtopic.php?t=1673219]How to make the Online/Offline Bar.[/url] by Sors
    [/list]
PostPosted: Thu Jun 01, 2006 2:46 pm


How do I make a profile?

There are a lot of good CSS tutorials around Gaia that will help you get started. Read through them and then just try it out. The great thing about CSS is that even if you make a mistake, you can undo it. If you have any questions after reading these, feel free to peruse this sticky or ask away.

Guild Sticky: Getting Started - A CSS Over-ride listing by Isaviel


Profile Discussion Threads:

Gaia Guides and Resources Threads:

This isn't a comprehensive list of tutorials, but it should get you started.

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline
PostPosted: Thu Jun 01, 2006 2:47 pm


How Do I...


...make things gray?
    Quote:
    filter: gray


    Example: #profile .avatar {filter: gray; } will make your avatar gray.

    NOTE: This filter is only supported by IE.

...make things glow?
    Quote:
    filter: glow(color=#______, strength=_)


    Color is a hexidecimal number.
    Strength is any number between 1 and 255.

    Example: #profile .avatar {filter: glow(color=#CC0000, strength=255); } will make your avatar glow red.

    NOTE: This filter is only supported by IE.

...make things slightly transparent?
    Quote:
    filter: alpha(opacity=_); opacity: _; }


    The first opacity is a number between 1 and 100.
    The second opacity is the decimal version of that number.

    Example: #profile .avatar {filter: alpha(opacity=50); opacity: .5; } will make your avatar appear partially transparent.

...make a section scroll?
    Quote:
    height: __px; overflow-y: auto; overflow-x: hidden;


    The height is any number you'd like, but for the scrolling to be in affect it must be less than the height of that section when it doesn't scroll.

    Example: #about {height: 100px; overflow-y: auto; overflow-x: hidden; } will make your About section scroll.

...color my scrollbars?
    Quote:
    body, html {scrollbar-track-color: #______;
    scrollbar-face-color: #______;
    scrollbar-arrow-color: #______;
    scrollbar-shadow-color: #______;
    scrollbar-darkshadow-color: #______;
    scrollbar-highlight-color: #______;
    scrollbar-3dlight-color: #______; }


    #______ is any hexidecimal number.

    NOTE: This will only work IE.

...change my cursor?
    Quote:
    cursor: _____


    Fill in the blank with one of these:
    • crosshair
    • pointer
    • wait
    • text
    • help
    • move
    • n-resize
    • ne-resize
    • nw-resize
    • e-resize
    • w-resize
    • s-resize
    • se-resize
    • sw-resize
    • url(IMAGE.cur)

    "IMAGE.cur" is for a custom cursor. To make one, you need a cursor making program and an image host that supports .cur files.

    Examples: body {cursor: crosshair; } will give your entire profile a crosshair curosr. a {cursor: pointer; } will give your links the hand cursor.

...resize my multimedia?
    Quote:
    #multimedia embed {width: __px; height: __px; }


    Specify the height and width you want the file to be. If you only know either the width or the heigth, then you can specify just that one and not specify the other. The file will stay in proportion.

    (Code originally posted by StephieSama.)

...hide the text in the headers?
    Quote:
    .section h2 {text-indent: -50000px; }


...remove the corners from my comments?
    Quote:
    #comments .caption:before, #comments .caption:after, #comments .caption2:before, #comments .caption2:after {display: none; }


...and from my quote bubble?
    Quote:
    #profile .caption:before, #profile .caption:after {display: none; }


...remove the triangle from my comments?
    Quote:
    #comments .message {background-image: none; }


...and from my quote bubble?
    Quote:
    #profile .message {background-image: none; }


...remove anything?
    Quote:
    display: none;


    Example: #about .links {display: none; } will remove the links in your about section (View Posts, View Guilds, View Store).

...get rid of the line down the right side of my profile?
    Quote:
    #extendedProfileBody #header, #content {border-right: 0; }


...get rid of the space at the bottom of my profile?
    Quote:
    #content {height: __px; }


    Just set the height to where you want your profile to end.

...stop my comments from overlapping my signature?
    Quote:
    #comments {position: relative; }


...remove the avatars from my comments?
    Quote:
    #comments .avatar, #comments .avatar2 {display: none; }
PostPosted: Thu Jun 01, 2006 2:48 pm


I can't get my YouTube multimedia to work. What URL do I use?
    In the "About This Video" section, you are given two codes: URL and Embed. Take the Embed code and find the URL in quotes after src=. That's the URL you need to use to get your multimedia to show up properly.

    Example: This is the embed code for this video. The correct URL to use is bolded.
    Quote:


How do I move sections around?
    To move things around you use the "position" code. There are two types of positioning: relative and absolute.

    Quote:
    position: relative;

    Quote:
    position: absolute;

    Relative positioning moves an object around relative to where it is on the page. Absolute positioning removes an object from the flow of the page and moves it around its containing object.

    Imagine you're waiting in a line with your friend at the theater. The theater is your profile; the line for a ticket is the coding of the profile; you are the containing object (say the About box); and your friend is the content within that box (the About text). If your friend leaves and moves around the theater while you stay put, keeping both of your places in line, that's relative positioning. If you both leave the line and move around the theater and lose your line in place, that's absolute positioning.

    To actually move around an object, you use "top" and "left" codes, filling in a number to indicate how many pixels you want the object to move:

    Quote:
    position: relative; top: __px; left: __px;

    Quote:
    position: absolute; top: __px; left: __px;


    A positive number in "top" will move the object down that many pixels; a negative number will move it upwards. A positive number in "left" will move the object to the right; a negative, to the left.

    For a more detailed explination, read this tutorial.

How do I make custom sections?
    This is far easier to do if you already know exactly what sections you want on your profile and where you want them.

    To start, you go to My Gaia > Profile > About. All of the content of your new sections will go in there, with each section wrapped in an ordered list tag. If you have multiple sections, they must be stacked inside each other.

    Your main About text is outside the lists.

    [list=1]
    This would be the text of the first custom section.

    [list=1]
    This would be the text of the second custom section.

    [list=1]
    This would be the text of the third custom section.
    [/list]

    [/list]

    [/list]


    After you've submitted your About text, you then go to your theme section and apply CSS code to each section to move it around.

    This would be the code for the first custom section:
    Quote:
    #about ol {position: absolute; top: __px; left: __px; }


    This is for the second custom section:
    Quote:
    #about ol ol {position: absolute; top: __px; left: __px; }


    This is for the third:
    Quote:
    #about ol ol ol {position: absolute; top: __px; left: __px; }


    For custom sections, you must use absolute positioning.

    Caveat: When you use custom sections the only section (including the about section) that can scroll is your very last custom section.

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline
PostPosted: Thu Jun 01, 2006 2:49 pm


Reserving.
PostPosted: Thu Jun 01, 2006 2:50 pm


One more for old time's sake.

Or something.

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

`Dark-Arts

 
Offline
PostPosted: Mon Jun 19, 2006 2:08 pm


http://www.gaiaonline.com/forum/viewtopic.php?t=10883886

♪ Also very helpful <3
PostPosted: Tue Jun 20, 2006 9:50 pm


`Dark-Arts
http://www.gaiaonline.com/forum/viewtopic.php?t=10883886

♪ Also very helpful <3


I do have that thread. It's a great resource.

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

Rung

 
Offline
PostPosted: Mon Aug 21, 2006 9:44 am


Helpful thread ^^
PostPosted: Fri Sep 01, 2006 12:02 am


Rung
Helpful thread ^^


Thanks! smile

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

heetee

 
Offline
PostPosted: Thu Sep 07, 2006 5:52 pm


Yeah, really helpful. What's the code to change your background colour?
PostPosted: Thu Sep 07, 2006 8:15 pm


LilBlackBelt06
Yeah, really helpful. What's the code to change your background colour?


background-color: #______;

You just stick that in the section you want it. For your main background: body
For other sections, it's the name of the section (lowercase) with "#" in front of it. For example, the about section would be: #about

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

Nakoko

 
Offline
PostPosted: Wed Nov 15, 2006 9:27 pm


I tried the Custom Section, and it's possible I'm just stupid, but for me it just enlongates my About Me.
PostPosted: Thu Nov 16, 2006 9:47 pm


If you mean your custom sections don't go anywhere, then double check that you're using
    and ol in the CSS.

    If you can move the sections, but the about section is still long, then in the CSS make sure you're using position: absolute; and not position: relative; .

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

Ignorance is Your Disease

250 Points
  • Statustician 100
 
Offline
PostPosted: Sun Nov 26, 2006 12:47 am


um, this might not fit here, but how do you make title links to a thread? as in for your signature?
Reply
CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)

 Goto Page: 1 2 [>] [»|]
 
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More