Virtupets CSS Helper
Introduction
CSS for certain things in Virtupets is a little different from OG, meaning premade layouts or your old layouts may not work properly without a little editing. This guide can help you navigate setting up your customization.
Hex Values
Many codes on this page include hex values that look like #FFFFFF or similar. This is where you define your color value.Hex values consist of numbers 0 - 9 and letters A - F. With 0 meaning no intensity, and F meaning full intensity. The first two letters specify the red value, the middle two numbers specify the green value, and the last two set the blue value.
#RRGGBB
Play around with the values to find a color you like! Alternatively, use an art program to color pick any color you want! The color change widget should have the hex value ready to copy & paste.General
These codes can be used on any customizable page!Change Body (Grey) Background
| Image | Color | Image + Color |
|---|---|---|
body {
background-image: url(IMAGE_URL);
}
|
body {
background-color: #FFFFFF;
}
|
body {
background-image: url(IMAGE_URL);
background-color: #FFFFFF;
}
|
Change Wrapper (White) Background
| Image | Color | Image + Color |
|---|---|---|
.wrapper {
background-image: url(IMAGE_URL);
}
|
.wrapper {
background-color: #FFFFFF;
}
|
.wrapper {
background-image: url(IMAGE_URL);
color: #FFFFFF;
}
|
Gradient Backgrounds
| Body | Wrapper |
|---|---|
body { background-image: linear-gradient(#FF0000, #00FF00, #0000FF); }
|
.wrapper { background-image: linear-gradient(#FF0000, #00FF00, #0000FF); }
|
Big thanks to Baysee for this addition.
Remove White from Bottom of the Sidebar
If you put a background in the 'white' area of a page, the sidebar can cut it off. This will remove that cut off and show your background behind the sidebar.
User Lookup
Shield Overlay
Partial Shield Overlay
This overlay uses a slightly shorter image overlay that still shows the age of the account while giving you a custom shield. Use the template above to make the shield you want, or use it on its own.
Userlookup Pet Overlay
NOTE: Replace YOURPET with the name of your pet, lowercase, and if it has spaces turn them into an underscore!
Pet/shield overlay code written by Felix!
Larger pet images
| Default | Overlay |
|---|---|
this code replaces the one above |
Large images code written by Baysee!
Pet Lookup
Pet Overlay
| Petpet Overlay | Petpet+P3 |
|---|---|
|
|
|
Pet overlay code written by Felix!
Statistics Box
| BG Color | BG Image | Font Color |
|---|---|---|
|
|
|
|
Treasure
| BG Color | Header Color | Font Color |
|---|---|---|
|
|
|
|
Stat/treasure code written by Baysee.
Shop/Gallery
| Shopkeeper Overlay | Gallerykeeper Overlay |
|---|---|
|
|
|
| Remove black border on Gallery Items | Remove Qty: # below Gallery Items |
|---|---|
.item-image img {border: 0}
|
div.item-name span.sf {display: none}
|
Item code written by Felix!
Overlay Rules
'Overlays' refer to the act of replacing images with other images through CSS as a means of further customization. While this is absolutely allowed on virtupets, it should not be used to trick others. Here are some guidelines:
| Do | Don't |
|---|---|
|
|
Plus, if there is an issue a mod will ask you to change it. You will not be iced for it. Have fun and be creative!
Visit Goat's Visual Guide.