Duh Skinny on Duh Skinner

Please Note: This is not an Official Eons Document.

Introduction

This is a help file on how to use the skinner to create or edit a skin. If you want to simply choose a skin to use, Click here for instructions.

You can get to the "skinner" in 2 different ways:
1.) Go to your profile page. Click on "Change my skin" a little to the right of your head shot.
2.) Hold your mouse over "Profile" in the top navigation links. A drop down box appears. Move your cursor all the way down to "Skins". A pop out box appears with choices. Choose "My Skins"

"My Skin" Page

When you first open the skinner, you'll be taken to the "My Skins" page.
(If you are not taken to the "My Skins" page, Click here)

There you will see -

Manage skins (below); Edit my current skin; or Create a new skin

Beneath it will be your current skin and any other skins you have saved.

Each skin listed on your "My Skin" page will have secondary pages where you can choose/adjust color, font, backgrounds, etc.

If you click on "Edit my current skin", you'll be taken to the secondary pages for your current skin.
If you click on "Create a new skin", you'll be taken to new secondary pages where you will enter all new information.

Under each of the skins you have saved that are not your current skins, you will have the choices: use, edit or delete.

If you want a saved skin to become your new current skin, click on "use"
If you want to edit the saved skin, click on "edit"
If you want to delete a saved skin, click on "delete"

There will also be buttons under each skin so that you can "Submit to Eons Gallery". Don't re-submit a skin that you've chosen from the Eons Profile Gallery. Click here for more info.

Whether you are creating a new skin or editing a saved skin, the secondary pages will be pretty much the same.
They will all have these tabs across the top of the left. A sampling of your profile will be on the right.

Style

The top left will say, "Skin Editor" and have the name of the skin your working on. There will be other information about the skin, also.

At the bottom of all the choices will be a box with Skin Name. Be sure to give the skin a name if you are going to submit it to the gallery. You can give/change the name from any secondary page.

Back to Top

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

Banners:

Before you can use a banner, you have to have one! The area where the banner goes is 974px wide X 100px high. You can use a small image and let it repeat to fill the space or you can create a banner the correct size to fit the space. For more information, you can find some files about creating banners in the file section of The Studio. There is also links to sites where you can create banners in the The Studio Links file (Index).

The picture below is basically how the top part of the banner section of the skinner will look:

Styles

Banner

Backgrounds

Fonts

Borders

Custom CSS

The "Banner Image" is an image that is displayed across the top of your profile page. Select a photo that you have uploaded to Eons - or copy and paste the URL of an image that has been stored on another web site such as Flickr or Photobucket. Image URLs should start with http:// and end with either .jpg, .jpeg, .gif or .png. For best results, size and crop your photo before uploading it. The banner is 974 pixels wide and 100 pixels tall.

You put the URL of your banner in the first box or click on "Choose a photo" if your banner is stored on Eons.

The other choices are fairly self-explanatory.

Questions:

Question: If I decide to select and use a skin from the gallery, will I have to also replace my banner, or will it stay the same ? Reply in post http://www.eons.com/groups/topic/787007-Eons-Skin-Gallery

Answer: Reloading your banner is relatively easy. When you use a skin from the gallery, your old skin remains available in "My Skins". Here are step by step instructions for copying a banner from one skin to another:

Go to the "My Skins" page.
Select the "Edit" link beneath your old skin.
Click on the "Banner" tab.
Highlight the text in the "Banner URL" field and select Copy (control-C on Windows computers)
Click the Cancel link at the bottom of the page to get back to "My Skins"
Select the "Edit" link beneath your new skin (the one you selected in the Gallery)
Click on the "Banner" tab.
Highlight the text in the "Banner URL" field (if any) and select Paste (control-V on Windows computers).
The banner preview should show the banner image. You might also want to adjust the "Repeat" and "Position" parameters.
Click the Save Changes button.
Done!

Posted by tallbob
April 20, 2008

Back to Top

Backgrounds

Before you can enter information on a background, you'll need to have an image to use. You can find backgrounds in the Eons group Background Gallery or you can choose a background from another site and upload it to Eons or a photosharing site such as photobucket. Click here for more information.

Styles

Banner

Backgrounds

Fonts

Borders

Custom CSS

Optionally hide default Eons styles that might get in the way of your custom profile styles

# Hide the default page background (the "blue fade" that starts at the top of the page).
# Hide the white, rounded-corner background behind the main content area.
# Hide the "member card" background (section at upper left with profile photo).
# Hide the Guest Book comment background.

Be sure that all of the boxes have checkmarks if you don't want the default Eons profile styling to show. The boxes should be fairly self-explanatory.

Some notes before beginning:

Backgrounds: Set color and image backgrounds for various areas of the page.
Color Mode: "default" uses the Eons default setting.
Image URL can be blank (no image) or a full url.
Color can be blank (use default color) or a hex number (#FF0000).

Choices:

Tiled backgrounds | Large image backgrounds |Simple color backgrounds | Backgrounds in separate sections

To have a tiled background,

Follow the instructions in the image.

Page Background instructions for Skinner

Large Image Backgrounds:

Use the instructions above to put the information into the skinner. If your image does not fill the page, you may want to choose to have it repeat or have it centered in the middle of the page. Use the prerview option to try things out and see what choices you like the best.

Posted as a reply to http://www.eons.com/groups/topic/789607-Hi-Newbie-here April 21, 2008
Question:
I am new to your group. I was wondering if you have a size limit on the backgrounds? If so, what is the size required?
Answer:
depends if you are picking a tiled wallpaper or one to fill the whole page.
If you need one to fill the page, I find that 1250 wide works best for me.
posted by TestofF8th April 23, 2008

Back to Top

For a simple color background:

Be sure that the drop down box does not show "transparent" as it is in the example image above, but rather "color." Then put the hex numbers of your color in the box under color. Leave the Image URL box blank. The bottom three scroll boxes ("Repeat", "Scroll", "Position") won't matter

Backgrounds in Sections of Profile Page (Boxes):

You can change the backgrounds of the boxes by going to Backgrounds, then Sections.

You can use a solid color by clicking on the Color box; a color chooser with a slider on the right side will appear. Drag the slider up or down to change the colors, and click inside the choice box to select. You can also make it solid or transparent.
Alternately, you can put a URL of your choice in the Sections URL box to customize the Section backgrounds.

posted by Sylk March 8, 2008 in reply to question

Get a background Image:

Choose a background

Use a background from the Eons group Background Gallery (Skip step 2 and 3 if you do this)
Use an image already on your computer (Skip step 2 if you do this)
Get an image from the internet. Be sure to read their terms of use. Links to free background sites:

Tickle.net - http://www.tickie.net/Backgrounds/index.html - has thousands of tile images, including food, animal prints, kaleidoscope - you need to provide a link back to their site.
Free Backgrounds 2002 - http://www.geocities.com/freebackgrounds2002/index.html and also http://www.geocities.com/freebackgrounds2002/tileindex.html
wattacroc - http://www.wattacroc.com/backs/ - Various patterns, also butterflies, cats and some holidays.
Wacky Backgrounds - http://wacky-background.com/index.php - Really wild and wacky backgrounds!
Ender Design: Realm Graphics - http://www.ender-design.com/rg/backidx.html - also includes a tool where you can tile ANY image anywhere on the Web and show it as a background with images and text on it. Even choose an appropriate text and link color. Worth checking out.
All Free backgrounds - http://www.allfreebackgrounds.com/ - Click here to find instructions about Choosing Backgrounds and Fonts at allfreebackgrounds.com. This link tells you about the All Free Backgrounds site..

Download it to your computer
Upload it to your Eons pictures or to a photo sharing site such as photobucket.
Copy the "Direct Link" from the site where your image is stored and put it in the background URL box of the skinner.

Fonts:

When you open the Fonts page, the top of the right hand column will look like this:

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

Styles

Banner

Backgrounds

Fonts

Borders

Custom CSS

Fonts: Change font color and style for various areas of the Profile
Colors can be blank (use default color) or a hex number (#ff0000).

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

One way to see which text is affected by what choice is to use a color that will clash and/or show up easily on your page. Use the preview option to see what is affected, then put the color that you really want used on the page for those fonts. You can Click here for more information about what each part affects. The information in this link uses pictures and is slower to load. It would have made this page way too slow to load for those of us on dial-up.

Back to Top

Borders:

When you open the border tab, at the top of the right hand column you will see:

Styles

Banner

Backgrounds

Fonts

Borders

Custom CSS

Borders: Optional frames around the main content area (where all your profile information is shown) or around the individual sections of your profile. A border can be added around the whole section, the title of the section or the body of the section (everything except the title).

Then there will be choices for 4 areas:

Main Content Border - The default Eons Profile page has "big white box" in the center. This will put a border around what we used to call the "big white box"

Border Style
Width
Color #

Section Border - This will put a border around the section "boxes." The section title will be inside the section border.

Border Style
Width
Color #

Section Title Border - This will put a border around the section titles "boxes". You can choose to have it only on the top, right, bottom, left, all sides or whatever combination you like.

Border Style
Width
Color #
Top
Right
Bottom
Left

Section Body Border- This will put a border around the section body. The section title will not be inside the border. You can choose to have it only on the top, right, bottom, left, all sides or whatever combination you like.

Border Style
Width
Color #
Top
Right
Bottom
Left

Custom CSS Box:

When you open the Custom CSS tab, you will see:

Styles

Banner

Backgrounds

Fonts

Borders

Custom CSS

WARNING: Experts only! Enter your custom CSS code here.
Example (right) will not show Custom CSS settings. Use "Preview" instead.
HTML tags (e.g. <style> or </style>) are not necessary.
To disable Custom CSS, un-check the "Use Custom CSS" box.

Heed the warnings. Don't use code generated for another social networking group, etc.

Want to talk CSS? Come to The Studio Group

Back to Top

Other Files/Posts with Information:

Choosing Backgrounds and Fonts From AFB This tutorial explains how to use the color picker with backgrounds available from the all free background site.
The Studio Links file (Index) - Contains links to Graphic sources, ect.

Posts

Creating You Own Profile Skin - Group Post - Jan. 20, 2009

Return to The Studio Group Page