User look-up customization help board!

[~Xandria]

Hello everyone. ^^ I know that this thread would be of great help to me (and hopefully some other members) who want to learn HTML and CSS coding, etc. I happen to be very new to the subject. I only know the very basics, such as; changing font colors and sizes, bold, italics, and underlining and probably a few other things I picked up from my myspace days and that was many many years ago. :P

 

I have no idea how people create those certain backgrounds or images of faeries and the like. Do people actually make those on there own?! I know they must because I've seen people use there own words that are crafted perfectly into there images. It's really crazy how good some of you guys are. That seems like quite a task but if that's what it takes I'm all for it. How would a beginner go about making beautiful images, fonts, and writing words on the images? what programs would be required?

 

I also have no idea how to create my own links. Like I've seen how some people have links to different things on the top of there pages and they all just flow with the page perfectly. It's like they created there very own website. Gosh, I know I sound like such a noob. Any advice or websites would be greatly appreciated!

 

Please feel free to offer your tips about how you learned, websites that helped you learn, and perhaps about how long it took you to learn. I tried teaching myself a couple weeks ago, but automatically got frustrated because it seems I'm just not grasping the concept. Then again; the websites I've looked at don't seem to be all that helpful.

 

I see that most of the long-term members have beautiful look-up pages and it is probably one of my biggest goals as of right now. I'm so tired of my user-look up looking so bland and un-orignal.I want something that stands out! Haha. ^^

[Ashbash]

I think that neopets actually has a really nice guide to html for neopets, especially for those just starting out. Here is the link if interested:

 

http://www.neopets.com/help/html1.phtml

[dummydumpty]

Some people use pre-made lookup by SunnyNeo, or other layouts made by other users like Sparkle, then modify the codes by their own. This is another good way to learn in my opinion.

 

A lot of people make guides for HTML and CSS (google "Neopets HTML guide" or "Neopets CSS guide"). One guide that looks good is this CSS guide (I referred to it when hiding certain elements). Lots of websites off Neopets exist to help you learn, but Neopets filter certain elements, so you can't do fancy CSS3 animation for example.

 

For graphics, Photoshop is the way to go. Otherwise, go with GIMP. There's so many tutorials out there, so you'll have to google keywords like "Scanline effects photoshop" if you want to know how to do that.

 

Personally, I can't give an approximate how long it took me to learn HTML and CSS, since I've spent my teenage years making websites (I started 10 years ago). Plus, there's always new stuff with HTML and CSS, making it even more fun. I prefer to use NotePad when coding, but some people might use a software like Dreamweaver. To preview, I tend to use jsFiddle, where I save every layout on my dashboard. How long it takes to make an userlook up depends on your creativity (I don't know what to do with mine, so it's still in a default state) and how experienced you are.

 

Edit: I recently discovered this directory. It's no longer updated, but there's a lot of links for guides. I hope this help too!

[Zombiiesque]

I love the Soroptimist directory! There's a wealth of links for almost anything Neo-related, including all kinds of tutorials.

[~Xandria]

Some people use pre-made lookup by SunnyNeo, or other layouts made by other users like Sparkle, then modify the codes by their own. This is another good way to learn in my opinion.

 

A lot of people make guides for HTML and CSS (google "Neopets HTML guide" or "Neopets CSS guide"). One guide that looks good is this CSS guide (I referred to it when hiding certain elements). Lots of websites off Neopets exist to help you learn, but Neopets filter certain elements, so you can't do fancy CSS3 animation for example.

 

For graphics, Photoshop is the way to go. Otherwise, go with GIMP. There's so many tutorials out there, so you'll have to google keywords like "Scanline effects photoshop" if you want to know how to do that.

 

Personally, I can't give an approximate how long it took me to learn HTML and CSS, since I've spent my teenage years making websites (I started 10 years ago). Plus, there's always new stuff with HTML and CSS, making it even more fun. I prefer to use NotePad when coding, but some people might use a software like Dreamweaver. To preview, I tend to use jsFiddle, where I save every layout on my dashboard. How long it takes to make an userlook up depends on your creativity (I don't know what to do with mine, so it's still in a default state) and how experienced you are.

 

Edit: I recently discovered this directory. It's no longer updated, but there's a lot of links for guides. I hope this help too!

 

That was really very helpful, thanks so much! Right now I'm using a pre-made; you're right - it does seem like the easiest way to learn all about the coding. I am trying to tweak it to suit my tastes but I'm unsure of how to "center" my game trophies and change the size of the font there. Right now it's verging to the left and it looks off-balance to me b/c I'm so OCD. Haha.

 

I love the Soroptimist directory! There's a wealth of links for almost anything Neo-related, including all kinds of tutorials.

 

I will have to check that out. Thank you!!!

[dummydumpty]

To have your trophies centered correctly, add in the <style>...</style> (CSS) part:

 

#usertrophies .contentModuleTable {
width: 800px;
}

 

The #usertrophies part will expand the "box" of your trophies (which will influence the other parts of your page). It is set to 800px, but try a different width to see if it fits better. This won't work for every layout, but I think it should be fine for yours.

 

To change the font size, ctrl+F "body". You'll find this:

 

body, .medText, td {
font: 9pt verdana;
line-height: 12pt;
color: #535353;
}

 

Change the "font: 9pt verdana" to whatever size you want. There's different units you can use (em, %), but you can stick to pt.

 

Edit: Oops, I just read that you wanted to change the font in the trophies section. In that case:

 

#usertrophies .contentModuleTable td {
font-size: 8pt; }

 

Replace 8pt by another size.

[~Xandria]

To have your trophies centered correctly, add in the <style>...</style> (CSS) part:

 

#usertrophies .contentModuleTable {
width: 800px;
}

 

The #usertrophies part will expand the "box" of your trophies (which will influence the other parts of your page). It is set to 800px, but try a different width to see if it fits better. This won't work for every layout, but I think it should be fine for yours.

 

To change the font size, ctrl+F "body". You'll find this:

 

body, .medText, td {
font: 9pt verdana;
line-height: 12pt;
color: #535353;
}

 

Change the "font: 9pt verdana" to whatever size you want. There's different units you can use (em, %), but you can stick to pt.

 

Edit: Oops, I just read that you wanted to change the font in the trophies section. In that case:

 

#usertrophies .contentModuleTable td {
font-size: 8pt; }

 

Replace 8pt by another size.

 

Sorry I am just now getting back to you, but thank you for that. I tried putting in the code to center my trophies but I have no idea where to put it. :sad01_anim:

I don't see anything on the coding that says 'trophies'? Sorry, I'm so new at this. :mellow:

[dummydumpty]

When you edit your profile, you'll see a section (within the codes) that says:

 

<style>
(all your CSS)
</style>

 

Or something similar. Basically, anything that's within <style> and </style> is your CSS, which defines styling (technically speaking, it's not required, but it makes everything much more efficient when making layouts). If the #usertrophies part are not there, then you need to add them within your <style> part.

 

For example, my profile's source is:

 

<style>
#habitarium img {
background-image: url("http://i46.tinypic.com/2dsk5n4.jpg");
height: 116px;
width: 190px;
display: block;
}
</style>

Some text here, bla bla bla...

 

So if I want to further style the page with the coding I've provided earlier, it will look like this:

 

<style>
#habitarium img {
background-image: url("http://i46.tinypic.com/2dsk5n4.jpg");
height: 116px;
width: 190px;
display: block;
}

#usertrophies .contentModuleTable {
width: 800px;
}

#usertrophies .contentModuleTable td {
font-size: 8pt; }
</style>

Some text here, bla bla bla...

 

It won't work properly on my default page, but that's how it should be done.