CSS codes for New profiles [2.0]

Excited?

Hells yeah.	100.0%	[ 6244 ]
Total Votes:			[ 6244 ]

[Awiergan]

After much work, the guide is ready. Enjoy. Please post any difficulties you encounter.

This was the first 2.0 guide, released during the beta testing.

If you want CSS for the "old school" profiles, you can find them here:



Getting Started:

To start off, you'll need to know how to enter CSS codes. CSS codes can be entered on this page. With 2.0 profiles, you can also edit your profile without CSS, by clicking the "Edit my profile" button located at the top of your profile page; however, this allows less customization than CSS coding.

[Awiergan]

Software:
Firefox: http://www.mozilla.com/firefox/
EditCSS: http://editcss.mozdev.org/
Web Developer: http://chrispederick.com/work/webdeveloper/

Once this is installed, you can edit CSS by clicking the "CSS" button on Firefox Web Developer.

Update 01/01/07
The CSS tab of the web developer toolbar displays the CSS for each part of the profile, allowing you to change whatever part you want, if you click on CSS-> View style information, and then hover your mouse over the element you want to view the CSS for. The target appears in the lower left hand corner of the screen.

Update 4/29/07
Edit CSS and web developer do basically the same thing. Edit CSS only works in older versions of firefox. You don't need both. I prefer web developer.

[Awiergan]

CODES PART 1: BACKGROUNDS

1. Changing the overall background.

Quote:

html
{
background: url(http://YOUR IMAGE HERE);
}

OR

Quote:

body
{
background: url(http://YOUR IMAGE HERE);
}

***The body code occasionally causes transparency issues and white areas to appear. A fix is posted later in the guide.

1.5 Applying a background similar to the content background on v.1 that includes all sections. The margin is a measurement of the offset from the body background. If you set it to 0, you can only have one background.

Quote:

#x
{
background: url(YOUR IMAGE HERE);
margin: 10px;
}

Note: I know there is already a feature in the new profiles for this. Regardless, some people may choose to do it using CSS.

2. Applying a background to every section:

Quote:

.panel
{
background: url(http://YOUR IMAGE);
}

3. Applying a background to individual sections:

A: panelS: The new profile is not just divided up into a single type of section. There are panels and widgets, each with certain attributes. This list will cover editing the panel sections. I've included the individual code for each section, instead of just listing the panels. This should help newcomers to CSS copy and paste the code. I'm also doing this as an introduction to each section.

*Profile:

Quote:

.profile_panel
{
background: url(YOUR IMAGE HERE);
}

*Friends:

Quote:

.friends_panel ul li
{
background: url(YOUR IMAGE HERE);
}

*multimedia:

Quote:

.media_panel
{
background: url(YOUR IMAGE HERE);
}

*Comments

Quote:

.comments_panel
{
background: url(YOUR IMAGE HERE);
}

*Signature

Quote:

.signature_panel
{
background: url(YOUR IMAGE HERE);
}

*Wish list

Quote:

.wish_list_panel
{
background: url(YOUR IMAGE HERE);
}

There is also a .wish_list_decoration, and the same for .equipped_list_decoration

The difference between the panel and decoration is currently unknown.


*Equips

Quote:

.equipped_list_panel
{
background: url(YOUR IMAGE HERE);
}

*House, if you choose to display it:

Quote:

.house_panel
{
background: url(YOUR IMAGE HERE);
}

*Forums panel: [verified]

Quote:

.forums_panel
{
background: url(YOUR IMAGE HERE);
}

*store

Quote:

.store_panel
{

background: url(YOUR IMAGE HERE);
}

*journal

Quote:

.journal_panel
{

background: url(YOUR IMAGE HERE);
}

*contact [verified]

Quote:

.contact_panel
{
background: url(YOUR IMAGE HERE);
}

*Custom Panel [w.i.p.]

Quote:

.custom_panel
{
background: url(YOUR IMAGE HERE);
}

Every custom panel has a different ID number, which changes when you add more. Unfortunately, it is not the same for everyone's profile. I will eventually write a guide for using multiple custom panels and treating each one as a separate panel. But for now, if you use the code I've provided, all custom panels will act as one panel; in other words; changes you make to one will apply to all of them.


Recent Visitors panel

Quote:

#id_footprints
{
background: url('Your Image Here');
}

Additional codes for backgrounds

Centering the background:

Quote:

{
background: url(http://YOUR IMAGE) center;
}

Making the background stay in place while the page scrolls:

Quote:

{
background: url(http://YOUR IMAGE) fixed;
}

***Glitch fix: (use if white areas cover part of your background when scrolling)

Quote:

html
{
background: transparent;
}

Keeping the background from tiling:

Quote:

{
background: url(http://YOUR IMAGE) no-repeat;
}

Codes can be combined, such as "no-repeat fixed left" making the image appear once on the middle left side of the page, and it will not tile.

[Awiergan]

CODES SECTION 2: HEADERS

Okay, now we have to get into a good bit more depth. So you wanna put backgrounds behind your headers, aye? First thing to know is that the annoying text is still going to be there, unless you move it.

This can be easily solved. In each section you put a background where you don't want the text to show, add the following code between the {}'s:

Quote:

text-indent: -4000px;

The profile section header:

Quote:

.profile_panel h2
{
background: url(your image here);
}

*Friends:

Quote:

.friends_panel h2
{
background: url(YOUR IMAGE HERE);
}

*multimedia:

Quote:

.media_panel h2
{
background: url(YOUR IMAGE HERE);
}

*Comments

Quote:

.comments_panel h2
{
background: url(YOUR IMAGE HERE);
}

*Signature

Quote:

.signature_panel h2
{
background: url(YOUR IMAGE HERE);
}

*Wish list

Quote:

.wish_list_panel h2
{
background: url(YOUR IMAGE HERE);
}

*Equips

Quote:

.equipped_list_panel h2
{
background: url(YOUR IMAGE HERE);
}

*House, if you choose to display it:

Quote:

.house_panel h2
{
background: url(YOUR IMAGE HERE);
}

*Forums panel: [verification needed, purpose unknown]

Quote:

.forums_panel h2
{
background: url(YOUR IMAGE HERE);
}

*store

Quote:

.store_panel h2
{

background: url(YOUR IMAGE HERE);
}

*journal

Quote:

.journal_panel h2
{

background: url(YOUR IMAGE HERE);
}

*contact [unverified]

Quote:

.contact_panel h2
{
background: url(YOUR IMAGE HERE);
}

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





Yes, you can change both the background and the header. It'd look like this:

Quote:

.profile_panel
{
background: url(your background image here);
}
.profile_panel h2
{
background: url(your header image here);
}

The sections are, still: [remember to put a . infront of each, followed by _panel]

profile, media, comments, signature, wish_list, house, forums, store, journal, contact

If you know of any additional sections, please post them.

.friends_panel is more complicated. For backgrounds, it requires the ending " ul li" for headers, it requires " h2"

To apply both a background and a header to friends, use the following code.

Quote:

.friends_panel ul li
{
background: url(your background image here);
}
.friends_panel h2
{
background: url(your header image here);
}

[Awiergan]

CODES SECTION 3: decorationS AND MISC

1. decorations. In programming, a decoration is a graphical component often used to build a graphical user interface.-Urban Dictionary

I'm assuming that decoration refers to the objects that can be dragged and dropped onto your profile. There are many, many, things that can be done with each one of these, from resizing to inverting. Unfortunately, only the testers know exaxtly what each of these does. I can, however, provide you with some basic information on sections that are present in the default profile.

Creating custom caption boxes.
This is only speculation, and may take a good bit of time.

The first piece appears above the caption box. The image must be 100*5 pixels, unless you change the WIDTH: and HEIGHT: values.

Quote:

.caption_regular .caption_top
{
background: url(Your Image for the top of your caption box.) no-repeat top left;
width: 100px;
height: 5px;
}

I'm guessing this is the sides of the box... It probably appears as a black line if you leave it alone. It has no height value. I'll update this when the real system comes out, but for now I don't have a ******** clue. If you're a beta tester, try it and see what happens. I'm not sure about the dimensions... I tried to access the default image, but I got a 404 error. If you can find it, please post.

Quote:

.caption_regular .caption_middle
{
background: url(I don't have a clue what to put here.) repeat-y top left;
width: 100px;
text-align: center;
}

I'm assuming this is the bottom left of the caption box.

Quote:

.caption_regular .caption_bottom_left
{
background: url(Your image here) no-repeat;
width: 100px;
height: 21px;
}

Bottom right of the custom caption box.

Quote:

.caption_regular .caption_bottom_right
{
background: url(Your image here) no-repeat;
width: 100px;
height: 21px;
}

Transparency:

In any section, add the following code between the {}'s.

Quote:

opacity: .X;

Where X is value between 0 and 9. 0 makes it transparent.


Spreading about block level elements.
This will change the spacing between EVERYTHING on the page. Where 0 is replaced by the Margin. I'm assuming that * is a wildcard.

Quote:

*
{
margin: 0px;
padding: 0;
}

Changing the font size on the page.

Replace 0 with the size you want the font for information you've entered on the page to be.

Quote:

*
{
font-size: 0px;
}

Changing the font color:

In the following section, you must enter a value for color. Replace 000000 with the html color value.

Hints:
ff0000 =red
00ff00 =green
0000ff =blue
ffff00 =yellow
000000 =black
ffffff =white
ff00ff =magenta
00ffff =cyan

You can mix colors by combining additive values. A full html color chart is listed after the code.

Quote:

*,a
{
color: #000000;
}

Changeing link color

See table above.

Quote:

a
{
color: #000000;
}

Removing avatars from the comments section of your profile.
Don't want people to clutter up your page with their ugly faces? Simply don't have room and want to move the comments section to the side of your profile? Easy to fix. This will remove avatars [faces] from the comments section. You can resize their faces as well.

Quote:

.comments_panel .style1 dd .avatar
{
display: none;
}

Replacing your cursor (unverified)

Quote:

body
{
cursor: url(Your Cursor URL Here);
}

Possible cursors (without hosting them). You can use these in place of a url.
crosshair
pointer
wait
text
help
move
n-resize
ne-resize
nw-resize
e-resize
w-resize
s-resize
se-resize
sw-resize

Removing your avatar

Quote:

.profile_panel img
{
display: none;
}

Replacing your avatar
Still under development.

Centering your profile

Quote:

body
{margin: 0 auto 0 auto; width: 760px; float: none;}

Light effects

I've seen in people's profiles where the whole thing is very dark, and you can really see the section your mouse is over. First, make sure you have a dark background. For this, I set the background as BLACK (000000) You can change it or replace it with a picture if you want.

Quote:

body{background: #000000;}
.panel
{
opacity: .1;
}
.panel:hover
{
opacity: 1;
}

Disabling the Header

Quote:

#header
{
display: none;
}

Removing the gaia logo in the header (for backgrounds)

Under development

Adding a new header[must be enabled]

Quote:

#header
{
background: url(Your Image Here);
}

Removing sections
I decided to add this, despite that it's listed for several specific sections.

Between the {}'s, add the following code.

Quote:

display: none;

Adding a footer:

I believe this one would work well with an imagemap, though I haven't tried it.

Quote:

body:after
{
content: url(Your footer image here);
}

This code will replace the avatar image: (unverified)

TheOnlineFreak

replaceing avatar img.

Quote:

.details_panel img {background: url(yoururlhere) no-repeat; height: 0px; width: 0px; padding-left: 120px; padding-top: 150px; margin-left: 0px; margin-top: 0px;}

changes width of img space.
changes height of img space.

[Awiergan]

CODES SECTION 4: REPOSITIONING, RESIZING, AND DIMENSIONS


Dimensions:
Profile, equip, interest, wishlist:
250PX, Height may vary.
Profile, equip, interest, wishlist headers:
~230*22

About, Journal, Friends, Store, Commments, Signature:
500PX, Height may vary.
About, Journal, Friends, Store, Commments, Signature Headers:
~480*22

Repositioning:

Repositioning is easy with the new drag and drop system. However, some of us like doing it the old fashioned way, so we can make things overlap.

In any section, between the {}'s, you can place additional code to shift it.

Replace 0 with the number of pixels you want to displace it. Yes, I know left and right are inverted.

To move it right:

Quote:

left: 0px;

To move it left:

Quote:

right: 0px;

To move it down:

Quote:

top: 0px;

To move it up:

Quote:

bottom: 0px;

Resizing:
From what I've seen, certain sections will be smaller or larger. Wanna switch them back, or fit them to a specific background? This is easy! You can even make it smaller than the content, and add a scrollbar.

In any section, between the {}'s, add the following parameters to enter a custom size. [where 0 is replaced by the size you want in pixels]

Quote:

width: 0px;
height: 0px;

To resize multimedia (the actual media, not the section)

Quote:

.media_panel embed{width:XXXpx; height:XXXpx;}

Replace XXX with the appropriate values.


Scrollbar:

Let's say you had a 500*400 background for your about section, so you resized .about_gadget to 500*400. The only problem is, your text got cut off, or overflows!
eek Oh nose!

This can be easily fixed. Enter the following line between the {}'s.

Quote:

overflow: scroll;

You don't have to make it scroll, though. You can clip it, if you choose to. This is good for clipping off the control bar in your multimedia:

Quote:

overflow: visible;

The content is not clipped. It renders outside the element

Quote:

overflow: hidden;

The content is clipped, but the browser does not display a scroll-bar to see the rest of the content

Quote:

overflow: scroll;

The content is clipped, but the browser displays a scroll-bar to see the rest of the content

Quote:

overflow: auto;

If the content is clipped, the browser should display a scroll-bar to see the rest of the content

[Awiergan]

CHANGES FROM V.1 To V.2

So far:

• You can display your house.
  
• You can add manipulate-able widgets.
  
• You can import other people's avi's and overlays to your profile.
  
• Store section
  
• Forums section
  
• House section
  
• #section replaced by .section_gadget
  

[Awiergan]

USER SUBMITTED CODES

Coming soon.

[Awiergan]

You can post now, for real. All help and additional codes are loved. And I want to keep this alive until the new profs come out, then it should take off.

Next plans:

Resizing elements.
The wierd parts of the comment gadget.
Messing with avatars.
Items in your wishlist.
Cool Font
Anything that carried over, such as custom cursors.
Pseudo elements

[Ze Royal Viking]

First Post xp

[[TyDe]]

Thank for starting this. : DDDD


And...
SUBSCRIBED.

EDIT: 2ND POST.
: DDDDDDDDDDD

[Awiergan]

[.TyDe.]

Thank for starting this. : DDDD


And...
SUBSCRIBED.

I'm almost done, too... At least with what I know. After this, I'll check the other tutorials and see if I can't find some stuff to carry over. I hope that at least some of the nit-picky stuff still works. mad

[Yondaime The 4th]

yeah thnx. This is sweet!

*(subscribes)*

[20 Shades of Crazy]

I think this looks a lot easier then all the others I've seen. Nice organization. I just wish that you had the size of all the boarders. I know for a fact that the profile headers are 750x150 pixels. 3nodding

[Awiergan]

MoonBlossoms

I think this looks a lot easier then all the others I've seen. Nice organization. I just wish that you had the size of all the boarders. I know for a fact that the profile headers are 750x150 pixels. 3nodding

Actually, the header on Profile 2.0 stretches to fit the page... I don't know if you can put an image on it or not.