[Guides] My CSS Bookshelf | Page 4 | Forum

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Report ad

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_46 created on Wed, 29 Jul 2015 21:21:39 +0000
Posted: Wed, 29 Jul 2015 21:21:39 +0000

♜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

Subtle Patterns - Simple repeating backgrounds

Transparent Textures - Patterns from Subtle Patterns with transparent backgrounds

Wallpaper Abyss - Lots of HD wallpapers with no watermarks

PIXEL-SOUP - Pixels. That is all I shall say.

Pixels Galore - MOAR Pixels.

G★REVO - Good icons and buttons and more pixels

Glitter Graphics - Lots of animated gifs and some neat dividers

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_47 created on Thu, 30 Jul 2015 20:50:09 +0000
Posted: Thu, 30 Jul 2015 20:50:09 +0000

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

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

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_48 created on Thu, 30 Jul 2015 20:51:23 +0000
Posted: Thu, 30 Jul 2015 20:51:23 +0000

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

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_49 created on Thu, 30 Jul 2015 20:53:08 +0000
Posted: Thu, 30 Jul 2015 20:53:08 +0000

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;}

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)

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_50 created on Thu, 30 Jul 2015 20:53:48 +0000
Posted: Thu, 30 Jul 2015 20:53:48 +0000

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

Cursors-4U

Pixel Soup - Cursors

G-REVO Cursors

Use your own image

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