LiL_lAuReN_7721's HTML Help Page > Sea Reflections
Site hosted by Angelfire.com: Build your free website today!
Home>Lauren's html Help
Here
Quick links

- Backgrounds display it, make it fixed, make it a solid colour
- Links borders and background code for links, mouse overs, hovers incl guild front page links
- Text Areas eg search box in left side bar, change font/colour/transparency of your text areas
- Scroll Bars 'dem things on the right
- General Font Change Shop prices font change etc
- Image change and filters Glowing images, remove (chroma) white areas in pics, remove yellowness from left side bar,inverts
- Fade Fuzzy, blurry, transparent images
- Cursor change
- Adding Pics Add banners, shields (3 year thing), badges, pictures for names (add a blinkie), change name colour, position a pic in pet lookup
- Table Boxes, faded transparent boxes/tables eg user lookups, shops, pet lookups and guild 2nd council,BLOG's
- Misc. changes Add space (paragraphs), Hobbies, Something has happened, battledome challengers and learn more about CSS
- Premade Lookups Now moved to SpongieCuties's pet page
- Trouble Shooting First stop if there's a problem
- Link to this page Help spread the Beautify Neopia Message
There
Site Stuff
Credits/Affies
Sea Reflections: The Layout
Sea Reflections is very similar to my current Ami layout; in fact, the design is exactly the same with the exception of the color theme and main image. This layout features Sailor Neptune, and, like my layout, is designed to be used throughout your site, with the navigation located to the left side of the screen. It best fits screen resolutions of 800x600 and bigger, though it can be used for smaller resolutions as well with a bit of scrolling. I was hoping to make a different layout for my web graphic shop, but I thought that another set of similar layouts like mine might be nice. This layout would be perfect for a shrine dedicated to Sailor Neptune or Michiru, the senshi of the sea.
Using This Layout

Unzip the zip file to a temporary folder. After unzipping the files, personalize the layout and upload everything unto your server.

To edit the title, just open image800_2_1.jpg and add your site title. This image does not have Sea Reflections written across it for your convenience. However, remember to replace the "image800_2.jpg" in the html coding to "image800_2_1.jpg" to adjust it to fit your title. To customize navigation, just open layout1.htm and edit the links in the code. To add more navigational tables, simply copy and paste the code for the tables and modify as necessary.

You may have noticed the bar under the main image. This bar can be used to inform the visitor where he/she is at your site. For example, the bar now reads “Home,” meaning that the visitor is at the home page. Edit this bar in layout1.htm as much as necessary for other parts of your site.

This layout uses a css file (css2.css) for formating the titles, contents, font face, font color, and font size. Additional css in the html file formats the scrollbar and links.

My Bloggy (FINALLY!)

so...here's the 411 on my page. my name's LiL_lAuReN_7721 and we'll talk about me after i help you with some html...HERE WE GO!:

Backgrounds

  • How do I add a background? For your own background change this url http://images.neopets.com/backgrounds/tile4.gif to the url of your pic

  • Where can I get a background from? Check out google.com find a pic you like and upload it to your own image host... Also check out the links on the right :)

  • How do I make that background fixed?

  • How can I get a solid colour for a background? See left column for a list of colours

  • How can I stop my background from repeating? And, and, be centered?

  • How can I stretch my background?
    As far as I know you can't unfortunately

    • Links
    back to top

  • How can I change the colour and font of my links?

  • How can I change the colour and font of my links in my guild?

  • How can I change the background colour when I mouse over my links?

  • How can I make the text CAPITALS when I mouse over my links?

  • How can I get a (rainbow) background when I mouse over my links? The font colour is set to black but you can change that to whichever colour. The background colour is set to pink while the rainbow background loads.

  • How can I get a border around my links when I mouse over them? 4px:- is the size, can be any number .... dotted:- can be solid,dashed,ridge ... red:- is the colour...

  • How can I get both a border and a rainbow background around my links when I mouse over them?

  • How can I get a rainbow background over the left side table when I mouse over them? You need to have faded images first - see fade section

  • How can I get a rainbow background and border over the left side table when I mouse over them? You need to have faded images first - see fade section, also experiment with the border as not all bits may show

  • How can I get a rainbow background and border over ALL my links, including the left side table when I mouse over them? You need to have faded images first - see fade section, also experiment with the border as not all bits may show

    • Text Areas
    back to top

  • How can I get a border around the text area .... and input (buttons)? 4px:- is the size, can be any number .... dotted:- can be solid,dashed,ridge ... red:- is the colour...

  • How can I get a different background in my text area .... and input (buttons)? Defaults to a purple background until the rainbow .gif is loaded as the background

  • How can I make my TEXTAREA transparent? Defaults to a purple background until the rainbow .gif is loaded as the background. Opacity=50:- can be any number between 0 and 100.

  • How do I change the colour and size of my text in TEXTAREA? 9pt can be any size text like 10pt,12pt ...

    • Scroll Bars
    back to top

  • How can I have coloured scroll bars? Only works with Internet Explorer web browser at least IE5.5. I don't think this code works with Netscape.

    • General Font Change
    back to top

  • How can I change my font colour of my shop items? Neopets has disabled CSS in shops so can only change the font colour

  • How can I change my font and font size in my pet page, userlookup or any other web page?? Change verdana to whichever font you want, arial, courier, time; 9pt can be any size text like 10pt,12pt ...

  • How can I change the font of the gender word "Female" or "Male".Change verdana to whichever font you want, arial, courier, time; 9pt can be any size text like 10pt,12pt ...

  • How can I change my name or any word/sentence to a different colour? For your name add the following code to your full name in your user info, for a different word add it to the "about me" box. Change C000CC to the hex colour you want or named color eg lime and change "Your Name" to your name or any other word

  • How can I make my font glow?

  • How can I make my text centered?

    • Image change and filters
    back to top

  • How do you make your images glow on the edges?

  • How do you invert your user lookup? Changes it to blue, try other filters by replacing invert with gray or xray

  • How can I get rid of the white stuff around my shield and trophies on my user lookup or get rid of the white stuff around my pet and petpet on my pet lookup?

  • How can I get rid of the white stuff around my shop items?Neopets has disabled CSS in shops, so you can't now.

  • How can I get rid of the box/border around my shop items? You can change #FFFFFF to any other colour

  • How can I get rid of the white stuff in all my images on the page?

  • Hey, how did you change the colour of your left hand side bar? The side bar will be transparent, so you'll see your background behind it.

  • Here's a slightly different take on the transparent left side barIt's rather blue but the side bar will be transparent, so you'll see your background behind it. You can change invert to gray or xray. Try changing black to white also for different effects.

  • Hey I've added the code above to make my left side bar transparent but I don't want that effect on my shield/trophies/pet or petpet etc what can I do? Just add this "get rid of white stuff" code underneath. If you want to access the neopets top banner change ... p img{ ... to ... p img,a img{ ... If you don't want to get rid of the white stuff then change ... filter:chroma(color=white)} ... to ... filter:none} ... Neopets has disabled CSS in shops.

    • Fade
    back to top

  • How can I make my pics faded? Opacity=60 - can be a number between 0 and 100 ; Style=1 for a right hand side fade; Style=2 for circular fade; Style=3 - for rectangular fade; remove xray if you want to keep the yellow colour

  • How can I make my table background transparent?

  • How can I make my GUILD faded? Opacity=90 - can be a number between 0 and 100

  • How can I make my pics look transparent? To preserve the original colours remove xray

    • Cursor change
    back to top

  • How can I get a crosshair cursor? change crosshair to hand,e-resize,n-resize,sw-resize etc. For mouse over change body to a:hover

    • Adding Pics
    back to top

  • How can I get a picture into my user lookup, like where the words are? Change the height and width values to the height and width of your pic. Put the code about where you'd like the pic to appear. For more than one pic, change all mypic to mypic2.

  • How can I get a picture into my user lookup, like where the words are, but so it will take up the whole line and be centered? Change the height and width values to the height and width of the line, you may need too experiment. Put the code about where you'd like the pic to appear. For more than one pic, change mypicline to mypicline2.

  • How can I get a picture into my user lookup, and put it anywhere in my lookup? Change the height and width values to the height and width of your pic. For more than one pic, change all anypic1 to anypic2. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner.

  • How can I get my own top banner? Change the height and width values to the height and width of your pic. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner. Want FREE top banners with code? _flaming_punch_'s free banners can help :)

  • How can I get my own shield/badge/3 year thing in your lookup? The pic you use must be at least these dimensions, width=100 and height=221. This is because the shield changes positions slightly between viewing using random friend or the search bar. Make sure the height and width values are the height and width of your pic. To position it, change the left and top values, where left=0 and top=0 would be the top lefthand corner. Change http://www.boomspeed.com/spacefreak/shieldz/redshield.gif to the url of your pic. Check out Bobbyroo's site for some great shields :)

  • How can I have a picture like a BLINKIE for my name on my user lookup? First change your full name to at your user info. Then add the following code to your chat profile. Change the height and width values to the height and width of your pic. You can leave in your name if you just want to add a pic. Change the url http://jaynay.homestead.com/files/jaynayblinkie3.gif to the url of your pic. Do you want a blinkie? Then pls take my poll on spacey babys pet page

  • How can I change my name to a different colour? Add the following code to your full name in your user info. Change "C000CC" to the hex colour you want and change "Your Name" to your name :P

  • What's a dynamic blinkie? I can type whatever I want in this blinkie??

    This is a special blinkie where you can write in your own name! But you do need to follow these instructions! Want to see a working example? Check out CssHelp's lookup!
    To put this blinkie as your name in your user lookup first change your full name to exactly (and only) at your user info. Add the following CSS code into the about me box.

    You can change the words but you MUST use exactly 12 characters (because there are 12 blinkie blocks). The font MUST stay the same. You can change the text color, white, to any other color. To put this blinkie anywhere else (guild/shop) put this bit and the above CSS code wherever you want the blinkie to appear :)

  • How can I position a pic in my pet lookup? You can use an external style sheet. Change this URL http://images.neopets.com/pets/hit/kougra_baby_right.gif to the URL of your pic. Works best if pics dimensions are 150x150. More info on external style sheets in trouble shooting section.

    • Table, table
    back to top

  • How can I get a cool table? Like the one on this page?? Ah ha that's my secret I'll never tell!!

    Heh, actually you should check out the HTML table help at draac.com ... or maybe SpongieCutie's pet page :) ...

  • How can I get my words in my user lookup to display, like, in a table? filter:alpha(opacity=60) makes it transparent. Make sure you scroll all the way to the bottom for all the instructions :P

  • How can I get the rest of my lookup words in a similar table? filter:alpha(opacity=60) makes it transparent

  • How can I get my own background in the left side bar? Use this code if you want tables around your lookup stats/trophies etc.

  • How can I get my own background in the left side bar? Use this code if you don't want tables around your lookup stats/trophies etc.

  • How can I get my shop items in an awesome table like yours????? Add this to the very end of your shop description

  • How can I get my pet lookup in an awesome table like your pets????? Add this to the start of your pet lookup description

  • How can I get rid of the box around my pets stats in my pets lookup?

  • How can I position a table so I can make like a guild second council n stuff?? You may need to change the values of left and top to position the table properly. Change red and black to the colours of your guild. Change ALL occurences of _space_freak_ to your members names and guild leader in bottom case.

  • I need to know about BLOG's? How can I have one in my guild or shop?

    The best place to go for premade ones esp shop ones is ... crazeydragon.com

    Check out SpongieCuties's pet page for how to make your own guild BLOG and see example here :)

    Misc. changes
    back to top

  • How can I have spaces or paragraphs in my user lookup like yours?

    Ok add this bit of code You may need to change 530 to a bigger number if you have a smaller font or a smaller number if you have a larger font ... experiment

    Then add this bit of code EVERY place you want a space or carridge return.

  • How can I put a cool counter up?

    Well that's pretty simple just go along to http://okcounter.com/index_english.html and join up! You can choose what sort the counter pic will look like and they will give you the HTML code!! - 10 Oct 02 - Unfortunately it looks like you have to pay if you want an okcounter counter ... or try boingdragon.com details below.

  • But, but, how can I put a cool counter up in my user lookup like you?

    Well that's a wee bit tricky but not to hard, you have to use CSS. So follow the same instructions above, get the HTML code, now you want the URL of the counter pic in the HTML code, it will look similar to this http://okcounter.com/count.html?id=999999 ... You may need to change the height and width values. Put the code where you want the counter to appear. You NEED to put that you got the counter from okcounter.com somewhere on the page, or else they may terminate your account.

  • How can I put a cool free counter up?

    Well that's pretty simple just go along to http://boingdragon.com and sign up! You can choose what sort the counter pic will look like and they will give you the HTML code!! Kudos to rosethorne for finding this site :)

  • But, but, how can I put this cool free counter up in my user lookup like you?

    Well that's a wee bit tricky but not to hard, you have to use CSS. So follow the same instructions above, get the HTML code, now you want the image URL of the counter pic in the HTML code, it will look similar to this http://cgi.boingdragon.com/count/yourusername/0.gif ... You may need to change the height and width values. Put the code where you want the counter to appear. You NEED to put that you got the counter from boingdragon.com somewhere on the page, or else they may terminate your account.

  • How can I make my hobbies and country (customise them to what I want)?

    Unfortunately it looks like Neopets have changed it so you can't customise the country but you can customise your Hobbies!

    Check out neopian coalition's site (click the banner below), go to features, then go to programs and look for a program called profile mod.
    WARNING!! You have to figure out for yourself if you can trust neopian coalition, check out their site. I've used the mod on an account with no items or np and it worked fine, then I made sure to change my pwd. But you need to think if the risk is worth it. You have been warned!!

    Neopian Coalition | Laying the Smackdown on Neopets!

  • How do you create (new battledome challenger) for your pets lookup? Change _Flaming_Punch_ to your pets name. Change scorchio_red to your pet species and colour eg aisha_faerie ... chia_tomato

  • How do you create a "Something has happened" box?The example below is one I made up :)

  • Ok, I want to learn more about this code, I want to understand how it works? Learn even more at W3School.

    • Trouble Shooting
    back to top

  • When I enter in some code I get this weird neoHTML error??? And how do I get a Sig, Siggy, Signature??

    If you update your chat profile without updating your default neoHTML, neopets will default a value of 'none' in for your neoHTML ... problem is that if you try to update your user lookup again you'll get a neoHTML error... i've reported it to Neopets :)

    SOLUTION:- (this gives you a siggy in the chat boards)Put in a default neoHTML code ... Enter the neoHTML in the "Default neoHTML" box on the chat page.

    [font s=2 c=lime f=courier]neoHTML[/font][sub]my sig[/sub]

    s=2 ... size of the font
    c=lime ... colour of the font
    f=courier ... font face (font name can only be one word eg script,arial,terminal,verdana)
    sub ... subscript
    my sig ... where you put your signature (short message posted after every message you write)

    [font c=hotpink][b][sup]neoHTML[/sup][/b][sub]neopets.com/~csshelp[/sub][/font]

    sup ... superscript
    b ... bold

    [glow s=3 c=indigo][b][font c=white]neoHTML[sub]*meep*[/sub][/font][/b][/glow]

    glow ... make it glow ... heh
    s=3 ... size of glow
    c=indigo ... glow color
    c=white ... font colour

    [shadow s=3 c=red][b][font s=2 c=black]neoHTML[/font][/shadow][sub]*ghost*[/sub]

    shadow ... drop shadow
    s=3 .. size of shadow
    c=red ... colour of shadow
    *ghost* ... puts a little ghost pic at the end of all your posts

    [sub]csshelp:[b][font s=3 c=violet]neoHTML[/font][/b][i]-PS ILOVEU!:P[/i][/sub]

    This neoHTML has a sig before and after!

  • I put in your CSS code, but it didn't work?

    Ok, the problem with CSS code is that it can only appear once, if it appears more than once then the last bit of code is usually used. For example if you use this bit of code...

    Then the second picture error_back.gif would be the background not error_title.gif.

    SOLUTION:- Delete all former codes, add new codes ... or ... save all old codes ... then remove the old codes and add the old and new codes back one by one to see the effects

  • I put in that mouseover code for a rainbow background but it doesn't work over the left side table like it does with your user lookup, why????

    Ok, this is a similar problem to the one above ... first off the left side bar MUST be in some way faded or the yellow bits removed (chroma). If you have done that and it still doesn't work then you may have defined the code like this...

    In this case the border will probably show, but the rainbow bit won't entirely ...

    SOLUTION:- you need to change the code to one line ... eg

  • I copied the code correctly but my pic still doesn't show!!??

    Ok what usually happens is the website where the pic is doesn't allow remote image linking. So if you have your pic at geocities.com or angelfire.com it won't show.

    SOLUTION:- You need to upload the pic to a place that does allow remote image linking, the best pace I've found is your guild's photo gallery, more help at Garaneno's Graphic Tips page. The other places you have to pay unfortunately ...

    Once you've uploaded the pic right click it and choose properties to find the URL

  • I copied the code correctly and my pic shows fine but other people have said they can't see it?? why??

    Ok you most probably have your pic stored on your home pc, it needs to be on the internet for people to see it. The other case is because the website doesn't allow remote image linking. So if you have your pic at geocities.com or angelfire.com it won't show.

    SOLUTION:- You need to upload the pic to a place that does allow remote image linking, the best pace I've found is your guild's photo gallery, more help at Garaneno's Graphic Tips page. The other places you have to pay unfortunately ...

    Once you've uploaded the pic right click it and choose properties to find the URL

  • How can I have music in my user lookup?

    Sorry neopets changed it so you can't enter those html tags in anymore, so no you can't have music in your user lookup... some people used html b4 neopets changed it so that's why theirs has music :(

  • How do you make the CSS and HTML code show up in those tables / boxes on this page??

    Use HTML - T E X T A R E A without the spaces see www.draac.com for more ... on pet pages you have to type T E X T _ A R E A without the spaces to make it work

  • What's the code for disabling the right click so people can't steal my source code or pictures?? People who steal pics and claim they made them are horrible, and it's something I have to deal with day after day ... sigh ...

    This is javascript but I recommend that you don't use it because it is annoying and does not stop people from stealing anything. Anyone can copy your code unfortunately. But the good CSS codes here are unique, I made them up and I know when people have copied them and try to make out they made them, as if, lamers :P

    To stop people from copying and using your pictures, it is best to cutomise it to you by writing your name on it some how. You can write on the page "Please don't steal my pics" etc and that can help but it won't stop everybody. It can be quite distressing when you see someone has stolen your pic, try asking them nicely to stop.

  • What's the code for popups???

    dunno.*that's hard!*

  • Why don't style tags or link tags work in shops anymore???

    Neopets have disabled it to stop scammers, sigh, such over-regulation :P ... Now we can only use HTML. Email neopets today ... and ask them to punish the scammers, not the neopians who want Neopia Beautiful, and to plz bring back style tags in SHOPS. And stop falling for SCAMS!! ;)

  • How do you do an external style sheet?

    To learn how to use external style sheets ... Basically you put all your CSS code (except the style tags!) into a text file and save it as c.css or similar. Then upload this file to your website. Then link to that file using the code at w3schools.

    Link back to here
    back to top

  • How can I link to this page from my user lookup??? Use your own words if you'd like...

  • What's another way I can link to this page from my user lookup??? This will position the text up the top of your lookup, like mine, use your own words if you'd like... Change the top and left values if you'd like to position it differently

  • What's another way I can link to this page from my user lookup, without positioning?? Put this code where you'd like it to appear, use your own words if you'd like...

  • What's a way I can link to this page using your banner in my user lookup??? Use your own words if you'd like...

  • Ooo whats the codes to link to this page from my guild or shop or web page??? Use your own words if you'd like...

  • Maybe you'd like to use this pic Beautify Neopia by using the CSS codes here to update your user lookups, pet lookups, pet pages, guilds and shops. to link here instead?

  • Or maybe even this pic?

    Beautify Neopia by using the CSS codes here to update your user lookups, pet lookups, pet pages, guilds and shops.

    		•
    This site belongs to your name.
    Design/Layout © by Evelyn at Enchanted Dreams