CALUCKO GALLERY - live preview screenshots!

large desktop preview
small desktop/tablet preview
mobile preview
alternative category style & ability to show quantity for your single-item hoard
all colours are easily customisable at the beginning of the CSS
the image in the corner will do a little bouncybounce ! (check the live preview)
there are two versions of the category links, one that works well for if you have few categories, and one that works better if you have a lot! (check the last preview for the second version)
custom styling to make categories where you hoard One Single Item centered & show off the quantity of it you have. (check the last preview)
optional CSS to change the name of the "None" category to something else!
please note: subeta galleries are affected by a person's customCSS! so it's possible that it may look wonky to you. please do let me know if any part of it looks weird (with screenshots, or your customCSS code) and i'll fix it up!!
please don't use this for your shop, only galleries. i mean i can't stop you but it hides prices and the wishlist search function so it'd be annoying. i would love to make a shop-specific code if there's interest though!!

does it look weird with your category names? do you wish something was adjustable that isn't? please let me know, i'm more than happy to make little fixes to make this more accessible!! also check out my free pet profile codes! and join the group i just made for when i post codes if you like

click for code

[h1]base code - here! you MUST also include category type 1 OR category type 2 below![/h1] (add all extra code right before the "</style>" at the end of the base code) everything else is optional [:

category type 1 (good for short category names, and few categories)

/* categories type 1 start */
-categories .nav{justify-content:space-between!important;}
.nav-item{flex:1 0 auto;width: 33%;}
.nav-link[href]{
background:var(--catbg);
border:0px !important;
margin:0px !important;
padding:0px !important;
border-radius:initial !important;
height:100px;
display: flex;
justify-content: center;
align-items: center;
color:var(--cattext)!important;
font-weight:bold;
}
.nav-link[href]:hover,.nav-link[href]:focus{
background-color:var(--catbghover)!important;
border:0px !important;
margin:0px !important;
}
.nav-link[href].active{
background-color:var(--catbg-active)!important;
border:0px !important;
}
.nav-link[href].active:hover{
background-color:var(--catbghover-active)!important;
border:0px !important;
}

/* categories type 1 end */

category type 2 (good for long category names, and many categories)

remove the "/" before "media"

/* categories type 2 start */
-categories .nav{justify-content:space-between!important;align-content:space-between;gap:5px;}
@/media (min-width: 870px) {-categories{max-height:100px;overflow:auto;}}
.nav-item{flex:1 0 auto;flex-wrap:wrap;}
.nav-link[href]{
background:var(--catbg);
border:0px !important;
margin:0px !important;
padding:10px!important;
border-radius:initial !important;
color:var(--cattext)!important;
font-weight:bold;
}
.nav-link[href]:hover,.nav-link[href]:focus{
background-color:var(--catbghover)!important;
border:0px !important;
margin:0px !important;
}
.nav-link[href].active{
background-color:var(--catbg-active)!important;
border:0px !important;
}
.nav-link[href].active:hover{
background-color:var(--catbghover-active)!important;
border:0px !important;
}

/* categories type 2 end */

add the bouncy pic

you don't need to edit this bit of code - all customisation for this is included at the top of the base code remove the "/" before the word "keyframes" (evil subeta stuff at work there)

/* bouncy pic start */
.container-fluid::after {
content:'';
background:var(--bouncyimg) center;
width:var(--imgwidth);
height:var(--imgheight);
position:fixed;
animation: bounce 2s infinite;
bottom:0;
right:0;
}
@/keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

/* bouncy pic end */

code for your Single Item Hoard

you need to find the item id of your item for this. the easiest way is to look up your item in the item directory - click on the item, then look for "item id". then replace "190912" in the code below with your item's id number!

/* code for showing the quantity for a single item start */
div[data-itemid=190912] ~ .item-qty {
font-size:1rem;
}

/* code for showing the quantity for a single item end */

changing the "None" category's name

change the word "caluckos" in the code below to whatever word(s) you want your "None" category to be named!

/* code to change the name of the "None" category start /
.nav-link[href=/category/None]{
font-size:0px;
}
.nav-link[href*=/category/None]::before{
content:"caluckos"; /* add your new category name here!!! /
font-size:1.4rem;
}
/ code to change the name of the "None" category end */

want to show all item names and/or quantities?

add this for item names: .item-name{font-size:1rem;} add this for quantities: .item-qty{font-size:1rem;}

edits: 25/12/24: it should now be fully compatible with Hongske's customCSS build, let me know if it's not !! i persomally use Sorcerer's customCSS so it should be compatible with that as well 26/12: added/fixed the pagination now [:

pet profiles

rules:

there must be a clear credit link back to my profile
you cannot use my templates to win pet spotlight. if your pet has already won the spotlight, it's fine to use them though! but trophies won't display. (this is because i'd rather be paid for spotlight work, please message me privately if you're interested in a commission or using one of these for a spotlight for a small fee)

STORMY - PREVIEW - CODE HERE - pet profile template one

focuses on pet stats & food/books/job, also includes treasure
colors can be edited at the beginning of the css
if your pet's job name is long, there's a bit at the the beginning of the css you need to uncomment - just remove the /* */ from around it

SWEETIE - PREVIEW - CODE HERE - pet profile template two

minimalist, with four columns: pet info, stats, description, treasure
colors can be edited at the beginning of the css
pet image needs to have a transparent background for best effect (code to replace pet image is included)

SIMPLY - PREVIEW - CODE HERE - pet profile template three

Super minimalist, single column with all default profile info (except pet friends)
colors can be edited at the beginning of the css

if you have any issues or minor edit requests, i'm happy to help (except for anything about spotlight/spotlight trophies, sorry!)

Logged Out

purring's codes - gallery and pet profiles

Labels

Replies