Welcome to Gaia! ::


Saxy Coder

CHAPTER 3: THE IMAGE DUMP
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀


      These are a collection of images which can be useful when coding your profile.
      Some of them come with pre-coded directions, others require for you to know what to do with them
      (I use this a lot when coding layouts, so this is just kind of my dump)


    Useful Websites

Saxy Coder

GAIA ONLINE LOGOS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀


      A collection of logos to use for the Gaia Header. All images have transparent backgrounds (unless noted otherwise)
      Remember that the logo cannot be the same color as the background


    Basic Code
      #header_left img {width: 0px; padding: 0 45px 0 5px; background: url('image url here') bottom left no-repeat;}
      You may need to adjust padding or add a background-size property depending on the image you use.


    Basic Logos
      User Image RED: https://i.imgur.com/t30FyED.png
      User Image ORANGE: https://i.imgur.com/2381ytl.png
      User Image YELLOW: https://i.imgur.com/KbrYpL1.png
      User Image GREEN: https://i.imgur.com/6CWnseH.png
      User Image BLUE: https://i.imgur.com/1b0f6Am.png
      User Image PURPLE: https://i.imgur.com/tRiesJS.png
      User Image PINK: https://i.imgur.com/h9Z33FV.png
      User Image BROWN: https://i.imgur.com/DSEgOhP.png
      User Image BLACK: https://i.imgur.com/CNt52rr.png
      User Image WHITE: https://i.imgur.com/s0NkOhU.png

      User Image This is the original logo if you want to recolor it yourself


    More Logo Collections
      Please have the courtesy to re-upload logos onto your own image host.
      Do not hot-link Photobucket logos.

      Lady's Collection: Photobucket Folder
      Knight Yoshi's Collection: Photobucket Folder

Saxy Coder

CONTACT BUTTONS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀


      Instructions for stylizing the Contact panel - mostly focusing on Current layouts, but can be applied to Classic as well.
      Please take note that I am not going to create a collection of images for you to just copy & paste.
      As a profile designer, you should eventually learn to make your own buttons.


    Converting the Contact Page into Images
      This is intended for Current (v2) layouts and the Contact panel which is offered on the template.
      The codes I have listed are just the basic set-up of how the buttons work -- you'll need to apply your own positioning, background-size, etc. properties.
      First child = Add // Second Child = PM // Third Child = Trade
      #id_contact ul li span, #id_contact ul li a{
      font-size: 0;
      padding: 20px;
      background-color: ;
      background-size: ;
      background-position: center center;
      background-repeat: no-repeat;
      }

      #id_contact ul li:nth-child(1) span, #id_contact ul li:nth-child(1) a{ /* Friend */
      background-image: url(image url here) ;
      }

      #id_contact ul li:nth-child(2) span, #id_contact ul li:nth-child(2) a{ /* Message */
      background-image: url(image url here) ;
      }

      #id_contact ul li:nth-child(3) span, #id_contact ul li:nth-child(3) a{ /* Trade */
      background-image: url(image url here) ;
      }


    Turning the Buttons into your own Text
      If you don't want to change the buttons into images, but you want to change what text they say, this code lets you do that.
      Notice how each of the children has a "content" line saying things like "add to friends," "send message," etc?
      Just change the text inside of those single apostrophes to change how the link text displays.
      #id_contact ul li span, #id_contact ul li a{font-size: 0;}
      #id_contact ul li span:before, #id_contact ul li a:before{font-size: 10px;}

      #id_contact ul li:nth-of-type(1) span:before, #id_contact ul li:nth-of-type(1) a:before{content: 'Add to Friends';}
      #id_contact ul li:nth-of-type(2) span:before, #id_contact ul li:nth-of-type(2) a:before{content: 'Send Message';}
      #id_contact ul li:nth-of-type(3) span:before, #id_contact ul li:nth-of-type(3) a:before{content: 'Trade Items';}


    Stock Contact Images
      The following are some sites with stock images which might be useful for your contact buttons

      Icons DB

Saxy Coder

DROP-DOWN ARROWS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀


      These are arrow images intended for the avatar drop-down menu.
      They can certainly be used in other spots on your profile though.


    Basic Arrows
      User Image - Blocked by "Display Image" Settings. Click to show. Dotted Arrow
      #id_details .statuslinks{background: url(http://dl2.glitter-graphics.net/pub/3182/3182312fq3jotqn96.gif) no-repeat right center;}

      User Image Gaia's Drop-down Arrow
      .statuslinks{background: url(http://s.cdn.gaiaonline.com/images/gaia_global/body/arrows/ic_hyperlink_arrow_15x15_down.png) no-repeat right center !important;}

      For more arrow images, please check out:
    • PIXEL - SOUP: Arrows
    • G-REVO: Bullets

    Using your own image
      .statuslinks{background: url('image url here') no-repeat right center !important;}
      (You may need to adjust background size and position depending on image)

Saxy Coder

CURSORS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀


      Cursors which you can use on your profile page
      Notice: Most browsers do not support .ani cursors.
      Also, if you use an animated gif as your cursor, it will only display as a still image


    Cursor Websites

    Use your own image
      body, a:hover{cursor: url('image url here'), progress !important;}

Saxy Coder

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

Saxy Coder

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

Saxy Coder

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

Saxy Coder

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

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
//
//

Join Now

// //

Have an account? Login Now!

//
//