HTML and CSS Tips and Tricks

[Zapdos]

Ever wanted a beautiful pet lookup like your Neofriends always have, but you don't know where to start? Want a userloookup that has your own extra personal touch of flare, but you're rusty on your coding?
This thread is here to act as a hub for sharing and learning useful HTML and CSS codes that may otherwise be hard to access conveniently. Clraiks deserve access to beautiful coding all in one spot, so here it is!

This is also a safe space to ask all and any coding questions in relation to Neopets.

TO DO: Make seperate sections for user lookup/gallery/petlookup specific codes, add more resource links

Starter Guides and Resources
Cream of the crop and still-applicable guides, resources and specific code sources.

(you need an account to see links)
(you need an account to see links)
(you need an account to see links)
(you need an account to see links)
(you need an account to see links)

Compiled codes so far

CSS

Please log in to view spoilers.

HTML

Coming soon!


Premade Resource List

Here is a list of recently updated and/or still usable premades!

(you need an account to see links) - Also known as Xaia
(you need an account to see links) - Premades by Cib
(you need an account to see links) - Guild layouts
(you need an account to see links)
(you need an account to see links) - Owner on hiatus
(you need an account to see links)
(you need an account to see links)
(you need an account to see links)


Graphics Resource List
(you need an account to see links)
(you need an account to see links)
(you need an account to see links)

A BIG thank you to contributors!
@(you need an account to see links) @(you need an account to see links) @(you need an account to see links) @(you need an account to see links) @(you need an account to see links)

[Ice]

This sounds like an amazing idea! Whenever I want to implement something in my code I'm always just running to poogle and gripping the ankles of w3 schools like PLEASE I KNOW I'VE VISITED THIS PAGE 500 TIMES IN THE LAST HOUR BUT I NEED TO UNDERSTAND I definitely wouldn't mind helping to contribute, but November is now kind of a super stuffed month for me. So if you're still working on stuff even past this month, count me in! I can't do anything wacky crazy but at the very least I can assist in legwork for basic stuff.

[Aero]

Ooooh I would love to help!

[Flordibel]

Oh, I know how to do navigation anchors!


On the place you want to navigate to, put:

<div id="YourIDhere">The text you want as an anchor</div>

Then, where you want to place the link, put:

<a href="#YourIDhere">Your link text</a>

So if I was writing a paragraph and wanted to talk about my pet's stats in greater detail down the page, I'd do something like:

My pet has great stats! I'll <a href="#stats">detail them farther down the page</a>, but the BD weapons I use to maximize their potential are as follows...

{blah blah blah}

<div id="stats">My</div> stats table for my BD pet looks like this:"

[valora]

I might be able to help! My only coding experience is from Neopets but I can do hover images, all kinds of text boxes, backgrounds, navigations, splash pages etc

[Old but gold]

This is a great idea!

And maybe this is a bit off topic but... i remember ~xaia had some code to change the order of your pets in the userlookup, but i can't seem to find it anymore.
Does anyone have it? :x

[Erik.]

This is a great idea!

And maybe this is a bit off topic but... i remember ~xaia had some code to change the order of your pets in the userlookup, but i can't seem to find it anymore.
Does anyone have it? :x

Oh seconding this! I also once saw a lookup that showed every pet, and didn't have those two stupid pointers/slide thing. If someone knows the code for that that would be even better!

Also, I hope coding won't be too difficult once the conversion is complete... It took me a looong time to figure out how to make my ul look the way I wanted it.

[Peanutface]

I think this is a great idea. I would love a new userlookup. Sites don't really exist with nice ones that are minimal. Help creating one would be great

[Ice]

Oh seconding this! I also once saw a lookup that showed every pet, and didn't have those two stupid pointers/slide thing. If someone knows the code for that that would be even better!

Also, I hope coding won't be too difficult once the conversion is complete... It took me a looong time to figure out how to make my ul look the way I wanted it.

If the user was showing more than 7 pets, I'm pretty positive they just hid the built-in Neopets carousel and then hard coded whatever pets they wanted to show. (Which, technically is against the rules but almost everyone does it these days). If it was 7 or less pets you can still manually code how the pet carousel appears, so if you make the space long enough or the pet boxes small enough all of them can show up without the slider appearing.

[Erik.]

If the user was showing more than 7 pets, I'm pretty positive they just hid the built-in Neopets carousel and then hard coded whatever pets they wanted to show. (Which, technically is against the rules but almost everyone does it these days). If it was 7 or less pets you can still manually code how the pet carousel appears, so if you make the space long enough or the pet boxes small enough all of them can show up without the slider appearing.

It was 7 pets yeah. But where do you find the coding for that?