HTML and CSS Tips and Tricks

[valora]

Glad I could help! If there's any other requests for petpage coding I can probably help out -- I'm terrible at pet/user lookups though

Edit: Also, (you need an account to see links) is a really nice directory for coding stuff and premades but I'm not sure if it's up-to-date

[Ice]

I forgot I did this for someone else a bit ago - here's a base snippet of code for replacing the "mail/neofriend/trades etc." icons on your userlookup.

<style>
#userinfo .medText img {
visibility: hidden;
}
#userinfo table tr td table tr td.medText table tr td.medText a {
width: 60px;
height: 60px;
background: url("URL FOR IMAGE HERE");
display: inline-block;
margin-bottom: 5px;
}
</style>

Notes:
-the first line also makes your SHIELD disappear
-the same image will be repeated for each icon
-change width/height to whatever you want to fit the dimensions of your chosen image! (but obviously if you try to use too big images, it'll stretch things out)
-if you want different images for each icon, I'm pretty sure you need to make "one long image" with the correct spacing between the icons so that you're essentially inserting one long image in the back that peeks through and the code is probably slightly different. I've just been too lazy to play with that yet.

[Zapdos]

I forgot I did this for someone else a bit ago - here's a base snippet of code for replacing the "mail/neofriend/trades etc." icons on your userlookup.



Notes:
-the first line also makes your SHIELD disappear
-the same image will be repeated for each icon
-change width/height to whatever you want to fit the dimensions of your chosen image! (but obviously if you try to use too big images, it'll stretch things out)
-if you want different images for each icon, I'm pretty sure you need to make "one long image" with the correct spacing between the icons so that you're essentially inserting one long image in the back that peeks through and the code is probably slightly different. I've just been too lazy to play with that yet.

Awesome, thank you! Added to the main post


12/11/20 update:

Added some resources/guides, plus some premade links. I will continue to compile these on my work breaks!

[Aero]

@(you need an account to see links)

The formatting looks super clean! Thanks for putting this all together :')

[valora]

Finally got around to writing something out for splash pages~

SPLASH PAGES
My method for splash pages is basically just to make 100% width and 100% height container divs which either have the "overflow: hidden;" or "overflow: auto;" property to determine if they will scroll or not, and using anchors to link between them.

<style>
body {
overflow: hidden;
}
.contain {
width: 100%;
height: 100%;
margin-top: 0px;
}
.section {
width: 100%;
height: 100%;
margin-top: 0px;
overflow: auto;
}
</style>

<div class="contain"><a name="intro"></a>
<center><a href="#next">Click to continue.</a></center>
</div>

<div class="section"><a name="next"></a>
<center>This is the next section.<br><a href="#intro">Click to go back.</a></center>
</div>

(This probably isn't the most streamlined way to do it, but it works! It also allows you to have infinite scrolling or non-scrolling sections within a single petpage)
The "contain" div class is set up so it won't scroll, and the "section" div class will scroll. So for example you could have a click-through introduction with a few "contain" divs and then a "section" div at the end where you would have your regular petpage content.

If you want to link to different sections within the page (i.e. having multiple "pages" on the same petpage, like an application for a pet where you might want to have separate "application" and "character" pages) I find it best to set up two divs within the first container with 50% width so they're spaced out evenly for all resolutions.

<style>
body {
overflow: hidden;
}
.contain {
width: 100%;
height: 100%;
margin-top: 0px;
}
.section {
width: 100%;
height: 100%;
margin-top: 0px;
overflow: auto;
}
.one {
width: 50%;
height: 100%;
float: left;
left: 0;
background: #c9f0eb;
}
.two {
width: 50%;
height: 100%;
float: right;
right: 0;
background: #dbc9f0;
}
</style>

<div class="contain"><a name="intro"></a>

<div class="one">
<center><a href="#one">Go to section one.</a></center>
</div>

<div class="two">
<center><a href="#two">Go to section two.</a></center>
</div>

</div>

<div class="section"><a name="one"></a>
<center>This is section one.<br><a href="#intro">Click to go back.</a></center>
</div>

<div class="section"><a name="two"></a>
<center>This is section two.<br><a href="#intro">Click to go back.</a></center>
</div>

(I just added background colours to show the two divs more clearly)
It might also look like there's a white space at the top, but that only shows in the preview.

[Worlds]

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 oh I know this!

So /~Xaia used to have a link to a coding troubleshooting guide, but the owner removed the link for some reason. The guide is still up though, at /~Ziys.

This is how to make one particular pet appear first or last (all credits to Mexxy of Whitespace!). You can't control the exact order of your pet with this code, but if you just want a particular pet to be the first pet on your lookup, it works pretty well.

Please log in to view spoilers.

Quoting from /~Ziys:

Change the order of your pets!

If you're picky like me and want one pet to always be first or last, add the following code before your closing /style tag.

#bxlist {
margin-left: -170px;

(Adjust the number depending on your layout.)

}

Also from /~Ziys, here's how to display 6+ pets at once. Spoilering so my post doesn't get too long;

Please log in to view spoilers.

---------- Post added at 10:21 AM ---------- Previous post was at 09:48 AM ----------

To add, here are some of my favorite resources:

Premades

• /~Tines (Silent Serenity) - Surprised this hasn't been mentioned yet; it's pretty much the go-to for everyone and their mom (tons of options for lookups, petpages, galleries etc.).

• /~Niwi (Floral) - I think these are the prettiest premades on Neopets, shame the owner's on indefinite hiatus but the codes still work (for now).

• /~Coltonn (Coast) - Super clean and minimalist CSS; sister site of /~Xaia I think?

• /~Fiziwhig (Jinx) - Pretty cute and clean pages, but can look a bit tiny on big screens (*insert Ken Jeong squinting gif*).

Resources

• /~Instinctus (Aurum Resources) - High quality PNGs, images etc. I'm still heartbroken that Aurum / Aroma got closed down due to code theft.

• /~Ventria (Mariposa) - Lots of high-quality Neopets / non-Neopets backgrounds.

• /~maillouh (Details) - High-quality Neopets renders (some broken images), also lots of abstract / patterned backgrounds.

• /~Teamug (Page Decor) - More high-quality PNG renders, mostly floats / sides / backgrounds.

• /~Aboa (Confectionery) - Cute pixel adoptables.

• /~essentsia - Neopets adoptables!

[Old but gold]

Thank you so much! ♥

[Zapdos]

Oh oh I know this!

So /~Xaia used to have a link to a coding troubleshooting guide, but the owner removed the link for some reason. The guide is still up though, at /~Ziys.



---------- Post added at 10:21 AM ---------- Previous post was at 09:48 AM ----------

To add, here are some of my favorite resources:

Premades

• /~Tines (Silent Serenity) - Surprised this hasn't been mentioned yet; it's pretty much the go-to for everyone and their mom (tons of options for lookups, petpages, galleries etc.).

• /~Niwi (Floral) - I think these are the prettiest premades on Neopets, shame the owner's on indefinite hiatus but the codes still work (for now).

• /~Coltonn (Coast) - Super clean and minimalist CSS; sister site of /~Xaia I think?

• /~Fiziwhig (Jinx) - Pretty cute and clean pages, but can look a bit tiny on big screens (*insert Ken Jeong squinting gif*).

Resources

• /~Instinctus (Aurum Resources) - High quality PNGs, images etc. I'm still heartbroken that Aurum / Aroma got closed down due to code theft.

• /~Ventria (Mariposa) - Lots of high-quality Neopets / non-Neopets backgrounds.

• /~maillouh (Details) - High-quality Neopets renders (some broken images), also lots of abstract / patterned backgrounds.

• /~Teamug (Page Decor) - More high-quality PNG renders, mostly floats / sides / backgrounds.

• /~Aboa (Confectionery) - Cute pixel adoptables.

• /~essentsia - Neopets adoptables!

Thank you for this fantastic contribution! Added to the main post Looking nice and chonky now

Re: adoptables, I might leave adoptable resources off for now as they are a bit tangenty, however I would love it if we had an adoptable directory thread *hint hint nudge nudge*

UPDATE 14/11/20

[Rylai]

Hi! I'm a total noob at coding but I think I can contribute by linking to some resources for premades that still work, other than the ones already mentioned! For each of the premades I linked below, I have checked the codes at random to make sure that they still work.

~Suhffer - Not updated anymore but the code for userlookups still works. Linked credit for personal use is not required.

~kyta - "Ahaha how are u so small" might be a pretty useful resource for those who want to keep their bio/stats/trophies separate. Out of the 3 UL premades on her page, think it's the only one that's compatible with 4, 5, 6, & 7 pets.

~CSS - Pretty average user lookups. Some have hidden trophies until you mouseover, if you're into that.

~odinorth - Variety of different user lookups, mix of anchored and scrolling. Some of them allow you to keep your bio/stats/trophies/pets separate. Last updated in 2019.

[Zapdos]

Hi! I'm a total noob at coding but I think I can contribute by linking to some resources for premades that still work, other than the ones already mentioned! For each of the premades I linked below, I have checked the codes at random to make sure that they still work.

~Suhffer - Not updated anymore but the code for userlookups still works. Linked credit for personal use is not required.

~kyta - "Ahaha how are u so small" might be a pretty useful resource for those who want to keep their bio/stats/trophies separate. Out of the 3 UL premades on her page, think it's the only one that's compatible with 4, 5, 6, & 7 pets.

~CSS - Pretty average user lookups. Some have hidden trophies until you mouseover, if you're into that.

~odinorth - Variety of different user lookups, mix of anchored and scrolling. Some of them allow you to keep your bio/stats/trophies/pets separate. Last updated in 2019.

Thank you! Added the updated ones to the main page

17/11/20 - Small Update