Bess's Personal Page
all things Bess, all the time

Hello there. I'm Bess. From time to time I like to imagine that random people on Neopets want to read stuff about me... I suppose since you're here, at least one person wants to know stuff about me, so that's nice. The sections are ordered by interest; if you've been directed here, either via my userlookup or through neomail, then the section of most interest to you is probably the F.A.Q. right below.

Well... erm... happy travels? Yes, happy travels. I'm sure reading this page is enjoyable.

Frequently Asked ?s

If I tend to sound unnecessarily mean or rant-y here, then I apologize - I'm a pretty nice person, really. It just gets kind of tiresome responding to the same types of neomails. That doesn't mean "don't take me seriously", though. If I say something like "don't do this" then DON'T DO IT.

Can you make me a layout?

If I am accepting requests for personal layouts, I will make it extremely clear on this page. Otherwise, NO, I do not have the time to make you a personal layout, sorry.

Can I use your coding to make my own layout?

That depends on what coding you're talking about. If you mean one of the CSS premade userlookups or petpages on this page, then yes, of course. Copy that coding and edit it to your heart's content (just don't remove the credit).

If you mean a personal layout of mine (that is, my userlookup or my site's layout, basically anything not offered to you in a nice text box), then no. I generally spend a great deal of time on my personal layouts, making them extra-special and unique, and because of this I don't want anyone copying and editing them for themselves. Even if you leave credit, that is not okay. Obviously I can't stop you from examining the source code, or taking little snippets of coding and reworking them in your own way, but do not make copies of entire layouts.

Can I examine your coding for educational purposes?

Sure! Looking at other people's coding is the easiest way to learn, so go right ahead. I'd prefer that you do your examining with my premades, however. See above question.

I have a coding question/issue! Can you help me?

I'll certainly try! Don't hesitate to neomail me about it, please. In fact, the tutorials section below addresses some of the common questions I get. Eventually I suppose I'll move all that stuff into my coding guide... but for now it's just easier to answer coding questions here.

What program(s) do you use for your layouts?

Adobe Photoshop CS3. The pen tool is my best friend (go here for a wonderful tutorial). That's for all the image stuff - I do all my coding in the little Neopets code boxes that they provide for you, saving changes and testing things every so often, because you never know with these filters.

Can I be your Neofriend?

Not unless I've actually made friends with you - or at least talked to you a little bit. Not that it actually matters a whole lot; when it comes right down to it, it doesn't actually make a whole lot of difference...

Are any of your pets up for trade or adoption?

Nope, not a single one, not even the unpainted ones, no matter what you're offering.

Site Portal

Hey, look at my sites! aren't they pretty?

Well, the first one is, anyway. My premades site is currently up and running (although some content is still missing). My coding guide is, well... a mess. A complete mess. It's unfinished, to begin with, and then I haven't updated it since the filters changed because, quite frankly, my own page layout coding scares me. But some people have inexplicably found it helpful, so there's your link.

That right up there is the single most helpful page in all Neopia. Seriously. If you need anything that my two sites don't offer (actually, if you need premades or a coding guide) go to Soroptimist and I promise you you will find what you're looking for.

Tutorials

Here are some quick, commonly requested coding tutorials for you guys. (Or links to already written ones. XD)

Moving userlookup modules around

Some of you have been wondering how to move userlookup modules around. The answer to that is pretty simple, actually. If you look in the source code for a userlookup, you can see that TNT has helpfully labeled each module with ids. This means that you can control them in the CSS portion of your userlookup code. The labels are as follows (and I'm sure you can tell which label goes to which module):

#userinfo, #usercollections, #usershop, #userneopets, #userneohome, #usertrophies, #habitarium, #ncmall

To do the actual moving, now that you know what the labels are, the code you should use in the CSS portion of your userlookup code should look something like the following:

Change #userinfo to whichever module you want to move, and fiddle with the numbers until you get your module wherever you want it.

Replacing #userinfo images

I was going to write my own tutorial here buuuut... this one has already been written and I don't think I could have possibly written it better. XD So check that one out.

Making a Scrolling Box

Have some content that's taking up a lot of space? Wanna learn how to make a neat little scrolling box to fit it in - such as the neat little scrolling box that's housing this tutorial? Well, here's how! The code for it is below:

Change 100 to the numbers that you want; they determine the size of your box. You can add other styles, too, like a background, a border, etc. Anyway... there you go.

Image Rollover Navigation

So I'm going to assume you know basic coding, and how to make regular links, and how to make block links. (You don't? Well, I suppose you can check that out here, but oh my goodness I need to clean that page up...)

ANYway, let's just explore, for the moment, the idea of making links block elements by adding the line display: block; to your CSS. Adding display: block; allows you to do lots of really cool things, including making the link the size you want it to be.

Now, if we just remove the "Link" text inside the box we've made...

Voila! A pretty link block. Isn't it wonderful? Now, we've already determined that we can set the background color of a link... but how 'bout we set a background image? You could set one background image for the regular link, and then another for the hover part, like so.

However, I personally prefer to make one compound image that can be moved around on hover to achieve the same effect. The benefits of a compound image are that you don't have to wait for the second to image to load when you hover (so there's no awkward blank space if your computer is slow), and it saves coding space when you do lots of image rollover links (I'll show you that in a mo').

So, to make this compound image, first determine the height and width of the first image. Then, double the width of the document and paste the second image (which should be the same size as the first image) right next to the first image. So, say my first image was a smiley face with a blue background, and my second image was the same smiley face with a pink background, and they were both 40px by 40px. I would make the compound image 40px tall and 80px wide and put the two next to each other, like this:

Then use that image in the following code:

And the result should resemble this:

Now, say you have a bunch of rollover links as part of a set. Even though there's something unifying about all of them (they all match your layout), you need a different compound image for each one. It wastes coding space to copy out that entire code however many times you need it; first you need to do some simplifying. The HTML for, say, three rollover links should look like this:

You can give all the links within the blocklinks div the characteristics that all the links share, using #blocklinks a and #blocklinks a:hover in the CSS. Then, you can give each individual link its own characteristics - in this case, background image - using #first, #second, etc. Observe:

That coding should get you something that looks like this:

And that's all there is to it. Keep in mind that you can do lots of other things with rollover links, those are just the basics. You can add margins, make them appear next to each other instead of on top of each other (float: left;), position them (absolutely position the div #blocklinks and all the links will fall into place), etc.

You can also align the links with a background image, so that when you hover over a link it turns transparent (you have to give it a background image that's literally a transparent pixel repeating over and over) and reveals the "hover" image underneath. Just keep playing with the basic code until you get what you want.

Making things appear on hover

What I've noticed over the years is that, on Neopets, coding "tricks" go in and out of fashion. For instance, right now, the whole "page within a page" type of layout is extremely popular. (You can find a nice guide for that here.) Anyway, one of the bandwagons I jumped on back in the day was making things appear on hover; you know, when you hover over a button or something and something - an image, maybe - appears over on the side. Like this:

The applications of this technique are endless, and vary depending on exactly what you want to display, what you want the hover item to be (an image? text?) and how you want it to flow with the rest of your content (block? inline?). I'm only going to tell you how to achieve that gray, blue and green thing up above, though, because it's relatively simple and universal, and because I try to make my tutorials more about "code theory" than strictly copy-and-paste codes. You learn by doing and understanding yourself. =)

Annoying, preachy viewpoints aside, here's how you go about achieving the "hover" effect. Let's start off with the HTML. In this example, we'll make a "container" div (creatively ID'ed #hover_container) for the code, so we can control it's positioning. Since the line position: relative; can't be put in the CSS section because of the irritating filters, we'll add it in the HTML.

Within this container, we need to make a containing link (also creatively titled: #container_link). Why? Well, in several browsers, hover effects are only recognized in terms of links, so links have to be involved somehow; also, to make links hover-able, they need to link to somewhere, even if it's an imaginary letter like "x". There's only one containing link in this particular example, but if you were making multiple hover-button things you would make several containing links, one for each... hover-button thing. (There should be a better name for what we're doing, but oh, well.)

Finally, within each containing link, you need two things: the "button" and the element that appears when you hover over this "button." For simplicity's sake, we'll make both of these elements divs, titled #visible_button and #appearing_element. These have to be absolutely positioned, so we'll add that in the HTML.

Okay, now to work with the CSS. Firstly, we'll do all the basic position-y and appearance stuff. We'll give #hover_container a gray background and definitive dimensions, and then we'll give #visible_button and #appearing_element colors and definitive dimensions of their own, as well as the absolute positioning values.

That code right there should give you the following:

Now for the appear-on-hover part. Remember how I said the container link was only useful for hover effects? Now let's add those. To specify that we're just talking about this particular link (as opposed to every link on the page), instead of using a in the CSS, we'll use a#container_link. And to specify that we're not talking about the container link as a whole, but an element within it (the appearing element) we'll make the full CSS tag a#container_link #appearing_element. So the code you should add to the CSS you already have is the following:

BUT WAIT! If you add just that, all it will accomplish is removing the appearing element from sight. How do we make it appear on hover? Well, take that superlong tag we've already derived (#container_link #appearing_element) and add an additional code. Specify that now you're talking about when the link is hovered over by changing the tag to a#container_link:hover #appearing_element.

So both link codes together should look like this:

And the full combined code should look like this:

Giving you this:

Wonderful, eh? Now you can fiddle around with that, adding more container links, absolutely positioning all the elements, etc., etc.

About Bess

Bess is narcissistic, yet she never enjoys writing "about me" sections.

Actually, she really really really enjoys writing extremely self-conscious and actually-on-purpose cute/awkward "about me" sections. And apparently she enjoys writing in the third person.

She loves making layouts. Have you seen her premades? She won the 332nd ULS, donchaknow. She also enjoys writing and making the occasional comic (to see her Neopian Times entries search "seegensays"), and earning various trophies for her userlookup, even though she really isn't very good at it.

She pretty much never ignores neomails (even if the questions asked are already addressed in the nice little F.A.Q. up above), so send them her way.

Credits

Layout by Chromatic.

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2011.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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