glass // free customizable pet profile templates

Replies

Aug 27, 2020 5 years ago

is a SUPER USER!!!

oh wow, thank you for the help! I definitely must have lost track of how many

elements I was using.

I'll just go ahead and change the google doc to include the snowflakes. After I posted this and went to bed I was laying there like "why didn't I just include that bit? I'm gonna confuse someone" lol

The snowflakes code is sort of hard to read through, I did NOT code it myself (maybe in a couple DECADES ill have a big enough galaxy brain to wrap my head around CSS animation) but I changed a lot of things (obviously they aren't snowflakes anymore, and I altered the direction of the "fall" to actually cascade upwards)

here's what I was able to figure out though for myself:

I changed the z-index / layer the snowflakes are on to "2" so it goes behind the "credits" box which is on z-index like... 99 , or something. the sidebar picture is on layer 1 because I want the snowflakes to go in front of it. All of that looks good, works, etc, but I can't get the main elements of the page to go in front of the snowflakes no matter how hard I try. I tried adding the respective page elements to z-index 99, 98, etc, it just doesn't work at all. I'm not sure why it's not behaving the same as my credit box.

here is the link again to my google doc, this time containing the code in its full snowflakey glory. I hope you or someone can figure it out

Aug 28, 2020 5 years ago

is magical

Okay, this was a fun problem! Basically the issue is that you're trying to layer a child element (the snowflakes) underneath their parent element (the pet description box, where all your CSS is). The only way you can achieve this is by using negative z-index values. Since the (cloud background image) has a default z-index of 0, you have to assign basically your entire page to different negative values.

Here's what you need to add/change: body { position: relative; z-index: -5; } .pic { z-index: -4; } /* Already has position: fixed; elsewhere / .snowflake { z-index: -3; } / Same deal here */

I started counting up from -5, but really you could use -3, -2, and -1, as long as they're in the right order. Also, if you plan on just pasting this in instead of finding the places where you're already applying styles on these elements, make sure you add it at the very end of your last <style> tag. Otherwise it won't override the existing z-indexes. Oh, and it can't override "!important", so really you should just go edit my changes into your existing code...

I applied your theme (replacing your images with some random ones I had on imgur) to my pet's profile so you can see it in action: [user not found] Hope that makes sense! I need to stop working on these late at night, haha. Let me know if anything doesn't work for you :)

Looking for birthdays: Feb 21/2025, April 8/2013, Sept 3/2017 [url=https://subeta.net/wishlists.php/252073/200623]Moro WL[/URL] | [URL=https://subeta.net/user_shops.php/shop/44293]Moro Trading[/URL] [url=https://subeta.net/wishlists.php/252073/235055]Lifelike Dolls WL[/URL] | [URL=https://subeta.net/user_shops.php/shop/11369/category/Lifelike+Dolls]Extra Dolls[/URL]

Aug 28, 2020 5 years ago

is a SUPER USER!!!

OH wow thank you so so much! Im a total beginner at this sort of stuff so I would have never thought of that!! Thank you, I'll go implement this in my own code.

Aug 28, 2020 5 years ago

is magical

I had to google it too, to be honest! I never realize that was the only way to make it work.

I remember when I joined Subeta, it was like a distant goal to learn enough HTML/CSS to work on profiles, and now that I code professionally I don't make time to customize my own pets lol. I love solving small issues like this, though!

Aug 31, 2020 5 years ago

is ZOMBIE LONG TIME

Biig thanks! Yes the extra

was the problem.

Holiday Things

Sep 8, 2020 5 years ago

likes the classics

- What a beautiful profile model! I loved everyone!!! >u<

pixel art by sigulary

~ ♡ ~ I invite you to join my game: > Reply with a GIF <

Nov 13, 2020 5 years ago

Go home

you're drunk

Thank you for providing us with this awesome free pet profile. I've done two so far. 18 more to go and also put in miscellaneous information. Thank you!!!

Thank you! Your friend helix will enjoy a full month of Gold Account benefits starting today! Just a little token of my appreciation!!

Forum Art by
Signature Art by

Nov 15, 2020 5 years ago

has a strong pet

@ anyone else that may be able to help

hi there! like most I’d be remiss if I didn’t thank you profusely for providing such a gorgeous clean template for us all to fiddle with. i’m getting some great use out of it!

Rhymer

Alone

i just have a couple questions about some edits i havent been able to find/figure out myself, if anyone can let me know if it’s possible or they’ve found out how, I’d greatly appreciate the help!

1. Change heading titles for sections

ie. changing “pet treasure” to say “tortured scribblings”, “pet friends” to say “enemies” etc. 2. Centered pet friend(s)
i saw the post for centering a single pet friend, but couldn’t see any for multiple

any help would be so appreciated, thanks again!

Nov 27, 2020 5 years ago

is magical

Thanks for the profile! I was using one before, but it's been awhile. :)

I have v1 Original with a fixed background. See my pet [pet not found]. I have several questions, if you don't mind. Thanks!

Is there a way to make the glass border the same around all the sections? Right now the pet description is slightly less than the story, and the treasure and friends don't have the glass border at all. Also, can the credits have the glass border too, without enlarging?
Is it possible to make all the sections (except the top pet description and the credits) shorter and scroll individually?

Could I please use your code for the stars and moons snowflakes? I love them. I will of course give you credit.

I read the solution for glori, but I just don't understand where to put the snowflake code or your fix code... please help?

[Kiss=Chrysariel] Wishlist Come check out my shop! =<^.^>= Always willing to haggle if the price is right. : Looking for and

Dec 6, 2020 5 years ago

is a SUPER USER!!!

Uh, so I'm using one of your templates and the background is blurry. Is there any thing I can do to fix that????

The pet is

Argentus if you need to see for yourself.

[tot=PiplupMagby34]

Dec 17, 2020 5 years ago

is a beast

Thank you so much for these beautiful templates! I've used one for

Beitris that I am going to keep customizing, and I'll probably use them for some others too! <3

Wishlist <3 Style-File <3

Dec 19, 2020 5 years ago

is a Time Lord

McGann's profile looks great! Thanks!

Dec 23, 2020 5 years ago

is ballin

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!!!!!

Click here if you would like to see it in action to see if it's what you want:

abc12321cba

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.

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!

code under spoiler


<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


profile template (c)  (get it)

edited by , other credits go here
 

INFORMATION
pet story goes here

[tot=oceane]! | lmk if I skip you! last.fm | style file | extra lifelike dolls (thread)

Dec 23, 2020 5 years ago

has seen too much

YAY. Thank you. This is great. :)

. . . Someone told me I have two faults. I don't listen and . . . some other stuff they were rattling on about.

Dec 23, 2020 5 years ago

One, Two

is coming for you...

Thank you! I really like this profile, but missed not having pet stats one them. A little thank you coming your way. :)

I can't get the background color to change? I don't know anything about coding, but I would get it to change on the no stats version.

Welcome to
the Karma Cafe.
There are no menus.
You will get served
what you deserve.

[flower=Lyn] art by

Dec 24, 2020 5 years ago

is ballin

ooooh yeah i can see that

Baby Shark doesn't have a background color. That's weird. Try removing the space between the @ and the "import" where i put "/* REMOVE THE SPACE AFTER THE @ WHEN YOU COPY AND PASTE */" near the top. That fixed the problem in the profile I just tested it in! Lmk if it works! And thank you for the items, I really appreciate it! :)

[tot=oceane]! | lmk if I skip you! last.fm | style file | extra lifelike dolls (thread)

Dec 24, 2020 5 years ago

One, Two

is coming for you...

That worked! Thank you so much and your very welcome. :) Happy Holidays!

Welcome to
the Karma Cafe.
There are no menus.
You will get served
what you deserve.

[flower=Lyn] art by

Dec 27, 2020 5 years ago

This rift empty

YEET

Hi ! Thank you for the wonderful profiles, they're gorgeous! I have a question that i'm hoping anyone could help me with; I'm using V.3 and for the life of me can't change the background from white to my preferred image. Here's what the code looks like:

body, html { background-image: url("https://i.redd.it/urv3pm8md0d51.jpg"); background-size: cover; background-attachment: fixed; }

What am I doing wrong? No matter how I try to vary it, all I get is a white background. Help!

Jan 16, 2021 5 years ago

Go home

you're drunk

Thank you, I am using your template for all my pet's profiles. Is there a way to show their stats? Thank you.

Forum Art by
Signature Art by

Mar 26, 2021 4 years ago

✨

Thank you so much for this profile! It's perfect! One question, is there anyway to anchor an image (like pet art) to the side? ;u; Ty so much either way!

"We're reaching levels of stupidity that shouldn't be possible."

Logged Out

glass // free customizable pet profile templates

Replies

INFORMATION