[Guides] My CSS Bookshelf | Page 3 | Forum

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

Report ad

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_31 created on Wed, 29 Jul 2015 14:56:15 +0000
Posted: Wed, 29 Jul 2015 14:56:15 +0000

♜CHAPTER 2: THE MINI GUIDE COLLECTION
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

These are a collection of mini guides I have written for specific areas of profiles.

Mini Guide: The Gaia Header

[ Go Read ] This guide covers the rules Gaia has about the header, as well as goes over some common violations to avoid. It also introduces the header selector names to you and explains how to edit each of them.

Mini Guide: The Avatar Dropdown Menu

[ Go Read ] This guide focuses on the avatar drop-down menu under your avatar in the Details on Current profiles. This menu also technically exists on Classic profiles, but it is hidden by default.

Mini Guide: Spoiler Buttons

[ Go Read ] This is not my area of expertise, but it just gives a brief overview of the selectors of spoiler buttons on Gaia profiles and how you can use them to do complex coding on your profile.

Mini Guide: Open Font Library

[ Go Read ] Another font website which allows the free hosting of fonts. Can be used on out profiles by following a few simple steps c:

More to Come...

Check back later for more guides. If you have a suggestion for a mini guide, feel free to tell me!

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_32 created on Wed, 29 Jul 2015 21:12:47 +0000
Posted: Wed, 29 Jul 2015 21:12:47 +0000

MINI GUIDE: THE GAIA HEADER
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

This is an introduction to editing the Gaia Navigation header on profiles.
This bar appears on both Classic and Current profiles, so you can use this guide for either template.

This Rules: What you can and cannot do to the header

First off, if you want to avoid getting your profile reported, follow the Rules and Guidelines
They specifically state what you can and cannot do to the header:

Quote:

Unacceptable alteration of the navigation bar: The navigation bar is in place at the top of the profile so that users who visit your profile know they are still on Gaia, and can navigate away from your page easily without having to try to figure out how. You may change the background color, and the color of the links for the navigation bar. However, you may not alter the Gaia logo, reposition the navigation bar, or remove the navigation bar all together, or change the color/transparency of the navigation bar & links so that it appears to be gone. Altering the Gaia logo includes removing it all together, as well as making it semi-transparent to the point that it is hard to see or nearly invisible. You may alter the Gaia logo image to remove the black background, or change the black background to a different color, but the logo itself must remain as is

What is okay

☑ Changing the background color of the header
☑ Changing the color of the links and other text
☑ Slightly changing the Gaia logo to remove its default black background

What is NOT okay

☒ Removing the header, Gaia logo, or any of links
☒ Repositioning the header
☒ Changing the color or transparency of links and logo in the header so they appear to be missing or barely visible
NOTE: Making your header invisible until it is hovered over violates these rules! It must always be visible!

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_33 created on Wed, 29 Jul 2015 21:14:03 +0000
Posted: Wed, 29 Jul 2015 21:14:03 +0000

These are the usual selectors of the navigation bar which users target in order to apply their own CSS (there are a few more not listed here)

General Selectors of the Navigation Bar

#gaia_header = the entire Gaia Header

#gaia_header ul = #header_left and #header_right combined
#header_left = the left side of the header, including the Gaia logo to the "Games" link
#header_right = the right side of the header, ranging from the Username to the "Report this Profile" link

#gaia_header li = each listed item on the bar and its " | " seperator
#gaia_header a = each link

The Gaiaonline Logo

This is the default Gaia Logo Image:

As you can see, it can be quite inconvenient with its square black background.
However, you cannot remove the image, despite how annoying it might be.

For a collection of recolored logos, please check the Image Dump chapter.
Remember that you also cannot make the logo the same color as your background!

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_34 created on Wed, 29 Jul 2015 21:14:28 +0000
Posted: Wed, 29 Jul 2015 21:14:28 +0000

These are simple copy & paste codes which you can edit to get the hang of changing things in your header.

Changing the background

For solid colors (including transparent)
#gaia_header, #gaia_header ul{background: value !important;}

For patterns, semi-transparent colors, or images, I recommend this:
#gaia_header{background: value;}
#gaia_header ul{background: none !important;}

Changing the color of the links

#gaia_header a{color: value !important;}

Changing the color of the | separators

#gaia_header ul{color: value !important;}

Adding a border just to the bottom

#gaia_header{border-bottom: ##px style value;}

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_35 created on Wed, 29 Jul 2015 21:15:36 +0000
Posted: Wed, 29 Jul 2015 21:15:36 +0000

END MINI GUIDE: THE GAIA HEADER
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_36 created on Wed, 29 Jul 2015 21:16:51 +0000
Posted: Wed, 29 Jul 2015 21:16:51 +0000

MINI GUDE: THE AVATAR DROP-DOWN MENU
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

This mini guide is for the avatar drop-down menu which exists under your avatar on Current layouts
The box is also available for Friends on Classic layouts, but it is hidden by default.

Selectors of the box

.forum_userstatus = The box containing the Online/Offline and the drop-down arrow

.statuslinks = Contains the Online/Offline indicator and .pushBox. The image of the down arrow is a background image of this.
.online = The "Online" text and emote
.offline = The "Offline" text and emote
.pushBox = The area you hover over in order for #avatar_menu to appear

#avatar_menu = The actual menu that drops down (View Posts, Achievements, etc.)

#avatar_menu a = Each of the links inside of the drop-down menu
.menu_seperator = The lines which occasionally separate links in the drop-down menu

Removing the box or parts of it

To remove the entire box:
.forum_userstatus{display: none;}

To remove the menu (keeping the online/offline part) :
.pushBox, #avatar_menu{display: none !important;}

To remove the drop-down arrow image:
.statuslinks{background: transparent !important;}

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_37 created on Wed, 29 Jul 2015 21:17:24 +0000
Posted: Wed, 29 Jul 2015 21:17:24 +0000

END MINI GUIDE: THE AVATAR DROP-DOWN MENU
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_38 created on Wed, 29 Jul 2015 21:17:40 +0000
Posted: Wed, 29 Jul 2015 21:17:40 +0000

MINI GUIDE: SPOILER BUTTONS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

This will be expanded upon later, but for now, this gives a brief overview of the selectors of spoiler buttons
Why does this matter so much? Because spoiler buttons can be used in quite unique ways to create some special effects for your profile
Popular ways of using them are for "click to enter" buttons and background changes, but there are even more options than those.

Spoiler Selectors

.spoiler-wrapper

.spoiler-hidden

.spoiler-title .spoiler-control-show .cta-button-sm .gray-button

spoiler-control

.spoiler-revealed

.spoiler-title .spoiler-control-hide .cta-button-sm .gray-button

spoiler-control

How they work together

.spoiler-wrapper is your main parent selector, which contains the entire button
From there, you get the "hidden" and "revealed" states of the spoiler button
When the "hidden" state is active, the ".spoiler-control-hide" spoiler title is set to display: none
Meanwhile, when the "revealed" state is active, the ".spoiler-control-show" spoiler-title is hidden instead

This basically ensures that when you haven't clicked on the spoiler yet, you'll only see the "show spoiler" button
And then you click on the spoiler, you will only see the "hide spoiler" button

Using the button for neat tricks

Since the use (and abuse) of spoiler buttons is still a fairly new concept to profiles, most coding of it is up to your own experimentation. Just like CSS animations, spoilers can be used to produce a wide variety of effects and "cheats" on your profile. However, do be aware of how they can also break your page. If you end up breaking your profile due to incorrectly coding with a spoiler button, see this thread for how to fix things.

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_39 created on Wed, 29 Jul 2015 21:18:05 +0000
Posted: Wed, 29 Jul 2015 21:18:05 +0000

RESERVED FOR FUTURE GUIDES
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Lady Saxophone

Community Member (?)

Saxy Coder

Offline

Report Post
Post: 97510341_40 created on Wed, 29 Jul 2015 21:18:31 +0000
Posted: Wed, 29 Jul 2015 21:18:31 +0000

MINI GUDE: OPEN FONT LIBRARY
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀

Open Font Library is another font website which allows the hosting of free fonts, and supports the EULA, so it works in any browser.
You can check out the website http://fontlibrary.org/

Step 1: Browse the Fonts

Head over to Font Library and find a font family you would like to use.
Once you find one, click on it and you should be directed to the font page, like Megrim's page.

Step 2: Get the Stylesheet URL

Once you're on the font page, look on the right side and find the "USE THIS FONT" header
Find the HTML code they give you and copy the URL from it. For example, Megim's is:
&link rel="stylesheet" media="screen" href="http://fontlibrary.org/face/megrim" rel="stylesheet" type="text/css"/&
You want the URL in red. Copy that, open up a new tab, and put it into your browser's URL field.

Step 3: Getting Your @font-face Code

Once you input the stylesheet URL, you'll be redirected to a page like so:
User Image

Copy everything on that page (minus the deprecated rules) and paste it into your Theme Override box

Step 4: Correcting the src Line

For every one of the "src" lines, you need to apply one minor fix to the URL: Add on "https://fontlibrary.org" to the front of it.
For example, Megim's src line changes from:
src: url('/assets/fonts/megrim/7c7ebbace2b20afe253743b779da3044/c7bb56ac0f25b99edffbab43ba943e45/MegrimMedium.ttf') format('truetype');
to the corrected version:
src: url('https://fontlibrary.org/assets/fonts/megrim/7c7ebbace2b20afe253743b779da3044/c7bb56ac0f25b99edffbab43ba943e45/MegrimMedium.ttf') format('truetype');

Step 5: Use Your Font!

Now you're good to go! Just use the font-family property to call the font and apply it to whatever selectors you want.