Welcome to Gaia! :: View User's Journal | Gaia Journals

 
 

View User's Journal

A.0.H.'s Journal
Profiles
random things in profiles that i decided to write down in a semi organized manner

Profile classic version
1. Global profile settings

-no white stripe
-center
-moves profile up
-no long scroll bar
-no avatar drop box
-scrollbar colors

2. Friends
-no find friends
-no friends group
-no friends in common

3. Comments
-no alert messages
-text boxes p.1
-text boxes p.2

4. Simple header (v1&2)
-simple white header(v1&2)

5. Details section
-unaligned details

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Profile new version
1b. Random global settings

-link colors
-centering profile& miscellaneous
-No long scroll bar (diff. than v1)
-Invisible scrolling (edit for v1)

2b. Avatar
-userstatus thing under my avi.

3b. Media
-edit in media size

4b. Wishlist
-wishlist items fit closer
-no premium item sparkle (Works with v1&2)
-item details pop up
-private items: "*" invisible (edit for v1)
-no scroll after clicking item details

5b. Friends
-Just avi head blocks and usernames
-"View all friends" edit (MIGHT work with v1&2)

6b. Header
-header "register now" changes





1. Global profile settings
-------------------------------------------------------------------------------------------------------------
Random tip, if there is an ugly white stripe going down randomly in the middle of the profile,
make sure that the theme is set to "Custom" and not "Classic" or "Blocks"
-----------------------------------------------------
This should center the profile, also I think may have to with the "keeps scrolling" thing


#site { margin-right: auto; margin-left: auto; width: 750px; overflow-x:hidden; overflow-y:hidden; }
-----------------------------------------------------
This moves your profile up and stuff like that

body {position:relative; top:-70px; height:0px; }
#gaia_header {position:relative; top:70px;}
-----------------------------------------------------
The profile sometimes keeps scrolling, and to stop it you use this

1.
#extendedProfileBody {
overflow-y:hidden; height:700px;
position:relative; }

2.Then after you put that in there, you have to make sure the #site says the correct height,

3.And I'm not sure, but I think you ALSO have to edit body
{background: #000 url(background image);overflow-x:hidden; }

if that doesn't work, look through the black guitar theme and there should be answers
-----------------------------------------------------
There's this really odd thing that pop's up, it's like there's an invisible stripe when you hover over it it's like
"add, message, view profile, etc" in the corner. Anyways, this gets rid of it

#avatar_dropbox {display:none;}
-----------------------------------------------------


This is for the scroll bar to have cool colors on IE

body {
scrollbar-arrow-color: #000;
scrollbar-base-color: #707070;
scrollbar-dark-shadow-color: #000;
scrollbar-track-color: #707070;
scrollbar-face-color: #707070;
scrollbar-shadow-color: #000;
scrollbar-highlight-color: #000;
scrollbar-3d-light-color: #000;
}
----------------------------------------------------------------------------------------------------------






2. Friends
----------------------------------------------------------------------------------------------------------
Get rid of "Find friends"

#find_friends_banner {display:none;}
-----------------------------------------------------
This makes it to where the whole group of friends doesn't show up

#friends #friendGroup li
{display:none;}
-----------------------------------------------------
No friends in common pop up

#commonFriends {display:none;}
----------------------------------------------------------------------------------------------------------






3. Comments
----------------------------------------------------------------------------------------------------------
On the comments it says "Alert messages" or something, so this makes it go away

#alerts_banner{ display: none; }
-----------------------------------------------------
Basically this makes the comments little text boxes, would need tweeking and everything
(I got this from the black guitar theme, and there might be more to this code, so I'll have to check that later if I
use it)

#comments dl dt.avatar2
{visibility: hidden; height: 0px; width: 0px;}
#comments dl dt.avatar
{visibility: hidden; height: 0px; width: 0px;}
#comments dl dd {margin: 0 5px 0 5px;}
#comments .delete {margin-top: 10px; text-align: center;}

#comments .caption:before {display: none; background: url(xxx); }
#comments .caption:after {display: none; background: url(xxx);}
#comments .caption2:before {display: none; background: url(xxx);}
#comments .caption2:after {display: none; background: url(xxx);}
#site .caption:before {display: none; background: url(xxx); }
#site .caption:after {display: none; background: url(xxx);}
#site .caption2:before {display: none; background: url(xxx);}
#site .caption2:after {display: none; background: url(xxx);}
-----------------------------------------------------

In case you're too lazy to look at the rest of the code for the comments, here it is.
Don't remember what all this stuff does. Should write about it later.

#comments a {color:#C0C0C0;text-decoration:overline underline; font-weight:bold;}
#comments a:hover {color:#C0C0C0;text-decoration:line-through; font-weight:bold;}

#details a{color:#C0C0C0;text-decoration:overline underline; font-weight:bold;}
#details a:hover {color:#C0C0C0;text-decoration:line-through; font-weight:bold;}


.caption
{
border: 1px dashed #929292;
background: #000;
width: 135px;
}

.caption2
{
border: 1px dashed #929292;
background: #000;
width: 135px;
}

#comments .caption .message
{
position: center;
padding: 0 0 0 32px;
min-height: 45px;
margin: 0 -12px 0 0;
background: url() top left no-repeat;
font-size: 12px;
font-weight: normal;
left: -21px; color:#fff;
}

#comments .caption2 .message
{
position: relative;
padding: 0 32px 0 0;
min-height: 45px;
margin: 0 0 0 -12px;
background: url() top right no-repeat;
font-size: 13px;
font-weight: normal; color:#fff;
}

----------------------------------------------------------------------------------------------------------





4. Simple header
----------------------------------------------------------------------------------------------------------
Pretty much I don't know what I need or don't need, so I usually just stick it all in.
I think this works for the new theme and the old. It makes the header look simplier and less ugly


#gaia_header a {color: white !important;}
#gaia_header a:hover {color: black !important; text-decoration: none;}

#gaia_header {background: transparent; border: 0px; }
#gaia_header #header_left, #gaia_header #header_right {background: none;}

#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://www.freewebs.com/trezoid/DSG.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px; color:black;
}
----------------------------------------------------------------------------------------------------------





5. Details section
----------------------------------------------------------------------------------------------------------
This gets rid of the top part of the details cause for some reason it's not aligned,
but I don't know what the #stats one does, test later
Also, as a way to maybe make it aligned, try telling the #info to move or something

#details #stats { position:absolute; top:0px; left:2px; }
#details #info {display:none;}
-----------------------------------------------------
----------------------------------------------------------------------------------------------------------





~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Profile new system

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~






1b. Random global settings
----------------------------------------------------------------------------------------------------------
This edits the colors of the links and when they're hovered over


.panel a:link { color:black; text-decoration: none; font-size:10px; }
.panel a:visited { color: black; text-decoration: none; font-size:10px;}
.panel a:active { color: hotpink; text-decoration: none;font-size:10px; }
.panel a:hover { color: hotpink; text-decoration: none; font-size:10px;}

-----------------------------------------------------
The first one should be declaring a width for the profile, and center it.
The second part seems to declare a height and width and I don't know exactly what it means
But this things should center it, make a border, and also in body that's behind the text and all the columns,
Not the main background (Which you edit in the editer)

#columns{ width:910px; margin-left: auto; margin-right: auto; float: none; position: relative; top: 10px; color:green;}

body {background: url()#CCCCFF repeat; width:900px; top:30px; height:510px;
margin-left: auto; margin-right: auto; float: none; position: relative; top:0px; color:red; border:1px solid purple; }
-----------------------------------------------------
So the new version has scroll bar problems also, and I don't know why, but I found lines of code that seem to
make it happen

(Refer to the psychedelic profile under documents and settings...probably move that later)
This line of code together for some reason does not make the profile a long scroll.
#column_2 {width:430px;margin-left: 0px; height:600px; }

#column_3{width:250px;margin-left: 0px;height:600px;}


I changed the width to 445, and the long scroll came back
Maybe it acts against column 3...Too large so that column then goes down and makes a scroll bar??

#column_2 {width:445px;margin-left: 0px; height:600px; }


#column_3{width:250px;margin-left: 0px;height:600px;}

So if I want column 2 to work, if I just delete column 3 and just have the first part of the code,
then I can make the width bigger
----------------------------------------------------------------------------------------------------------
Invisible scrolling- This makes the scroll bars go away ("invisible"). people can scroll down things with their mouse wheel

#id_wishlist {height:240px; width: 220px; position:relative; top:-20px; left:12px; padding-right:30px;}

Scroll bars are about 30px so putting the "padding-right:30px;" will make it hide in the padding. The width has to be adjusted also


PROBABLY A BETTER WAY--------

::-webkit-scrollbar {width:5px;}
Edits all scrollbars in the profile, works on chrome
----------------------------------------------------------------------------------------------------------



2b. Avatar
----------------------------------------------------------------------------------------------------------
It deletes this drop bar under my avi that says "Online".

.forum_userstatus {display:none;}
----------------------------------------------------------------------------------------------------------




3b. Media
----------------------------------------------------------------------------------------------------------
This edits the media, it should adjust the actually size of what's in the media

.media_panel embed, .media_panel object{height:172px;}

-----------------------------------------------------
----------------------------------------------------------------------------------------------------------



4b. Wishlist
----------------------------------------------------------------------------------------------------------
If you edit the margin, it makes the wishlist items come closer together to fit more without a scrollbar

#id_wishlist .item img {margin:0px;}
-----------------------------------------------------
This gets rid of the items being all sparkly and stuff because of what type they are
This profile works for v1 also

img.premium_sparkle {display:none;}

-----------------------------------------------------
Wishlist item pop up (when clicked on):
For some reason when I clicked on an item on my wishlist to view details on the new system, there are two blocks at the bottom of the profile and it darkens the whole profile and i couldn't exit these windows

The first set of the code makes the bigger block disappear and the second one just seems hidden and lets me still open the item details normally

#equipped-list {display:none;}
#equipped-item-details {visibility:hidden;}

-----------------------------------------------------
This code makes the "*" next to private items go away, so the profile would look as if anyone would see it (except with private wishlist items)

The first code changes the font color and size to make the "*" disappear, while the second code changes the bottom of the wishlist that says "items marked with a * are private"

#id_wishlist a {color:transparent; font-size:0px;}
#id_wishlist {color:transparent; font-size:0px;}

-----------------------------------------------------
This code edits the item info box after clicking on a wishlist item.

Basically, when clicked on, the profile gets this long scroll and sticks even after exiting out of the box. This makes it to where when it's clicked on, it still scrolls (I haven't fixed the scrolling to go away altogether) but the scroll disappears after exiting the box. The background is edited from using the alpha filter black to just being transparent to look better (That is the second code listed).

The first code is an extended version of the wishlist item pop up code. The "equipped-item-details" should be edited to say the position now as well as the visibility being hidden.

#equipped-item-details {visibility:hidden; position:absolute; top:-99px; }

#equipped-item-details_mask {background:transparent;}
----------------------------------------------------------------------------------------------------------







5b. Friends
----------------------------------------------------------------------------------------------------------
I can't remember what these codes do EXACTLY, but I know that if you put them in, like my pink clouds profile,
it will show just the friends' faces (And usernames, because without them, you can't link to their profile)
This code exactly makes a little square of 4 friends, so it'd need be tweaked some

#id_friends h2 {display:none;}
#id_friends {background: url();
width:240px; height:180px; overflow-y:hidden;overflow-x:hidden; position:relative; top:-130px; left:35px;}
#find_friends_banner{display: none;}
#id_friends p a{visibility:hidden;}
#id_friends .style1 p a{visibility: visible;}
-----------------------------------------------------
These are edits for the group of friends after "view all friends" is clicked. Not to be confused with the friends list shown on the profile.
-The first one just edits the panel in general. Size, and where it is.

-h2 just deleted the header "FRIENDS"

-and li is the individual friend's picture and name. I changed the width to a little bit less than the original so it looks better.

#friendGroup.panel {position:relative; top:0px; height:500px; width:880px;}
#friendGroup.panel h2 {display:none;}
#friendGroup.panel li {width:55px;}

----------------------------------------------------------------------------------------------------------




6b. Header
----------------------------------------------------------------------------------------------------------
note:these codes are intended to be placed in the psychedelic theme and need to be edited for others

This code makes the "register now" image hidden, but act as if it's still there. The parts of the code with nothing there are for later editing if needed.
It moves the registering text and the username and sign in. The sign in is in an ok spot. The registering for some reason looks different on other browsers.


ul#header_right img {visibility:hidden;}

ul#header_right li { }
ul#header_right li a {position:relative;width:400px;}
ul#header_right a {}
ul#header_right span {position:absolute; left:280px; top:0px;color:#9E7BFF!important;}

---------/Alternate code/------------


This just takes away the "register now" image and changes the color of the text saying "get your profile"


ul#header_right img {display:none;}

ul#header_right span {color:purple!important;}
----------------------------------------------------------------------------------------------------------





 
 
Manage Your Items
Other Stuff
Get Items
Get Gaia Cash
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games