HTML and CSS Tips and Tricks

[Ice]

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

Most premades these days seem to make use of the carousel I think but in one of my previous userlookups I did stretch out my pet section (I believe I had to yeet the neohome/gallery zone to keep it aligned with the default content size); I can find the code for you later! I personally only have ever done it for 6 pets so 7 might be a stretch just due to what we're working with but I can take a look.

[statter]

Are there any coding guides specifically for galleries and user lookups?

[Aero]

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.

Someone mentioned the expanding the widths thing for your Neopets div, but to get rid of the carousel controls you can do:

.bx-controls {
display: none;
}

[Ice]

@(you need an account to see links)

Ok I trimmed this down during my lunch break - basically what this bit of basic code does is removes your neohome section (if you have one), remove the scroll arrows (as Aero explained), crunch the individual pet units (.bx-wrapper li) in the carousel to 128px to fit in 1 more guy (I tested this with 6 pets and kept going until my first pet repeated fully) and adjust the height of your pet images also to be 128px so that they're back to being square. This assumes exactly 7 pets and your content is still the default UL size (~960px). Hope this helps! Feel free to DM me if something doesn't work because chances are it's pretty janky lol.

<style>
#userneohome, .bx-controls {
display: none;
}
.bx-wrapper li {
margin-right: 10px !important;
width: 128px !important;
}
#userneopets img {
height: 128px;
}
</style>

[Zapdos]

Awesome, thank you so much everyone for your responses and interest! Let's make beautiful coding accessible for all clraiks

I'll start updating the main post ASAP (I'm on leave/just got out of hospital so I have free time yay lol) and format it + add what we have so far!
I'm about to redo some petpages and lookups of mine, so I'll also take snips of coding out of those and throw them up here.

Let's get the ball rolling!

[valora]

HOVER IMAGES
Since floats were already covered I did images that change on hover instead:

<style>
#hello {
width: 400px;
height: 300px;
background: url("originalimageurl");
}
#hello:hover {
width: 400px;
height: 300px;
background: url("hoverimageurl");
}
</style>

<div id="hello"></div>

You just need to check the width/height of your image and put those values in place of the 400px/300px in the style tags.



TEXT BOXES
Not sure about horizontal scrolling, but for vertical you just need to add an overflow property:

<style>
.hello {
width: 500px;
height: 500px;
overflow: auto;
}
</style>

<div class="hello">text goes here</div>

You can also use "overflow: hidden;" to completely stop any scrolling in the div.

Some other useful stuff to add to your divs:
"background: #fff;" -- adds a background colour
"border: 1px solid #fff;" -- adds a border (you can use dashed/dotted/double in place of solid)
"float: left;" and "float: right;" -- makes your div float to the left or right of other text/images/divs
"margin: 10px 20px 30px 40px;" -- moves the box around, the values are for top, right, bottom, left respectively
"border-radius: 10px 20px 30px 40px;" -- gives your div rounded corners, the values are for top-left, top-right, bottom-right, bottom-left respectively, but this has to be outside the style tags like this:

<div class="hello" style="border-radius: 10px 20px 30px 40px;">

BG CODING
You can code a background image either by using the "body" property in the style tags or by creating an image class with a fixed position.

First method:

<style>
body {
background: url("imageurlhere") fixed;
background-color: #fff;
background-repeat: no-repeat;
}
</style>

You can remove "fixed" if you want the image to scroll with the page and also remove "background-repeat: no-repeat;" if you want a repeating image, like if you're using a seamless pattern.

Second method:

<style>
.bg {
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: auto;
}
</style>

<img src="imageurlhere" class="bg" style="position: fixed;">

(I think I found this on /~Xaia a while back)
This makes a 100% width fixed background image. You can also set the height to 100% if you want to stretch it to make sure it always fills the page, and of course change the values to whatever % you want.



NAVIGATION ANCHORS
These are pretty straightforward, you can basically designate certain points on the page (i.e. different sections) or parts of the text and link to them from anywhere, like from a navigation bar:

Here is <a href="#one">section one</a> of my page.

<a name="one"></a>Section one goes here.

Will add something for splash pages and nav bars later when I'm more awake

[Zapdos]

HOVER IMAGES
Since floats were already covered I did images that change on hover instead:

<style>
#hello {
width: 400px;
height: 300px;
background: url("originalimageurl");
}
#hello:hover {
width: 400px;
height: 300px;
background: url("hoverimageurl");
}
</style>

<div id="hello"></div>

You just need to check the width/height of your image and put those values in place of the 400px/300px in the style tags.



TEXT BOXES
Not sure about horizontal scrolling, but for vertical you just need to add an overflow property:

<style>
.hello {
width: 500px;
height: 500px;
overflow: auto;
}
</style>

<div class="hello">text goes here</div>

You can also use "overflow: hidden;" to completely stop any scrolling in the div.

Some other useful stuff to add to your divs:
"background: #fff;" -- adds a background colour
"border: 1px solid #fff;" -- adds a border (you can use dashed/dotted/double in place of solid)
"float: left;" and "float: right;" -- makes your div float to the left or right of other text/images/divs
"margin: 10px 20px 30px 40px;" -- moves the box around, the values are for top, right, bottom, left respectively
"border-radius: 10px 20px 30px 40px;" -- gives your div rounded corners, the values are for top-left, top-right, bottom-right, bottom-left respectively, but this has to be outside the style tags like this:

<div class="hello" style="border-radius: 10px 20px 30px 40px;">

BG CODING
You can code a background image either by using the "body" property in the style tags or by creating an image class with a fixed position.

First method:

<style>
body {
background: url("imageurlhere") fixed;
background-color: #fff;
background-repeat: no-repeat;
}
</style>

You can remove "fixed" if you want the image to scroll with the page and also remove "background-repeat: no-repeat;" if you want a repeating image, like if you're using a seamless pattern.

Second method:

<style>
.bg {
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: auto;
}
</style>

<img src="imageurlhere" class="bg" style="position: fixed;">

(I think I found this on /~Xaia a while back)
This makes a 100% width fixed background image. You can also set the height to 100% if you want to stretch it to make sure it always fills the page, and of course change the values to whatever % you want.



NAVIGATION ANCHORS
These are pretty straightforward, you can basically designate certain points on the page (i.e. different sections) or parts of the text and link to them from anywhere, like from a navigation bar:

Here is <a href="#one">section one</a> of my page.

<a name="one"></a>Section one goes here.

Will add something for splash pages and nav bars later when I'm more awake

You're amazing Valora! I'll add these to the front page ASAP!

[Zapdos]

Finally formatted the post and added codes, thanks heaps to everyone that has contributed so far! I think this is going to turn into a really awesome resource, but unsurprising as Clraiks only deal in awesome
Let's keep going!

Like what has already been occurring, I'd like to open this thread up to CSS/HTML questions as well as having the front resource page. Hopefully we can all help each other achieve coding greatness!

[Ice]

Are there any coding guides specifically for galleries and user lookups?

Was there something in particular you wanted to do? I haven't seen a lot of pre-made gallery coding (not that I've been looking much) but there are tons of pre-made/customizable lookup codes out there, depending on what you're looking for!

On that note @(you need an account to see links) should we also compile all the popular on-site pre-made graphics petpages? Not sure if that's been done before or if it's something we want to list here (on ck or otherwise).

[Zapdos]

Was there something in particular you wanted to do? I haven't seen a lot of pre-made gallery coding (not that I've been looking much) but there are tons of pre-made/customizable lookup codes out there, depending on what you're looking for!

On that note @(you need an account to see links) should we also compile all the popular on-site pre-made graphics petpages? Not sure if that's been done before or if it's something we want to list here (on ck or otherwise).

I think that's a great idea! I think we should also add a link to the basic starter guides too, as the coding we have might be closer to novice level.
A curated and updated list of active premade sites would be fantastic, let's do it! I'll start scouring as well.