Welcome to genesis CSS! This is a specialized guide that aims to teach you some of the more tricky and fun aspects of css and html coding for use here on neopets! This isn't a guide for beginners, and if you have no experience with css or html, I would recommend a site like Chap's Neopets Code Reference or Summer's Css For You to give you a bit more background into the building blocks of what we'll be using on this site.
What you will find on this guide is a detailed look at the little effects that will really make your pages pop! Looking for something that isn't here? Just send me a mail, (there's a link to my lookup off to your left) and I'll see what I can do!
6/23: The lovely user Anne suggested adding the full code under each section, and I thought that was a great idea, filter difficulties mean some sections can't have this, but I'll do it where I can, hope that helps!
6/10: Reached 5000 page hits!
5/17: Opening once again and looking for directory listings!
5/16: Added hover-view divs, had to condense a lot of smaller steps into one to work with the filters, hopefully it's still easy enough to follow.
5/15: Started the long process of fixing all the guides so they work in neopet's new filters, and added some simple navigation.
5/14: Trying to get this up and working again, thanks for your patience!
drop-down menus for userlookups
If you're here because you're curious as to how I did the menus for my pets on my userlookup, this is the section you want to pay attention to!
Note: The technique here isn't the only one out there, and some indeed seem like they would be easier, but this is the only one I've found to be compatible with all browsers, because it relies on the drop-down coding neo already has in place for the drop-down menus of the default navigation.This technique will NOT work on petpages, sorry.
There are several different uses for drop-down menus, including some I'm sure I haven't thought of. Be creative! Their most common use is for links, like the neopets navigation, but they can also be used for plain text, adding a nice way of adding a description or caption to an image other than the alternative text option. On my lookup, where this technique received many complements and inquiries about the coding behind it, I used it to add petpage and description options to my pets. For as simple as it looks, the coding can be a little tricky, so let's split it into parts for ease of learning:
Unlike most of the things in this guide, this technique relies more on html than css, the reason being is that neo has already set the modifying codes in place for the default navigation. We'll just be using them for our own purposes! These codes go outside (and before, to deal with the "position" issue in the filter) your style tags.
Now, you need an image. This will be a link itself, and when you hover over it, your menu will drop down. Got it? Good. Let's say you're using this image:
In this case, we'll be linking to the neopets homepage, but this can be changed along with the image itself. Now we'll add codes to position it, and make it able to support a drop down menu. Remember to add values in place of the 00's as well as change the image url to your own image and add content where it says CONTENT:
*important: filter changes mean this won't show up in the text area, but you'll also have to add one more tag, /div (inside carrot brackets just like the rest), it goes right at the end.
Now you've got your own working drop down menu! note: you need the "required" codes from the css section a little further down in order to see it) Doesn't look quite right? Don't worry, now you can go back and perfect it with few more codes. You may notice that the menu drops down from the top left corner of the image. It's fine to leave it like that, but I've found it looks nicer if it comes from the middle of the bottom, like with the neopets default navigation.
See the ul class "dropdown"? It's that code that comes right before the content you added. You can change it to include things like text-alignment, as well as positioning for where on the image the drop down menu comes from. The important parts are "top" and "margin-left". Top will move the menu down the image, so a value of 50px will move it 50px down the image. Margin-left will move the menu to the right of the image, so a value of 50px will move it 50px to the right of the left edge of the image.
Whew! That's a lot for just one effect! You're almost done, too, just one more thing:
Everything here will be dealing with the things that need to go inside style tags. First, the required codes:
Without these, your images won't show up and you won't be able to use the drop down menus so they're very important. Everything else in this section is optional, and deals only with customizing what your menu looks like.
So say you wanted to change the background and regular text color for the drop down menu, you would add this in, changing "COLORHERE" to the hex code of your choice:
You could also change the color of the links with this:
And the color of the links when you hover over them with your cursor:
And lastly, if you don't want your links to be bold (they are by default), add this:
There are many more little things you can do, like adding padding or borders to make it look just right, feel free to experiment with different things and see what you come up with!
Now let's see the whole code together:
*just remember to add a /div in brackets at the end!
This concludes userlookup drop down menus! If you have any questions or problems, feel free to shoot me a mail, there should be a link at the top of the page. Hope you found it helpful!
top of the page
menus with float
This is a special guide, telling how to make one of my favorite types of menus, using images and the css property of float! There are lots of uses for floats, this is just one that I find especially neat. I had a few lookups a while back using one of these for my pets so I could have their pictures in full, 300x300px size without taking up that size times four of space on the page. (see here for an example.) It has many other uses though, and with a little creativity I'm sure you can think of some yourself!
The great thing about these is that they'll work on petpages or lookups, though they tend take up a lot of character space so if you rely on having that space on your lookup for other coding or an about me section, you may want to save it for use on a petpage, or somewhere else where you aren't limited. Fair enough? Then let's get started!
First, the easy part. You need some links, and one image each for the links you have. It works best if all the images are the same size. For this guide, we'll be using an avatar with the link being to the neopets homepage, but you can choose literally anything.
Next you need to decide which side you want your links, and which side you want your images to show up on when you hover over the links. This is just a starting point, this guide will show you how to have links on both sides and the images in the middle, but to begin with choose one or the other, it doesn't matter which, but since the coding would be a little different, for this guide we'll begin with the links on the right and the images on the left.
Now we need to set up a space for the images and links to show up in. This will be a division we'll call "box". We'll add a border to it so we can see where it is to begin with, it can be edited later to look however you want. We have to assign it a height and width, and what they are depends on the size of your images. Typically, the height will be the same as your images, and the width will be that of your image plus the width of the links you'll be adding (if you don't know how much to add for the links, I would make it 100px just to be safe, again you can adjust later). Since for our example the avatar we're using for the images is 50px by 50px, we'll make it 50px high and 150px wide. Remember, this goes in style tags!
Now we need to assign some basic attributes to the links, in this case just width and height that you need to worry about, though you can add all the sorts of fun attributes you can with any links.
Now we assign some basic attributes to the images, in this case again just the width and height that you need to worry about, to change to the size of your biggest image. Leave everything else just as it is.
That's it for the css, everything else in this section should go outside your style tags.
Now for actually setting up the menu. First things first, we need the opening tags:
*note filter changes are making me leave off the carrot brackets (again), but just replace all the parentheses and you should be fine!
Now to add the links and images, just repeat this coding for each link, remember to replace the link url, link name, and image url.
Repeat those codes for as many links as you'd like! Once you've added all your links and their images, just close up the code with two /div's (in carrot brackets like everything else) and you're done!
So wait, this only has links on one side! Say you want to have links on both sides of the space where the images show up, like in the example listed at the beginning? It's an easy enough step further, but you'll have to go back and edit a couple things in css again.
The CSS (for links on both sides of the images)
The first thing is to change the width of the #box to add the extra width of the new set of links, so in this case we would change from 150px to 250px.
Remember that bit for adding attributes to the links? This will go right under that, and will be just like it, only we'll change the name and switch the float so they're on the left side.
Now remember that bit for adding attributes to the images? In the css there was a part that said this:
We now have to change the left value to be equal to the width of the links we have on the left side, in this case, 100px. Once that's done, you can head back up to the html.
The HTML (for links on both sides of the images)
See where you have the ending tags with two /div's? Go ahead and delete one of the /div's. We'll add it back on after the new links.
Now you add a new opening tag for your new links.
*note filter changes are making me leave off the carrot brackets (again), but you should get the gist of that by now.
Then add links the same way you added the first ones, with the same code. Once that's done add in that second ending /div we took off, as well as another to close the whole thing.
And that's it! You have your own basic menu with floating images. =) Feel free to leave it as is, or add all sorts of fun colors, backgrounds, padding, and anything else you can think of to the css, that's what it's there for.
top of the page
Something simple that I feel doesn't get utilized enough where it might be handy is z-index. What is z-index? It's a property of css that allows you to place some elements on top of others. The best way to think of it is to imagine what you see on a web page to exist not in the flat, two dimensions that you see, but in three. You have up and down, left and right, but you also have forward and back, as if you could stick your hand right into your computer screen. Adding a z-index allows you to manipulate how far forward or back an item sits on the page. A higher number will bring it forward from normal, and a negative will push it backward from normal. So what can this be used for?
Well, let's say you have a basic layout with a box and some text on top of the box, like so:
See how the text overlaps with the "navigate" picture? That's because it and the box of the layout are one flat image. Sure, you can start the text lower down, but that's a little boring, don't you think? So what we can do is separate the "navigate" image and the main box, then assign a positive number z-index to the "navigate" image:
See how the text is now behind the image? If we were to scroll it would still stay behind there because the "navigate" part is now more forward than the rest of the text and layout.
There's a lot of creative ways you can take advantage of this simple code. Just remember, it's css, so add it to things already inside style codes like so (replace 00's with any number, depending on how forward or backward you want it):
Or if you're adding it to an image or other element in HTML:
Just have fun with it!
top of the page
Preview this effect by hovering here!
Like what you see? That's a hover-view div. They're very useful, and easy to do too! Most of how I see them being used is for viewing big images like layout previews that would take up too much space in their full size otherwise. You can put text and images inside them but no links. Unfortunately there just is no way around that without using span, but then it won't render in IE. If you want to use something like this for userlookups I would recommend using the drop-down menus for userlookups guide at the beginning of this guide instead, this is designed mainly for petpages.
In this guide we will be making that same div from the preview above with the warf image and a caption underneath. Feel free to edit it any way you would like to fit your site!
The first step is to set up the class name and put down the basic codes that will hide it until you hover over the link. It doesn't matter what you name it, just so long as you can remember what it is.
Next we set up the code for the box where your content will sit. Name it, and give it some basic attributes. Literally anything here can be edited to make it look how you want, just remember to make it big enough for your content, as otherwise the content will run out the bottom.
Hint! You can turn either dimensions as "auto" and it should automatically set the box at the right size to fit your content!
That's all for the css, pretty basic, right?
This part isn't too much harder than the css, it's just setting up the text to hover over and the content that goes inside the div. Unfortunately because IE is stubborn, the text needs to be a link, it doesn't have to actually go anywhere (in the example the link is #test, if you click it nothing will happen because there is no anchor named test). First, set up the link name, what text you want to hover over, and remember to fill in the class name and div name from earlier in the css.
Now you need to fill in the actual content of the div, remember, you can put images or text but no links. If you run out of room go back to the css and make the div bigger, or follow the hint and set the height and width to "auto". In this example there's a small image and a caption underneath, so it's set to have just the right amount of space.
If you want multiple divs with different sizes follow the same step starting at the div name (second text area in the css section) making sure to name it something different in the css and html. That's all there is to it! If you have any problems or questions feel free to neomail me!
top of the page
Saving character space
This is a guide for userlookups. Of course everything here will work for petpages, but most things will actually just make your page harder to edit later on because it takes out organizational things like spaces and line-breaks, and it is also not a needed thing for petpages because you simply won't run out of space there like you do for userlookups.
So, you've designed an awesome new lookup, and you're putting in all the basic codes in and you start to notice the number in that box labeled "You have x characters left for your message" getting smaller and smaller, but you aren't even near done yet! What do you do? Well the frustrating truth is once you're out, you're out, and though I must inquire about the limit in the editorial every week, we have no answers as to why, or if there will ever be any hope for more in the future. Until that changes though, there are some things you can do to use as few characters as possible.
Let's start with the links. Everyone knows the url of the neo homepage is "http://www.neopets.com/index.phtml". Many also realize that to get there all you actually have to type into your address bar is "neopets.com" and it will automatically redirect you there. But when linking to pages from within a site, you can leave off everything that comes before the domain. So instead of linking to "http://www.neopets.com/index.phtml", you can shorten that to "/index.phtml". Because neopets links are all that's allowed, you can do this with all your links (though be careful not to shorten any offsite-hosted image urls!). This can save you tons of character space!
Next it's time to tackle your css. One of the first things you should do is look over all your color hex codes. See any that have three repeating characters, like #334455 or #000000? Shorten these to three digits, so #334455 becomes #345 and #000000 becomes #000. It won't save you much, but if you're like me, every character counts (fun fact: that was my elementary school's motto!).
Now for the easiest part, change any custom division or class names to be one single letter. Say you've got a division for your "about me" text, called #aboutme. Rename it #a, and remember to also change it in your html. It's an easy fix that can save some people quite a few characters!
After that, it's time to wrap up with the thing that will force the most actual rewriting. It's quite possible you're already using this for some things, but often not all that you could be. What is it? It's listing multiple divisions and classes that have the same properties. Say you've got three things you want to hide: #header, #footer, and .brand-mamabar. You might have this:
That uses 70 characters. Notice how they all have the same properties (display:none)? Instead of writing it for each division and class, we can instead list them with commas between and keep just one set of properties, like so:
This only takes up 44 characters! Hopefully all this can help you get those last few characters you need to really make the snazzy page you've always dreamed up!
top of the page
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office. All rights reserved.
Use of this site signifies your acceptance of the Terms and Conditions