free pet profile templates by Lea (updated 1/10/21)
Labels
Replies
Yea and that's what I thought you'd say. Was worth a try lol
Thank you so much! I hadn't realized I had to re upload the picture, and thanks for fitting the picture better :)
EDIT: I do have a question about sizing profile backrounds tho.. I want to use this layout for my pet Warog too and use a nice volcano backround but how do I get the picture to fit onto my screen like the galaxy? My pictures either tile or are only a small grainy part of the picture. I havn't settled on the volcano pic I want yet but they are all giving me this problem.
Again thank you for all your help!!
Hi again! To get the background image to resize based on your screen, you use what I had added below the image url in my last reply to you - background-size: cover} and add that to the body code. c: This resizes the background to make sure the element in question (in this case, the body of the page) is fully covered.
Oh, they look great so far! I love how you've customized them. 'u' I think Hopechest might be my favorite due to color scheme, but I love all three of them!
These are just gorgeous, thank you for sharing them with us! I'll be using some. <3
Thank you so much for all your help! the next profile I am working on is using your card layout, I am a little stumped as to how to change the circle picture in the first profile, I cant seem to find where to put the picture in the coding.
Thank you so much! Feel free to show me what you end up making, I love seeing the results.
No problem, I'm happy to help! :D
Oh, it's this image in the profile section, it has a class set to it... It shows up like this in the HTML:
First off, thank you for the templates!
I'm having some trouble, and I was wondering if you could advise?
Here's what I'm working with... Cacao
I think part of my problem is, I want the default tab, on page load, to be the pet treasure (treats) section. I tried to re-order, and I think things went wrong. I mean, right now, the credits and pet treasure don't even load. No clue why. I'm not sure when the headers got off center, but I can't seem to get them to realign.
If I started over, is there any code that would at least allow the treasure to be the primary tab? (Even if it's not first in the layout?)
Code
To Come
Eventually
Pet overlay by
Pet art by
Pet art by
Profile template by
Oh, cute profile!
Looks like a z-index issue to me. If you're not familiar with it, z-index is basically what controls which element is the topmost one, and I use it a lot because the way I do anchor links is just by having a bunch of overlapping elements/divs in the same spot. It works buuut any time there's an issue, it kinda ruins everything and can be confusing to fix at times. :'D Anyway, go to where your code says this:
, , , {position: fixed;
top: 200px;
left: 600px;
height: 300px;
width: 400px;
overflow: auto;
background: ;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
z-index: 4}
{z-index: 5}
:target, :target, :target :target{z-index: 6}
and replace it with this: , , , {position: fixed;
top: 200px;
left: 600px;
height: 300px;
width: 400px;
overflow: auto;
background: ;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
z-index: 4}
{z-index: 5}
:target, :target, :target, :target{z-index: 6}
There was a missing comma in the original code that made it so that the z-index of the credits and pet treasure wouldn't get changed when you clicked on the corresponding link, so they were basically stuck being lower in z-index value than the other content boxes, meaning they were hidden beneath them. Making the pet treasure have the highest z-index value by default means that it will be the box that the profile has visible when you open the profile.
When it comes to the tabs being off-center, you can move the div that contains all of them by editing the left positioning of the ' navpos ' div. On the profile now, it's at 635px, but changing that to 620px or thereabouts will get it looking more centered. Hope that helps and isn't too confusing!
Ahhh! Thank you so much! I suspected it was something to do with that code, but I was out of my depth. Thank you for explaining the z-index, it really helped! I ended up fixing the headers by first, correcting the navpos, as you mentioned, but I also had to go in and alter the padding. I was playing around in the console until I got something that looked right, but it helped to know where to go!
The layout is actually for my pet Chocolaterie, just I didn't want to completely destroy her profile in the process. I have a ways to go, but here we're looking: Chocolaterie
If I wanted to make the body/box of the content slightly larger (so I can display a larger view of the TC at once), where would I look for that? I might also play with making the TC items slightly smaller, but that's a task for tomorrow.
Thank you so, so much for the help!
[edit]
Hm. Next question- is there any way to decouple the font style choices between the pet info and the about/credits?
I want to change the color of the "custom nostalgic legeica owner:chocolate" to something lighter, but I still want the about/art/credits to still be legible, so they'd have to remain at the darker color.
{color: ;
text-shadow: 1px 1px rgba(0, 0, 0, 0.25)}
h2{color: ;
text-shadow: 1px 1px rgba(0, 0, 0, 0.15)}
a:link, a:active, a:visited{color: }
a:hover{color: }
I found some colors I liked, but these change the fonts elsewhere as well.
I have a question. I like using your Stripe layout for my pet profiles, yet with one of my pets it doesn't work as well as I hoped. Is there a way to add the pet information, pet image, owner information and such into a tab on that layout?
The pet in question is Tiny Tina. With the picture, I don't have room for any of the information needed on a profile. such as the pet name, species/color, owner, etc.
I tried making the picture smaller to fit the info but I lost quality. So I thought my next best bet was a tab which contained the info, if it's possible.
Thanks in advance for any and all assistance.
| | | |
I am SO sorry for taking so long to reply, I honestly thought I already had but I guess I never actually posted it orz;; Okay, so for adjusting the size... in the code, you'll find this grouping: , , , , {position: fixed;
It has more to it, including height and width values. You can edit those to change the size of the content box.
Also, this isn't something you asked about lol but it's something I noticed looking at your profile -- if you want to make it so the treasure item names display on hover, remove this part: .treasure_item:hover{pointer-events: none}
(If it doesn't bother you to not have the treasure item names visible anywhere, just ignore this haha.)
For changing the colors of just the pet species/color info and owner bits, including the username color, you can add this: .pet_color_info{color: hotpink}
.owner{color: orange}
.owner a:link, .owner a:active, .owner a:visited{color: gold}
.owner a:hover{color: pink}
I definitely see how that's an issue, aw man. So yeah, that should be totally doable, but it will of course take some rearranging of things. If you could send me the code, I can get started on things, although if you're comfortable with altering positioning and so on, I might leave that part up to you? And before continuing I do have to ask, what screen resolution are you using? On my monitor, I can't click the tabs to browse the profile because the image seems to be going over them a little orz;;
I appreciate it. I'm okay on positioning if something is already in place.
I have a 1366 x 768 screen and I noticed on mobile, the picture takes up the entire screen and the profile is blocked, so I'm going to try and make it smaller without losing quality.
the code
Tiny Tina picture courtesy of Iperion LLC/2k Games.com
Background courtesy of Colourlovers.com
Font:
| | | |
Okay, so I have this: click. Is that about what you wanted? It looked like she had no minion and the stats were hidden, so I just removed those. The white square-ish spot is for pet spotlight. I made the pet information stuff the default tab when you go to the profile, but if you wanted to do something else, I can change the code around for that. If you're good with this, though, I'll paste the code in my next reply. c: Just let me know!
Hey, um, I need help and didn't knew where else to post. I'm using your card page profile on Hedgewitch. Is there a way I can put text where it normally says "Pet Friends"? I want to replace it. But I want to keep the "Pet Treasure" text hidden. Sorry I'm new to CSS
Looks great! Just what I wanted. She will have a minion later, I just need to choose one. I'm not sure if it would be difficult to add the code in for it.
Thank you so very much.
| | | |
Hi! I really like that name and design, oh man. Super cool! Unfortunately though, due to the way that pet profiles are set up, it's pretty tricky to put something where the pet friends section is on this particular profile template. x: I really wish that wasn't the case. Sorry!
Awesome! The minion is super easy to add, so I added it real quick for convenience. I'll leave the exact positioning and figuring out how you want things to look up to you, but here you go! You'll just need to fix the font import code since it keeps trying to turn into a user ping when it's posted on forums, haha.
code
Tiny Tina picture courtesy of Iperion LLC/2k Games.com
Background courtesy of Colourlovers.com
Font:
Hi, I'm using the card layout on my pet and not nearly skilled enough at coding to figure out how to do the following things;; If you could help me any I would greatly appreciate it!
This is the pet, if it helps to see it in action: bees
circles into hexagons
I've figured out how to make an image take on a hexagon shape but it's... very convoluted.
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
and
svg{
width:50%;
}
Which obviously works for one image on the main profile. But I don't know how to give it a border (like your circle image has) and I'd love to just have the circle image code but have the shape be a hexagon, as then it could also be used for pet friends.
Another thing is the nav area. I'd love to be able to do two things with this.
The first would be the shape be hexagons instead of circles. (while still making it possible to have at least 6; I have a lot of content planned so if there's an easy way to have more pages that would be great! I may end up going in and changing all the widths as needed regardless if I just need more pages haha. So if changing widths is the easiest way to do this then dw about it, I can do that on my own easily!)
I'd also like to be able to replace the icons images with just text, or maybe images? The text I have in mind are ⬡ and/or ⬣/⬢, but when I try removing the whole i class part of the section where the icon actually is it gets... wonky. I don't understand why/how to change the i class css to prevent this.
So, clearly it's super wrong but it's beyond me as to how to fix/change it. (and the cheat sheet page didn't have hexagons that I saw/anything bee-related)
As an aside I plan to move the like button to a diff page/basically re-purpose the whole stats page, so I was wondering if it's possible to also make the boarder for the heart into a hexagon? I know it's a square with rounded corners so I assume it's something to do with how it's rounded/how many points it's given and may be able to fiddle around until I figure it out on my own figured I'd ask in case it's easy/you know off hand.
Whew, this is a lot, I know. Sorry! I'm happy to pay for your help/commission bits of code if this all goes far beyond average free help for an already free profile. Just let me know!
Either way absolutely no rush and thank you in advance-- both for reading all this tldr and for offering such lovely profiles for free to begin with! ❤
wanted: any pet with a March 22[sup]nd[/sup] 2019 birthday
event clickables
❤ ❤ [egg=shark] ❤ [tp=shark] ❤ ❤ ❤ ❤
Hey! This is a super late reply and.. I am not sure how clear it is, because my computer messed up on me and I lost the post I had been writing first and I am kinda giving up on explaining myself well at this point lol. I'm not super familiar with making shapes using CSS so I have been having to consult Google a lot to try to figure things out, and then I got caught up in IRL.
I have so far discovered that it is possible to do the hexagon thing with pure CSS in a... slightly less confusing way! I'm messing around with it a little and it looks like it'll take some tweaking but making the friends section hexagon-y should be doable: was testing on this otherwise blank pet. :'D The one thing is that it seems like the only way to add a border is by putting the image in a div; basically the way this works is you create the illusion of a border by making the image the same shape as the div it's in, but smaller by whatever thickness you want the border at, and with a bit of positioning so the border is even. That probably sounded really confusing, sorry. xD; The tricky thing is that if you were to want images with different sizes or just different border sizes, you'd have to have different div classes and related image positioning.
Sooo when it comes to the wonky display with the nav area, I am.. not totally sure what exactly is causing the issue at the moment (I'm sure it's something to do with a flaw in how I coded the profile originally but I am not up to trying to figure it out atm xD) but I kind of know how to get around it! What I did with a test was create another i class and replace the FA i class code with that, so that it would be like: and then I added this to the CSS: .texthex{font-style: normal;
font-size: 36px !important;
line-height: 50px;
display: inline-block}
Adding more pages definitely shouldn't be hard; the way I tend to do these profiles is just basically stacking everything on top of each other and I group a lot of things together for ease of editing, so what you'd need to do is basically just create the divs, then add them to some of the groupings. :'D I'm not very good at explaining dsfhfdg; but it shouldn't be a big deal at all.
To change the pet like heart and the circle in the nav menu, you can replace the part of their code (under .icon.heart and .navlink respectively that says border-radius: 50% with: -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
I think that's a quick answer to mostly everything! With redoing the friends section, it would honestly just be easier if you could send me the code for that profile and then I could just edit that and send it back, because I had to make a couple of misc changes and I can't totally remember everything I did anymore, so it might be a thing that takes some tweaking lol
Oh my goodness, this is so much and you explained it so, so well! None of it was confusing at all! Thank you for all the help despite how busy real life and everything else has been for you, I really appreciate it!
Absolutely no rush but here is all the code, I can delete it whenever you're finished (it's unlisted but still). The coding you did on that blank pet's page looks phenomenal! I think I get what you mean about it (that it's less a border and more a larger shape behind the smaller shape) so I'm sure I'll be able to figure it out on my own if I want to tinker with width once the code is in front of me. (But honestly even if I can't it looks fantastic, I doubt I'll even want to change it.)
Again thank you for all this, I didn't mean to make you spend so much time on it but it's all really appreciated!
wanted: any pet with a March 22[sup]nd[/sup] 2019 birthday