glass // free customizable pet profile templates
Replies
Trying this out for [pet not found] I don't know how to change TC section to have a certain number of items across, is there a way to set it to 5 in each row instead of 7? also i wanted to put the credits in the pet friend section instead, i don't think I'll ever be adding friends
Just popping in to say a huge THANK YOU for these beautiful free pet profile codes. I am super excited to try these for some of my pets! :D
<p>― Peter S. Beagle, The Last Unicorn
I made a version that shows stats!
I got stats to work in a sidebar if y&;all&;re still interested! Took me over an hour and so much googling but I GOT STATS TO WORK!!!!!</p>
<p>Click here if you would like to see it in action to see if it&;s what you want: abc12321cba</p>
<p>It required editing a couple different blocks of code that applied to different divs, so I&;ve copied and pasted an uncustomized version of the edited v1 code with stats here. If you want to use it for a different version, I&;ve added comments so you might be able to find the differences by searching for "stats" in the code.</p>
<p>Edit: IMPORTANT: To get background colors to work, you have to remove the space between the @ and the "import" where i put "/* REMOVE THE SPACE AFTER THE @ WHEN YOU COPY AND PASTE */" near the top. Thanks for the bug catch Lyn!</p>
<p><details>
<summary>code under spoiler</summary>
<!--CSS GOES HERE, BETWEEN THE STYLE TAGS --></p>
<style>
/* CODE (C) HELIX @ SUBETA 2020 */
/* DO NOT DISTRIBUTE, SELL, OR CLAIM THIS CODE AS YOUR OWN */
@ import url(&;https://fonts.googleapis.com/css?family=Sen&display=swap&;);
/* REMOVE THE SPACE AFTER THE @ WHEN YOU COPY AND PASTE */
/* add/remove sections */
/* , .pet_spotlight, , , , h2 {
display: none;
} */
/* change background image/color */
body, html {
background-color: lightgray;
background-image: url("");
}
/* change accent color */
a, a:link, a:hover, a:active, a:visited, i, b, u {
color: ;
}
/* ADVANCED (removed pet_stats from here) */
, , , , , h2, .pet_wco_info_date, .owner img {
display: none;
}
body {
font-size: 12px!important;
text-transform: lowercase;
color: !important;
font-family: &;Sen&;, sans-serif;
}
{
top: 0;
left: 0;
margin: 0 auto!important;
width: 600px;
}
{
border-radius: 30px;
margin-left: auto!important;
margin-right: auto!important;
margin-top: 30px!important;
border: 15px solid ;
}
{
/* change glass pane */
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 4px 8px 0 rgba(0, 0.5, 0.7, 0.2), 0 6px 20px 0 rgba(0, 0.5, 0.7, 0.19);
/* stop here */
top: -30px!important;
height: auto!important;
overflow:visible; /*this makes the stats sidebar visible*/
margin-bottom: 25px!important;
border-radius: 20px;
}
/*added pet_stats at the top (styles it)*/
, , , {
padding: 20px;
margin: 20px auto !important;
background-color: ;
border: 1px solid ;
border-radius: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.2), 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.19);
}
{
width: 97%!important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-color: ;
border: 1px solid ;
border-radius: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.2), 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.19);
}
/* this moves pet_stats to the side and styles the outside pane */
{
position:absolute!important;
top:25px;
left:600px;
background-color: rgba(255, 255, 255, 0.65);
border: 0px solid ;
border-radius: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.2), 0 1px 2px 0 rgba(0, 0.5, 0.7, 0.19);
}
.pet_spotlight, {
background-color: ;
position: absolute!important;
border-radius: 10px;
left: 420px;
top: 140px;
height: 170px;
font-size: 10px!important;
text-transform: uppercase;
margin: 0!important;
/* 03/21/20 FIXES */
padding-top: 25px!important;
padding-bottom: 25px!important;
width: 100px;
}
{
left: 50px!important;
}
.pet_spotlight img, img {
border: 10px solid ;
border-radius: 5px;
margin: 10px 0 10px 0;
}
{
text-align: justify;
text-transform: none !important;
}
.pet_name {
color: !important;
font-family: &;Sen&;, sans-serif;
letter-spacing: 3px;
font-size: 25px;
text-transform: uppercase;
}
h2 {
color: !important;
letter-spacing: 3px;
font-size: 15px;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
}
{
z-index: 99!important;
position: fixed!important;
bottom: 20px;
left: 20px;
font-size: 13px!important;
padding: 20px;
margin: 20px auto !important;
background-color: ;
border: 1px solid ;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0.5, 0.7, 0.2), 0 6px 20px 0 rgba(0, 0.5, 0.7, 0.19);
}
{
padding-left: 23px!important;
}
.treasure_item {
z-index: 98!important;
margin: 3px 4px;
width: 63px;
}
.treasure_item img {
border-radius: 5px;
opacity: 0.9;
}
.friend_div {
margin: 8px 9px!important;
}
/* 03/19/2020 FIXES */
.spoiler_click {
background-color: silver;
text-align: center;
border-radius: 5px;
}
.spoiler_text {
border: none;
}
.new-news-announcement-banner {
display: none;
}
/* 03/21/2020 FIXES */
.pet_spotlight, {
padding-left: 10px;
padding-right: 10px;
}
.pet_spotlight img, img {
width: 60px;
}
/* 03/26/20 FIXES */
.pet_spotlight { left: 422px!important; }
{ padding-left: 28px!important; }
.pet_spotlight, { top: 125px!important; }
</style>
<!-- CREDITS GO HERE -->
<div id="cred">
CREDITS<br/><br/>
profile template (c) (<a href="https://subeta.net/forums.php/read/909303">get it</a>)<br/>
stats edit by , background/other credits go here<br/></div> <!-- idk if this is ok but I did do a lot of testing for pet_stats lol -->
<!-- PET STORY GOES HERE; YOU CAN CHANGE THE TITLE BY REPLACING "INFORMATION" -->
<h2>INFORMATION</h2>
pet story goes here
</details>
this is such a lovely layout, definitely using it for all of my pets! thank you so much !!!!
[center][IMG]http://i.imgur.com/ZKraizm.png[/IMG]
Love the super clean layout, thank you for sharing!
I just returned from an hiatus and never really had a mind for design, even though I can code decently once I have one xD Vryce I ended up doing a 'Ship of Theseus' on the CSS, and I still have most of the colours and links to style, but I love how it looks! :D
People are free to nosy at the stats and headers btw (I noticed some questions about them), though since I've torn the code apart I'm not sure looking at it will help any...
Battle Guides and Stuff
The Official Battle Guide v3.3 Comprehensive Guide to Battle Opponents (v2) Guide to Stat Boosters - The Guide to Mod Crystals - [WIP]> Free Starter Sets <
Event Actions
- [egg=Kalkatak] - [tp=Kalkatak]
hi, i wanted to drop you a line and thank you SO much for not only the wonderful profiles, but also your crystal clear explanations of how to make edits. I have always been a bit wary of the pet profiles because i never really thought i would "get" coding, but your examples have made me curious and i've made my own changes to two of my babies that i feel immensely proud of.
if you'd like to take a look: Aryssius and Americana
i'm not sure how often you're on, but i just had to tell you how grateful i am! ❤️
browse my spare lifelike dolls
| [egg=sebyashka] | [TP=sebyashka]
|
| [egg=sebyashka] | [TP=sebyashka] |
Thank you so much for these amazing profile templates! I love them, and I'm using them for all my pets :)
You are loved. :) [egg=TheTreeOfLife945] [tp=TheTreeOfLife945] Can bite for: All 2021 & 2022 strains, Batnip, Befowled, Boobitis, Caterkiller, Clamorous, Crack Head, Creeping, Death Roe, Grosseries, Ikupox, Jolly Rotter, Metalmorphosis, Threadful, Transmewtation, Virus
Thank you so much for the awesome pet profile that includes the pet's stats which is especially sweet for battle pets. Just finally got a round to actually doing this for Kuuipo! Thanks again for your diligence!
Forum Art by
Signature Art by
hi, I just put the floating profile on Gelato but theres a black line on the right hand side, do you know how to get rid of it? I couldn't figure it out!
I don't see a black line?
SPOILER (click to toggle)
maybe it's something with Firefox then, on my pc and phone I see the line so could just be the browser. Never mind! Gelato looks adorable hehe :) thank you!
I'm sorry if this has been answered before and I missed it on my read through..., Is there a way to fit 8 items per line instead of 7 on the treasure chest? I've used your template on Lumineve but his TC needs adjusting.
/* change background image/color */
body, html {background-image: url(https://images.unsplash.com/photo-1493761107459-7042ff2d13b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2023&q=80);
background-size: cover;
background-attachment: fixed;
I've been having issues with this background code... for some reason it's not actually loading in the image and just defaulting to a gray background on Gylfie. Does anyone have any insight on this? I tried it with the url in quotes too but that doesn't fix anything either. I even tried swapping in the background code from a template that I know works, but still nothing. It's all very confusing to me because the code looks sound to me. I saw that some people were saying to make sure the @ import don't have a space between each other, but I've always had them joined so that's not causing the issues.
Also has anyone done a modded form that moves the column to the right or left, rather than absolute center? I'm wondering how much tinkering it would take to move the elements around haha
The image url you're using has like..formatting built into it, so that could be the problem. Try just this inside the url( ): https://images.unsplash.com/photo-1493761107459-7042ff2d13b5
I've used the url with the formatting in other profile templates just fine (Jillion, Samsara, Regress, etc), but I tried that edit earlier actually! It doesn't change anything oof
Hi, I'm having the same issue as Tribe in regards to the code for the fixed background image. No link I use appears to work. I have tried using different images from Unsplash, different hosting site urls, etc., and nothing appears. The code seems simple and pretty sound, so is this an issue from Subeta's end?
events
🌷 🌷 🎃 🎃
I just wanted to say thank you so much for these! They're so pretty!
body {
background-image: url(your url here);
background-size: cover;
background-attachment: fixed;
}
This is what I ended up using. I'm not sure why it works compared to the base code, but it did the trick!
body {
background-image: url(your url here);
background-size: cover;
background-attachment: fixed;
}
</p><p>This is what I ended up using. I&;m not sure why it works compared to the base code, but it did the trick!
This doesn't work either. I've tried with and without quotations. :T
events
🌷 🌷 🎃 🎃
Ooooh that is weird. Is all the other code straight from the template? From what I see, the template is working, but your background is blank...
Try removing the background image coding and running the profile through without it. Then refresh the edit desc page and put it back in? I've had that help when I was tinkering with profiles.