|
|
This guide was designed just for you. Whether you have some knowledge of coding already, or you're just starting out, this guide will be fun and easy to follow.
If you're having trouble understanding this guide (or if you just have comments, questions, or feedback), please be sure to neomail me! Just click the link under the section titled My Links to the right.
**Oh yeah, one more thing. I would greatly appreciate it if you would credit this guide somewhere on your lookup. You don't need to use a big button, just a text credit is fine. It would really help me out, and help spread the word about the guide. Thanks so much!
August 11--Ahhh. I'm really sorry for the lack of updates. I've been procrastinating a lot. And I've been on vacation. Sooo. Ya. The one image that wasn't working on this guide is fixed now; sorry for the inconvenience.
July 26--Got all of the messed up codes changed into images. So yay, now you can see everything. I'm happy.
July 25--Um. Most of the guide came back today, after a nearly two month long hiatus. Yay.
Coming soon stuff, along with other notes, will go in this box.
NOTE! -- Please read my FAQ before neomailing me! Thanks!
Make sure you check back often for more features and new sections!
CSS is fairly easy to understand, once you get used to it.
To start your coding, you need to add an opening tag to the very beginning of your coding. When you're done with the coding, you need a closing tag at the very end. The opening and closing tags will look like this:
Now remember, you only need one openening tag and one closing tag in your entire coding. More opening or closing tags just take up precious room that you may need for something else.
Easy enough, huh? Now I'll talk about parts of a lookup and how to remove them.
The largest and oftentimes most annoying part of a default user lookup is the header and footer. These are the big bars at the top and bottom of the page, used now, in place of the old neopets sidebar. (Remember sidebars? Ah, the good old days.)
How do you get rid of them? Use this code:
#header, #footer {
display: none;
}
So. You will put that between your opening style tag and closing style tag. Easy.
hr {
display: none;
}
Now let's think about this. You see what's in between the curly brackets (these: { })? It says display: none. We can combine the code we used to remove the header and footer with the code we're using to remove the horizontal
rules because it says the same thing inside the brackets for both codes. Just separate the names of the pieces you're removing with commas. The result will look like this:
#header, #footer, hr {
display: none;
}
It saves some characters and neatens up your coding. Now who wouldn't want that?
.content div a img, .content div b {
display: none;
}
.contentModule div a img, .contentModule div b {
display: inline;
}
That code is used to get rid of the text that says User Lookup: _________. Yes, I know. Such a long code for such a small change. xD
So, if you're lazy like I often am, you can use this code. Just put it outside (meaning below) your closing style tag.
Wowww, I'm really sorry this code can't be copied and pasted. Soo long...
UPDATE! Now, in the box below this one, you can copy and paste this code. Yayyy.
The above code will give you simple text navigation links to use.
The text in the middle is the only part that will actually show up on your lookup. Like the word "account". But you can change this part if you want it to say something else. Like "MY account", for instance. Heh.
Personally, I think those links are kind of ugly. So how do we spice them up a bit? By adding color and pretty effects of course! Let me explain. xD
Remember:
Whatever is between the style tags will not show up as text on your lookup.
Likewise, whatever is outside the style tags will show up.
a:link, a:active, a:visited {
}
Now you notice there are three names separated by commas in the above code. The first, a:link, will change stuff about how the link itself looks without anything happening to it. The second, a:active, is how the link looks when you've clicked
on it and you're going to a new page. The third, a:visited, is what the link will look like once you've already visited that certain link.
Personally, I like to keep all three of those looking the same. It looks better, and it simplifies things. If you don't want them all the same, just separate them so they all have their own set of curly brackets with stuff inside them.
a:link, a:active, a:visited {
font: 10px tahoma;
color: #00CCFF;
}
Okay, so if you can't tell, that code changes your font to tahoma, the size to 10, and the color to a light blue.
If you noticed, I didn't write out "light blue". Instead I put "#00CCFF". This little bit is called a hex color code. It is a number assigned to a particular color. I usually use hex codes instead of color words (like "light blue" for example) because they are generally shorter. But you may use whichever you'd like. To find a list of hex colors that you can use, just type in "hex color chart" on any search engine. And voila! Colorful! xD
a:link, a:active, a:visited {
font: 10px tahoma;
color: #00CCFF;
background-color: #FFCCFF;
font-weight: bold;
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 2px;
}
Okay, so we've added five extra lines to that code.The first new line is called "background-color". This will give your link a background! Imagine that. :P In this case I've used a light pink hex code. You can change this to any color you want!
The second new line is called "font-weight". We wrote "font-weight: bold" to make the text appear bolded. Another option you can use instead of bold is italic.
The third new line was "text-transform". We changed this to "uppercase", and the words will come out like THIS. Two other options you can use instead of uppercase are "lowercase" and "capitalize". Lowercase will (duh!) make your words lowercased. Capitalize will Capitalize all your links, regardless of whether they were capitalized when you typed them out.
The fourth line of code says "text-decoration". To this we added an underline effect. You can also use "underline overline" which makes the link underlined and has a line on top. In addition, you can use "line-through" to make your links have a line going through the middle of the words.
The fifth and final new line of code says "letter-spacing". This will space out the letters of your words like t h i s. We've done 2px in this example, but you can do any number you like. 1, 5, 10, whatever. You can even do negative numbers!
a:hover {
color: #00CCCC;
text-transform: lowercase;
text-decoration: underline overline;
letter-spacing: 5px;
}
Okay. In the code above, we only have four lines of coding. But we had seven in our other link code! Why? Because whatever we included in the first code, but did not change in the second code will stay the same.We did change the color of the text. It is now a more greenish blue. In the second line of this code, we changed the links from being UPPERCASED to lowercased. In the third line we changed it so a line will be added to the top of our links, in additon to the bottom, when we hover over them. Finally, we changed the letter-spacing from 2 to 5 pixels (px means pixels). So now, our text will spread out even more when we mouse over it.
Simple enough? I think so. Now remember, you can keep whatever you want the same, and you can change whatever you want. Experiment and see what happens!
See that little link at the bottom of this section, that says back to top? Hover your mouse over it. Coool, huh? The cursor turns into an arrow with a question mark! So how do you do that to your links? By using this line of code, in between the curly brackets titled a:hover:
cursor: help;Ooh, that was easy! You're probably wondering, "What if I don't want a stupid question mark?" Well, this should solve your problem:
cursor: crosshair cursor: hand cursor: wait cursor: text cursor: moveThere, now you have lots of choices. I'm not going to take the time and the space to explain what they do, so try them out if you want. xD
This section will help teach you how to make those spiffy rectangular links that all the 1337 lookup makers have on their lookups. Like the ones at the top of this page. Go look.
a.nav:link, a.nav:visited, a.nav:active {
font: 10px verdana;
font-weight: bold;
color: #89d1ff;
text-decoration: none;
letter-spacing: 3px;
text-transform: lowercase;
background-color: #737373;
display: block;
text-align: left;
margin: 4px;
border-right: 10px solid #89D1FF;
}
Wow. Lots of coding there. But it's really easy to understand. It's pretty much like the codes that changed regular text links. This time though, instead of using the code a:link, we used the code a.nav:link. Why? Well, because we are creating
a new class (more on classes later), so we need a new name for it. In this case we called it "nav". Notice how the only difference between "a:link" and "a.nav:link" is the ".nav" part.
Remember this for later, because we will need to come back to it when we actually make the links appear on our lookup!
So what's new? The last four lines of coding.
In the first new line, it says "display: block". What this does is make the links all nice and on top of each other in a neat row, like at the top of this page. Don't remove this line of coding or you'll have a big ugly mess. xD
In the second line, it says "text-align: left". I think this is pretty self explanatory. It means that the text on your links will be placed on the far left. Two other options instead of "left" are right and center.
The third line says "margin: 4px". This part tells the computer how much space above and below each link you want. The higher the number, the more space there will be, and vice versa.
The final line of coding says "border-right: 10px solid #89d1ff". This is that little blue square at the end of each link. You can change four things here: where the border is, how big it is, what style it is, and what color it is. The rest of this section until the next blue line tells you how to customize these borders.
Border-right means that the border will only appear on the right side of your link. You may change this to "border-left", "border-top", or "border-bottom", to make the border appear on the left, top, or bottom, respectively. You can also have multiple borders in different places. You could have a border on the right, a border on the left, and a border on the bottom by adding another couple lines of coding, like so:
border-right: 10px solid #89D1FF; border-left: 10px solid #89D1FF; border-bottom: 2px dashed #FFCCFFThis now lets you have a block of color on the right, a block on the left, and a border on the bottom. You can have borders on 1, 2, 3, or even all 4 sides (and they can all be different colors and sizes!).
If you want the same color and size of border around the whole link, just say "border: _________" to avoid having three unneeded lines of coding.
Now let's talk about the word "solid".
Solid is the type of line that will appear. That's what I've used on my links on this page. But you can choose from many other options including dotted, dashed, and double. These are the most common, and it's fairly easy to understand what they do, but you
can also have ridge, groove, inset, or outset border styles. Try them out and see what they do!
If you wanted a lot of room there, you would type something like "padding: 10px". If you didn't want much room, you could type "padding: 2px". In the example on this page, I didn't include this line of code because it isn't necessary and I didn't want any padding. But play around with it and see what happens!
Actually, this section should be pretty self-explanatory. Everything included in the first code is what you can change with the hover. The best thing is to just play around and experiment with the fonts, colors, borders, etc. and see what you can come up with. But if you're stuck, here's what the hover on my links looks like:
a.nav:hover {
letter-spacing: 8px;
cursor: help;
border-right: 0px solid #000;
}
Notice that these brackets are called "a.nav:hover", which is similar to the regular text links. On those we used "a:hover". With these we just add the ".nav" part. Simple, huh? xD
Then I increased the letter spacing, added a help cursor, and made the border 0px so it won't show up. Cool.
Remember that just like with regular text links, whatever was in the original link properties will not change on hover unless you type in a line to change it.
Do you remember before how I told you to remember how we added .nav to the coding of these links? We will need to take this into account now.
Recall that our plain text navigation links looked like this:
But now, we need to add something to this coding to make these links cool and rectangular, not plain text. So...We need to do this:
Right after "/myaccount.phtml" we added class="nav". This tells the computer to use the coding from how we designed these links instead of the plain text ones. The computer knows this because we named the class with the coding "nav" so it knows right where to go.
Pretty simple, eh?
Just remember to add class="nav" to all the links you want to be rectangular.
The code will look like this:
#main {
background: none;
border: none;
}
body {
background: #FFCCFF;
}
You'll notice we still have the body tag with a line of coding telling what color we want, like we used to do with the old lookups. But with the new ones, they've added something called the main that we needed to get rid of.
We made the main have no background and no border. This gets rid of the ugly white thing that would show up otherwise.
Now, If you want that ugly thing to show up, you can actually make it pretty and make it have a neat border. You can change the background color and borders like we've done before. If you missed the section on borders, go here to read about them now!
#main {
background: none;
border: none;
}
body {
background: #FFCCFF URL('URL OF IMAGE') repeat;
}
Now you'll see we still have a color (#FFCCFF) for our background. This color will appear only while the background is loading. Then, in between the parentheses and the single quote things (these: ' '), I wrote URL OF IMAGE. This is where you will substitute the URL of the image you want as your background.
Next it says repeat. This means that the background image will repeat itself all over the page. You can change this to "no-repeat" which means the image will not tile itself. Or you can change it to "repeat-x" which makes it repeat horizontally across the page. Finally, "repeat-y" will make the image repeat vertically down the page.
This would be the basic code you'd need to change your font:
body, font, td, p, .medText {
font: 14px verdana;
color: #FFCCFF;
}
This code will change the font of all the text on the page. Now, I don't really know why you need all those names separated by commas, but you do. It has to do with making the modules (all those boxes that hold your stats) and the header and footer have the same text as the rest of the page, in addition to some other reasons that don't really concern me. Nor should they concern you. xD
So in that code I just have two lines: One adjusting the font face and size, and another to change the color. Like we did with the links, you can change and manipulate pretty much anything about the font that you want. If you skipped the section, or just forgot everything you read, click here. xD
body, font, td {
font: 14px verdana;
color: #FFCCFF;
}
p, .medText {
font: 12px verdana;
color: #0066FF;
}
Notice that in the above code I have two separate sets of those curly brackets. The first set, named "body, font, td" controlls how the text outside the modules will look. And, can you guess? The other set, named "p, .medText" controlls the font inside the modules. You can manipulate the fonts however
want by adjusting the lines of coding inside the brackets, just like we've done before.
.contentModuleHeader {
}
.contentModuleHeaderAlt {
}
You'll notice that there are two different sets of curly brackets here.
The first set, titled .contentModuleHeader will be used to adjust the look of one header: the one titled "User Info".
The other set of brackets is called .contentModuleHeaderAlt. This is what we'll use to adjust the look of the headings on all the other modules.
.contentModuleHeader, .contentModuleHeaderAlt {
font: 16px century gothic;
font-weight: bold;
color: #BCBCBC;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
background-color: #0066CC;
padding: 5px;
border-top: 3px solid #6699CC;
border-bottom: 2px dotted #99CCFF;
}
.contentModuleHeaderAlt {
font: 12px century gothic;
letter-spacing: 1px;
}
Yes, I know. It looks like a jumble of crazy coding. But it's not! We have learned about everything that's in between those brackets! Yay! It's just a matter of remembering it all and putting everything together.
There is one thing sort of different about this code, though. You'll notice the first set of curly brackets is named ".contentModuleHeader, .contentModuleHeaderAlt". This means that everything in between those brackets will affect the "User Info" header and all the other headers. So in other words, everything in between the brackets will affect every header on the page. xD
But then there's that other set of curly brackets called ".contentModuleHeaderAlt". We've already given those headers some decoration, since we've edited all the headers on the page. But this extra set of brackets will allow us to change some stuff only to those headers without changing what the "User Info" header already looks like. In this case, we've changed these headers to have a smaller font with less letter spacing. Pretty! xD
Good. You didn't skip it. Now when we've used padding before, it has applied to the space all around the text. But, we can make padding on just one side! Or 2 or 3 sides! How to do it? Why, put codes like these in between your curly brackets, of course:
padding-left: 20px; padding-top: 10px;This can come in handy if, for example, your text is left-aligned, and you don't want it to start so close to the edge of the header, but you don't want 20 pixels of space all around it. Like always, experiment and see what you can do!
So this section will talk all about how to make your stats boxes/tables pretty. This is one of the biggest parts of making a spiffy lookup. So hold on to your hats, kids, here we go.
.contentModuleContent {
background-color: #CC66FF;
}
So how easy was that? We changed the background color of our modules.
Now, just like the full page backgrounds, you can have images as backgrounds too! You do it the exact same way. Just add "URL('URL OF IMAGE') repeat;" after your color code.
It doesn't get any simpler than that. Borders on the other hand, are a little more complex and meticulous. Let's take a look at them now.
Yes, I'm aware that those borders look terrible. But this is the easiest way to learn.
So. Can you see the three different colored borders there? There's a dotted orange one, a solid blue one, and a dashed red one. Yes. There are THREE different borders you can change. Let's go through them one-by-one.
First, let's look at the dotted orange one. This, if you can tell, is the border that's the farthest outside. It can be adjusted like so:
.contentModule {
border: 3px dotted #FF9900;
}
Notice that the word that adjusts this furthest-out border is ".contentModule".
Now, let's look at the solid blue border. The following is the code needed to make adjustments to this border:
.contentModuleTable {
border: 5px solid #0099FF;
}
The word that adjusts this border (one that goes around your stats box and the header [like the other one did]) is ".contentModuleTable".
And finally, let's look at the dashed red border. It corresponds with this code:
.contentModuleContent {
border: 3px dashed #FF0000;
}
It's name is ".contentModuleContent" and it's a little special. If you look closely, you'll notice that this border goes around only your stats in the box and not the header of the module. Neat, huh? xD
Oh, and I promised you pictureS, didn't I? Yes, I know there was only one. Well that's all I ended up needing. But if you really like pictures you will enjoy this:
#content {
position: absolute;
top: 10px;
left: 50px;
}
So now we're dealing with something called #content. This, contrary to what I had on the guide before (sorry!), is what changes the position of your stats along with everything that you try to put in above them (like pictures, text, etc.).
You should only use this code to position your stats left and right on the page, not up and down. We'll talk about a different code for that. But going back to the coding...
NOTE: Since the #content tag will move your text and images too, I would reccomend setting "top: __px;" to 0px so that you will be able to put things in the very corner. Also, I would suggest setting the "left: __px;" to 0px as well (but you don't have to). Trust me on this one. xD
#content {
position: absolute;
top: 10px;
left: 50px;
width: 600px;
}
See what we've added? "Width: 600px". This means that all our stats boxes will take up 600 pixels, total, across on our lookup. Of course, you can adjust this number up or down, to suit your tastes.
But it's not quite as easy as that. Those of you with four pets and a neohome, like me, will be unpleasantly surprised to find that this code will bunch up your neohome in a skinny little box, and cause your neopets to have a lot of blank space beneath them. But there is a solution to this! Okay, I admit it's not a very pretty solution, but it's a solution nonetheless. And I find that I use this often, with some of my narrower-graphicked lookups. (What grammar!) So here's the code:
#userneopets img {
height: 115px;
width: 115px;
}
What this code does, if you can't tell, is makes the pictures of all your neopets 115 pixels wide, and 115 pixels tall. You can adjust the number 115 so it looks right on your lookup.
In addition to this code, you may need one like this, to make your trophies smaller too.
#usertrophies img {
height: 60px;
width: 60px;
}
Make sure you play around with the sizes of the trophies as well.
#stats {
position: absolute;
top: 300px;
left: 10px;
}
Now what you need to understand about this is that this will move your stats based on the corner of your #content. If you set your #content to 0px both ways, you don't need to worry about this.
But if you did, think about this: If you set your #content to 20px from the top, and now your #stats to 40px from the top, your stats are going to end up 60px from the top of the page.
Now we're going to make our stats actually appear on our lookup. To do this we will put the following outside our style tags:
Make sure you put this code at the very bottom of all your coding.
#userinfo #usercollections #usershop #userneopets #userneohome #usertrophiesYes, I know. Pretty self-explanatory, huh? But if you notice, above we added img to #userneopets. Why? Because we wanted to modify the actual images, or pictures, instead of the whole stat box itself. This goes for every module on your lookup.
I know you can also have each module have a different colored font. That would look something like this:
#userinfo {
color: #FF0000
}
#usercollections {
color: #FF9922;
}
So the User Info module has a red font, and the User Collections module has an orange font. Neat-o.
#userneohome {
display: none;
}
That will get rid of the box your neohome goes in. Remember, though, you should probably provide a link to whatever you remove somewhere on your page so that people can still get there. xD
Remove modules at your own risk
So...here's the code:
#usershop .contentModuleTable {
position: absolute;
left: 550px;
top: 150px;
width: 190px;
height: 200px;
}
So yup. Just make sure you put the name of the module (learned in this section) in for #usershop. And make sure you leave the .contentModuleTable part.
Now, if you forget what absolute positioning is, go here for a quick refresher. Otherwise you should know what everything in between the curly brackets is.
So let's get going! We'll start with classes
.contentModule {
border: 3px dotted #FF9900;
}
Here, ".contentModule" was the name of our class. Basically all you need to remember about these is that they can be used multiple times on a page.
So like you'll have module borders in more than one place on your lookup (more than one module). Classes are commonly used for things like: font styles, tables, and other things whose properties will be used multiple times.
#usercollections {
color: #FF9922;
}
So, "#usercollections" is the name of our ID. IDs will only be able to used once. In this case, that means we only have one User Collections module. Hopefully... (:
I use IDs a lot in lookup making. Mostly they're used for new areas I want to position on the page. Remember we used an ID when positioning and customizing our #content.
A class has a dot, ., in front of it and is used to define something that will be used multiple times on a lookup.
An ID has a number sign, #, in front of it and is used when the thing will only be used once in your lookup.
#scrollbox {
width: 500px;
height: 100px;
overflow: auto;
font: 14px century gothic;
color: #FF0000;
background-color: #FFCCFF;
}
First of all, we've learned about the bottom three lines of coding already. They are "font", "color", and "background-color". Easy enough, huh? You can customize pretty much anything with your scrollbox. Go to the advanced nav section, or more specifically the borders parts of the guide if you forget what all you can customize.
So now that we got the box looking pretty, let's focus on the size of the box. The first line says "width: 500px". This is pretty self explanatory, and controls how wide your box will be. The next line says "height: 100px" and controls how tall the box will be. Like NO way.
The third line says "overflow: auto". This is what makes your box actually have a scrollbar, instead of just stretching the box out. Neat! :P Now, if you have this line of coding, but don't see a scrollbar, it means that you didn't type enough and your box does not need to scroll. The solution? Type more! xD
Now you're probably thinking "Ewww what an ugly scrollbar!" Okay, well, then you can skip the rest of this section for now and go straight here to learn how to make them pretty. Just make sure you come back! xD
So now we need to learn how to make these things actually appear on our lookup. Remember that codes like these (that make things actually appear on our lookup) will go outside our style tags.
We said "div id" because we're using an ID versus a class. Neat how that makes sense, isn't it? Then we put the name of what we called our ID. Remember that this needs to match what we called it in our coding above. Since we called our scrollbox "scrollboxbox" I said ="scrollbox".
After that goes all the text that you want to have appear inside your box. Then, just like with the style tags, we used a closing tag, slash div.
#scrollbox {
position: absolute;
top: 200px;
left: 50px;
width: 500px;
height: 100px;
overflow: auto;
font: 14px century gothic;
color: #FF0000;
background-color: #FFCCFF;
}
And that positions your scrollbox 200px from the top and 50px from the left. Easy.
And that will conclude the section on creating scrollboxes. Congratulations. (:
We can make these headers look just like our module headers, or we can make them completely different. In addition, we'll be able to create as many different styles of headers as we want. Cool!
.contentModuleHeader, .contentModuleHeaderAlt, h1 {
ALL YOUR CODING HERE
}
Now that's the easy way to go. All you do is add a tiny little bit to what you already have.
(Remember that if your User Info header is different from the rest, you can choose which style you want your other headers to be, and include your h1 text with that particular set of curly brackets.)
Now, like we learned how to make other things actually appear on our lookup, we need to learn how to make these headers show up too. It's very easy to do and will look like this:
How simple! (Don't forget that the above code goes outside your style tags because it's making something actually appear on your lookup!)
You would just add another set of curly brackets and name it h1, like so:
h1 {
font: 12px century gothic;
color: #BCBCBC;
text-align: right;
letter-spacing: 3px;
background-color: #6699CC;
border-bottom: 1px solid #99CCFF;
}
And you would make them appear on your lookup the very same way as shown before. **Don't forget you can customize virtually anything about these headers. Experiment!
h2 {
THIS IS YOUR SECOND HEADER
}
h3 {
THIS WOULD BE YOUR THIRD HEADER
}
So all you do is put different numbers after the 'h', like shown. Remember to take these names into account when actually putting the headers on your lookup.
Like if you wanted to have the second style of header appear somewhere on your lookup and say "header two" and have the third style of header say "header three", you would do this:
Easy as pie. xD
If you want an example of what I mean, go here and look at that little table on the right with the header that says layout. That's what we'll learn how to do. Cool, right?
#tablearea {
position: absolute;
top: 100px;
left: 500px;
width: 200px;
}
All that code does is form an area on our lookup where our table will go. This part is an ID and is called "tablearea". You can call it whatever you want. We absolute positioned it to 100px from the top and 500px from the left. We made it 200px wide, so the tables we put inside it will automatically adjust to be 200px. Cool!
.table {
width: auto;
height: overflow;
font: 12px tahoma;
color: #0000FF;
background-color: #99FFFF;
text-align: left;
padding: 2px;
margin: 0px;
margin-bottom: 20px;
border-top: 2px solid #9933FF;
border-bottom: 4px solid #663399;
}
Okay. Long code. But it's pretty simple to understand. First, remember that this is a class and is called "table".
The FIRST line says "width: auto". This means that our table coding does not have a fixed width. Like I explained before, when we put it inside our "tablearea" it will automatically adjust.
The SECOND line is "height: overflow". This is what will keep our table from scrolling like our scrollboxes did. The table will just keep getting longer the more you type. Cool!
The next FOUR lines, and the bottom TWO are ones that you can customize to your liking. We've already learned what they do and how to use them.
But the lines that say "margin: 0px" and "margin-bottom: 20px" are important. The first line tells the computer that you don't want a gap around your table, like between your table and your header. I'd leave this line alone. The "margin-bottom" line says how much space you want at the bottom of your table, before the next one starts. Adjust this to your liking.
And there you have it! We've customized a table. Now we just need to make it appear on our lookup!
Check out this big code (that you can't copy-paste, grrr):
Ya that's a big code. Pretty easy to understand though. Keep in mind that in order for this to work, you would have had to customize a header. If you haven't done that, go here first.
Okay. So first, we opened our ID by saying div id="tablearea" (and we closed it with slash div at the bottom).
Then we put a header in, like we learned before. Next we opened our class by saying div class="table" (and closed it after our text). Remember that this is the actual part that makes the table. All our text follows this.
Then I just put in another table section with a header, so you can get the idea. You can add as many or few tables as you want.
But now that you're just that much smarter, let's take a look at how to insert and position images. xD
NOTE! In this section, there will be some codes you won't be able to copy and paste. Blame it on the neopets filters. o_o Just make sure you type the code exactly as seen here.
Simple, isn't it?
#image {
position: absolute;
top: 10px;
left: 50px;
}
Yes. We would need to create a new id for the image. Name it whatever you'd like (I named mine "image"), and be sure to experiment with the positioning.
Then, like with tables, we would need to add something like this outside our style tags:
So that was pretty easy, was it not?
If you have more than one image you want to position on your lookup, you would need to create more id's. Make sure that each image has a different name (like "image" and "image2"), because otherwise it won't work.
Well now, instead of text showing up, we want an image to appear. So instead of plain text, we will insert an image code, like so:
Easy enough. xD
But that doesn't mean I think you shouldn't customize your scrollbars. They will show up on internet explorer, of course, and can really add something to your layout.
And look at this coding:
body {
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: #CCCCCC;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #003366;
scrollbar-highlight-color: #006699;
scrollbar-shadow-color: #009999;
scrollbar-darkshadow-color: #006666;
}
So. We've got a picture and some coding. First notice that the name that changes our scrollbars is body. If you have changed the background color on the page already, you can just put this coding in between the body tag we already created.
Now I'll talk about which lines of coding will change which parts of the scrollbar.
We're going to go top-to-bottom down our coding. Each line has "scrollbar-" at the beginning, and "-color" at the end. But I'm just going to call them whatever is inbetween those parts.
Next is track. This is the light gray part on the picture (it's sort of the "background").
Then we have arrow. On the picture, the arrow color is black.
The fourth line is 3dlight. It is the dark blue part of the border, on the leftmost side.
Next is highlight. This is the lighter blue on the picture, further towards the middle.
Sixth we have shadow. This is the border on the other side, but closest to the middle. It is the lighter green.
Finally we have darkshadow. It is the furthest right part of the border and is dark green.
Anyway. Do you wish you knew how to do that on your lookup? Well this section will teach you how! xD
It will also (and this is annoying) make your links this same font. If you want to learn how to make your links be different than this font, see this section.
So how do we change this text anyway? Why, like this:
b {
font: 12px verdana;
font-weight:bold;
color: #006633;
background-color: #669966;
text-transform: uppercase;
letter-spacing: 1px;
}
So basically, you just design another font and name the curly brackets "b". Easy!
Now to make something be bolded on your lookup, you would just enclose it in simple tags, like so:
It doesn't get much simpler. xD
In the code below, we designed our italic font first and our underline font second.
i {
font: 11px arial;
font-weight: normal;
font-style: italic;
color: #FF9900;
}
u {
font: 14px verdana;
font-weight: normal;
letter-spacing: 2px;
color: #FF3300;
}
So we call our italic font "i" and our underline font "u". Makes sense.
And to make some of our text these styles, we'll use the same method as with bold text:
So in addition to your regular font, you now have four different fonts to use. Neat.
This is where you'll learn how to make the bold text in your modules (like the labels for all your information) be different from the links in your modules. If you don't care that they're the same, then ignore this section.
So what's the code?! This:
b {
font: 10px verdana;
color: #339933;
text-transform: uppercase;
font-weight: bold;
}
a, a b, a:link, a:visited {
font: 9px verdana;
font-weight: bold;
color: #00CC00;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #CCFFFF;
}
a b:hover, a:hover {
color: #339933;
text-transform: lowercase;
letter-spacing: 2px;
cursor: help;
background-color: none;
border-bottom: 1px dashed #00CC00;
}
Now...if you've been following this guide section-by-section, you will already have customized everything that's in that code (bold text, links, link hovers). That's fine. This code will make it so those codes still actually work.
All you need to do is change the names of the curly brackets to be what they say in this code.
So you would change "a:link, a:active, a:visited" to "a, a b, a:link, a:visited", and "a:hover" to "a b:hover, a:hover". And you wouldn't need to change "b" at all.
#userneopets img {
filter: alpha(opacity="70");
opacity: .70;
}
So the title of our curly brackets was #userneopets img because we're changing the images in the user neopets module. Simple enough.
Then the first line is what will make our neopets be a little less opaque when viewed in internet explorer. The second line is needed so that the images will look the same in firefox.
So if you want to change the opacity from 70%, like in the example above, make sure you change both 70s to a different number. The number can be anything from 0 (invisible) to 100 (normal-looking).
Here's a screenie of 70%, 50%, and 30% opacity, respectively:
Cool, eh?
In fact, pretty much anything at all on a lookup, like images you insert yourself, can have its opacity changed. All you'll need to do is change the name of the curly brackets.
Mmkay so go check out my unbuyable restock page here. Back? Good. Wasn't that cool how when you roll your mouse over an image, a different picture (the name of the item) showed up instead? Well, in this section, you'll learn how to do that yourself. Neattttt.
So first, look at this image. It's an example from my unbuyable page:
When you make your image (in photoshop, paint shop pro, paint, whatever), make sure you do it like that: pre-rollover on left, post-rollover on right. Technically you don't have to do this, but it'll make things easier for our purposes. xD
#rolly a {
display: block;
height: 80px;
width: 80px;
}
Let's go line-by-line. The first line says "display: block". We used this line when creating advanced nav links. We use it here just so...umm...everything looks right. xD
The next two lines define the width and height of our image. I have 80x80 in this example. But did you notice that the example image was definitely not a square? Well, it is a square when you only look at half of it: either the pre-hover or post-hover half. So the dimensions here are the dimensions not of the image we created, but of how big we're going to want our image to be when it's displayed on our page.
So, these dimensions control how much of our image will show up. Kind of like this:
This is what will make your image actually hover to show the other half of the image:
#rolly a:hover {
background-position: top right;
}
There's only one line of coding inside our curly brackets this time, and it's fairly easy to understand. We are telling the computer which part of the image we want displayed on hover. In this case, we want 80 by 80 pixels of image to be displayed, starting from the top right corner.
Kind of like this:
.a {
background: URL(URL OF IMAGE HERE);
}
We called this set of curly brackets ".a". Notice that this is a class, not an ID. Then, all we did here is put in the URL of our image that we created.
Now, if you want more than one image hover on your page, this is the first step where you will change something (the first two parts of code will always stay the same). What you would change would be the .a part. You would logically change this to .b, right? xD And if you had more, you would use .c, .d, .e, etc.
Here's an example of a .b and a .c:
.b {
background: URL(URL OF SECOND IMAGE HERE);
}
.c {
background: URL(URL OF THIRD IMAGE HERE);
}
Neat. Now we have completely coded everything inside the style tags for three image hovers.
Each image hover will use a code like this:
Mmkay. So remember from the first step, we used the name "#rolly a", and for the hover (in the second step) we used "#rolly a:hover"? Well that's where the word rolly comes into play. We say div id="rolly" (because the # means ID...cool, huh?).
Now is where that letter will come into play. We put a link code in just like for any other link (NOTE: image hovers have to be links in order to work in Internet Explorer), but this time we say class="a" at the end because of the third part of coding we did, where we called the curly brackets ".a" (it's a class, so we used the . and said class=)!
So if you were to code the b and the c like we did above, you would just paste this section of code twice more and change the "a" to a "b" in one and to a "c" in the other.
Finally, we close our link code and our div and we're done!
Let's get going! This section might be a little complicated, but hang in there and neomail me if you're still confused.
So. Once you decided where you want the link to go, you'll need to surround one of the words there (like...the first word at the top of the section you're linking to) with a special tag. It looks like this:
Okay. Got your word surrounded. You can type whatever you want instead of GOHERE, as long as you remember what you typed. Now that was the hard part. On to the actual link itself. It will look something like this:
There's your link. You are going to need to change/~YurbleBurble_26" to either the name of your petpage OR the URL of your lookup, depending on where your link is.
Then, you add a number sign, #, after that URL. Next, you add the word you used in your a name tag. Whatever you typed instead of GOHERE, you will add that after your number sign. And then replace "text on the link" with whatever you want your link to say.
Q: Can this coding be used for petpages?
A: The easy answer is yes. Obviously you won't use codes for things like the header and footer, modules, or module headers. Also, there's no such thing as a #content div on petpages. Pretty much other than that, anything used for lookups can be applied to petpages.
Q: Why is all my coding just showing up as text on my lookup?!
A: Most likely, it's because you either forgot style tags altogether or you didn't close your tag properly.
Q: Why aren't my block links (like in the advanced nav section) showing up as block links? They're just regular text links.
A: You probably forgot to add class="nav to the end of your "a href=" links. See here if you're confused.
Q: Can I get those rectangular links to go side by side, not on top of each other?
A: Yup! Change "display: block;" to "display: inline;". Then, if it doesn't look right, add "width: __px;" and "height: __px" to the code (filling in the number of pixels).
Q: Words like "display" and "margin" aren't allowed in neopets codes anymore! What do I do?
A: There are "new" style tags you need to use. Re-read the Basics section, here.
more questions coming soon
Drag each image to your address bar to see the full-size image. I didn't want to mess up my pretty tables you know. xD
thanks rarity101!
thanks h0use!
thanks wajowarules!
These three spiffy buttons were made by my spiffy friend, Amy.
--------------------------
Haha, this one was made by me. At least it matches the layout.
Sorry, but affiliates are now closed. But if you think your page is really special, still neomail me and I may consider it. Thanks!
Wow. Thank you all so much for the support!
Counter at the bottom was started on September 15, 2007.
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office.
All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions