This repeats the information from our "Making the Most of Your Profile in Beta" document. However, this version is probably going to be updated more frequently - simply because it's easier to do so. If you're interested in this topic, please subscribe to my Blog. Then, you'll be notified on your My Eons page every time I update this document. Please let me know - via the comments, below - how this document is working for you. I'll try to incorporate your feedback to make it as clear and foolproof as possible.

Page Backgrounds

In original Eons, you would typically install a color or photo in the background of your profile page via a line of CSS code that looked something like this:

body {background-color: #ffccd3;}
or body {background: #ffccd3;}
or body {background: url(http://photobucket…);}

This code can work in Beta, too, but to look its best, it will require a couple of alterations and additions.

First, if your code uses “background-color” like the first item above, you will probably see blue at the top of the page instead of the color you chose – which can be seen a bit further down the page.

That’s because New Eons uses its own background image. To correct this problem, use “background” (as shown in the second example, above) rather than “background-color.” (This is shorthand CSS that, by default, sets the background image to “none”.)

One of the more prominent features in the Beta site is a rounded-corner container that sits between the background of the page and the foreground of your profile. This container sits above your original Eons background. The frame is opaque and the interior has its own background color – by default, white. There are many ways to deal with this frame. Here are a couple of approaches we’ve experimented with:

1. Make the container transparent instead of opaque. Add the following to your existing CSS code. To make this simple, we suggest you copy the following in its entirety at the end of your code.

<style type="text/css">
#cont-subnav {background:transparent;}
#cont-mainbody {background:transparent;}
#footer {background:transparent;}
</style>

2. Change the container’s background color (or image) instead of/in addition to the page background color (or image). Instead of targeting ‘body’ you will target ‘#mainbody’ – like this:

#mainbody {background-color: #ffccd3;}
or #mainbody {background-image: url(*) repeat;}

(* is the URL of your background image – if the image is stored on Eons, you can copy the URL from the “share this” box.)

Depending on whether or not the color blue in Beta goes with your color scheme, you may want to change the page (body) background, too. To avoid having to change the menu font color (currently, white), we suggest going with a dark background color, like:

body {background: #7f6669;}

Section Styling

In original Eons, light gray boxes defined sections of the Profile page. Inside the gray-bordered box, there was a gold title and some data.

Section Headings and Titles

In both versions of the Profile page, each section has a title. The title was - and still is - a ‘h2’ element. Your CSS codes might have set the background or color of these titles. For example:

h2 {background-color: #af3; color: #008;}

Although the Beta version still uses h2 elements, there is now a "header" element that encloses the h2 element and it's the "header" element that has the opaque, light purple background.

The following change will properly target just the h2 element (The .header addition is necessary due to the specificity rules of css):

.header h2 {background-color: #af3; color: #008;}

However, this change does not satisfy our intent. We don’t really want any light purple, do we? So let’s set the background color of whole header with the following code (substitute your favorite color combination):

.header {background-color: #af3; color: #008;}

(For now, we may need both of these last two modifications - above - to get the job done. In the very near future – before the Beta is released, the latter modification will be sufficient.)

Section Backgrounds and Borders

The more advanced css experts out there might have attached styles to .profile-chunk - a div element that enclosed each section. The target name has changed - it is now, simply, ".section". For now, duplicate your "profile-chunk" rules - substituting "section" for "profile-chunk." When we exit Beta, you can delete the old "profile-chunk" rules.

Beta provides these new and useful targets for styling sections:

.header – targets the block that contains a section title (default is light purple with dark purple text and a 1-pixel bottom border)

.body – targets the remainder of a section

.section – targets an entire section, wrapping both header and body.

Color or background properties (e.g. “color”, “background-color” and/or “background-image”) are relatively safe to play with. For example, on my profile, I set the background color of my section bodies with the following code, which creates a nice, readable backdrop for the text, while allowing my page background to peek through:

.body { background-color: #ffe; }

We don’t recommend changing the font size, because it is best to keep the font size in line with the rest of Eons and allow people who need larger fonts (or who can tolerate smaller fonts) to select the font size with their browser. Other font properties are fair game.

Borders are a popular addition but, due to the css code that is required to keep user-posted images and other objects in check (so they don’t bust out of their sections and break the entire layout of the page), care must be taken to ensure that the width of the available space (for text and other content) does not change.

Our styles for the Beta version of Eons include 10 pixels of left and right padding in “.body”. If you put left and/or right borders on either “.section” or “.body”, be sure to subtract the width of these borders from the padding on “.body”. For example, to put a 1-pixel black border around every section, you would do this:

.section { border: 1px solid black; }
.body { padding-left: 9px; padding-right: 9px; }

If the border is 2 pixels wide, the padding would be reduced to 8 pixels - and so on.

Special Section: The Member Card
At the top-left of the Profile page, directly under the banner, is a section that we call the "member card." It has it's own background - a yellow fade with a dark yellow border. To get rid of this background, add the following rule:

.cont-member-card { background:transparent;}

By the way, with css, there's usually more than one way to accomplish a task. In this case, I might have used "background-image: none;" or "background: none;" ...all would have the same result

Banners

In original Eons, banners were 940 pixels wide (give or take a few) and 100 pixels high. There wasn’t a lot you could do other than provide an image.

In New Eons, banners are 974 pixels wide and 100 pixels high. …Or whatever you want, within reason.

Use this piece of code in your <style> section if you have a 940x100 image that you want to use in your New Eons profile.

#profile-banner {
background-position: center center;
background-repeat: no-repeat;
}

Or, if you have a repeated background image that, for whatever reason, looks best when it is 940 pixels wide, here’s some code that should work:

#profile-banner {
margin-left: 5px;
width: 940px;
}

If you’ve always been bothered because your photo isn’t quite tall enough – or is too tall, you can now set the height of the profile banner.