groups

Comment deleted by an Administrator

Comment deleted by an Administrator

Advanced Profile tricks

Eons says “WARNING: Experts Only!” but if you are confident, here are some advanced tips to Jazz up your Profile.

You can add html directly to the text boxes under; 'About' -> 'Edit'. You can add Font colors, highlight text, all the things we discuss in “Change Font color, add images and more!”

You can add CSS (as if you were adding it to the < Head > section) under; 'Profile' -> 'Skins' -> 'Edit my current Skin' -> 'Custom CSS'.

You can add html in a Widget box by going to 'Add a Widget' -> 'Add a Custom Widget' (I use this for a photobucket slide show. You can get the “HTML Code” directly from photobucket). (There's no 'Preview' so if you need to edit your Widget follow the above path then at the bottom of the page see 'Edit my Widgets'.)

You can add some javascript by first downloading a Widget for this. Go to my Profile page and look for the Widget that says,

Type any HTML/text here.
You can use any HTML tags you like...for example:
Links: Widgetbox Javascript:

Click 'Get Widget' -> ‘Copy’ then paste this into a ‘Custom Widget’. You can then add your javascript within their code, (just before where it says ‘< noscript >’). The problem I've had with this is that eons only gives you 1000 characters and many javascripts are much longer!

Final note: Less is sometimes more! It is possible to overload your page and make things load and play really slow, even with Broadband! You can also encounter conflicts between scripts and cause your Profile page to freeze, as I found out!

You can add CSS to your Profile page even though CSS code normally would go in the < head > section of a web page. To add the code go to; 'Profile' -> 'Skins' -> 'Edit my current Skin' -> 'Custom CSS'. There you can add one or more codes.

Note: the URL’s in the code here may not show due to eons formatting and you’ll just see “View Link”. They may also show up with added blank spaces. eons can be a little quirky. Just replace them with yours.

Add a Curser image

Here’s a little frog for your curser.

<style type="text/css">
HTML,BODY{cursor: url("http://www.totallyfreecursors.com/ details.cfm/id/625/Frog_21.htm"), url("http://www.totallyfreecursors.com/ details.cfm/id/625/Frog_21.htm"), auto;}
</style>

There are lots of sites to get free cursers, here’s just one; view link

Getting rid of the dreaded “Yellow box”.

You know the one that says, ‘Add a Video’ ‘Add a Widget’, etc., there are 2 ways

One is to just change the background color and border

.yb .bt, .yb .bt div, .yb .bb, .yb .bb div { background: none; height: auto;}
.yb .i1, .yb .i2 { background: none; padding: 0; }
.yb .i3 {background: none; border: 3px inset #53371A; padding: 7px;}

The other is to replace the background color with an image

.yb .bt, .yb .bt div, .yb .bb, .yb .bb div { background: none; height: auto;}
.yb .i1, .yb .i2 { background: none; padding: 0; }
.yb .i3 {background-image: url(http://i605.photobucket.com/albums/ tt134/robertgrout/tay.jpg); border: 5px solid #006600; padding: 7px;}

You can also add to your Profile pop-up images from a thumbnail or a line of text. However, it’s a 2 step process.

First, enter the code below from view link to the Custom CSS box.

/*Credits: Dynamic Drive CSS Library */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -170px;
left: 80px; /*position where enlarged image should offset horizontally */

}

Next, add this code to your Profile in the ‘About’ ‘Edit’ section, where you want the thumbnail;

<P><a class="thumbnail" href="#thumb"><img src="http://i605.photobucket.com/albums/ tt134/robertgrout/eons_boxcar2.jpg" width="70px" height="45px" border="0" /><span><img width="500px" height="350px" src="http://i605.photobucket.com/albums/ tt134/robertgrout/eons_boxcar2.jpg" /><br />Scratch built 'O' scale Boxcar</span></a>

Or text

<P><a class="thumbnail" href="#thumb">Train Station<span><img width="500px" height="350px" src="http://www.eons.com/images/members/ 2009/3/5/7/4/74298263218863745746.JPG" /><br />Scratch built Train Station</span></a><br />

Now, aside from replacing my images, you may need to tweak this a little. From the Custom CSS box you can adjust the “position where enlarged image should offset horizontally” by changing the ‘top’ and ‘left’ values.

You can adjust the size of the thumbnail and pop-up image from the html.

What can I say..............BettieB