free pet profile templates by Lea (updated 1/10/21)
Labels
Replies
Last update: 1/22/23 In the process of updating broken links, as textuploader is down! However I don't know that I have all the original code anymore, so this is a bit of a WIP. :(
a few general notes
- I like to have my pet treasure item names on display without hover due to frequent issues with wonky hovers. I separated the code used to make the treasure display like that for easy removal.
- I also like using little gradient lines to break up the profile. You can use as many as you like within the content boxes using the div class 'hr'... which means to simply insert this code wherever you would like another gradient line.
- My code has a number of comments for organization purposes. Anything written /* like this */ can be safely removed, as long as you remove everything, including both the beginning and the ending asterisk and slash. - In the colors sections for my profiles with visible stats, you'll see something like this:
ul li:nth-child(1), ul li:nth-child(7){color: } ul li:nth-child(2), ul li:nth-child(6){color: } ul li:nth-child(3), ul li:nth-child(5){color: } ul li:nth-child(4){color: }This is what I use for the gradient effect on pet stats. What I do is I select a different color from the base font color and I blend them together on Photoshop. The first line of this would be 25% new color/75% main font color, the second 50% new color, third 75%, and fourth 100%. Here is a link to an online color mixer that will let you do the same, if you don't have Photoshop or a similar program. To achieve the same gradient effect, use your main font color as your first color and the new font color as your second, put in 3 midpoints, and copypaste them in order. Of course, you can erase all of the above stat color code if you'd prefer!
- Blank box in left column is for spotlight (both pets have spotlight turned off.)
- Links in the left column can be removed and reordered as wanted; the column resizes automatically depending on how many buttons there are. I made it possible to include up to five sections (in addition to the pet treasure) and more can be added if needed.
- Minion text (where it says 'companion' on Amithi's profile and 'familiar' on Ralis's profile) can of course be replaced with whatever word you'd like, or removed entirely; I just included it to take up space where I'd removed the '___ has a minion!' text.
- The pet friend section is custom because I find that easier to work with. You can add as many as you want.
code link (stats visible), code link (stats hidden)
notes
- It you want to remove the credit on the left column and place credit elsewhere, absolutely feel free! It can certainly be redundant if you have a credits box. - In this code, I used a box-shadow in place of a border for the main content boxes. While the 'border-color' in the leftcolumn div is pretty self-explanatory, it may be less obvious that box-shadow: 0 0 0 1px , is the CSS snippet for the border around the content boxes. if you're at all curious, the reason i did this was because the border for the content columns was used to create a margin around the content, because it drives me crazy when the scrollbars aren't contained within the content box and this is the best way i know how to fix that ahaha ;;
- For the text and box shadows, I used an RGBA value to add a black shadow with low opacity, due to some text having a different background color. RGBA values allow you to adjust the opacity as well as the color. If you'd like to use a different color, here is a handy hex to RGBA converter that lets you select opacity before the conversion!
- Content boxes have set sizes as minimum and maximum. You should be able to alter these sizes without issue if you want.
- If for some reason you need to add more content box sections, it's doable! You'll just need to add some things. In every section that says:
, , , , ,you'll need to add a comma and '#BOXNAMEWHATEVER' after the . This includes adding a comma and '#BOXNAMEWHATEVER:target' to the bits that feature the :target, :target, etc. code; this is essential to the anchor links! You'll also need to add a corresponding 'BOXNAMEWHATEVER' div. - If you'd like to have different background colors for the different content boxes, you can separate out the background colors -- so where it says
, , , , , {background: ; box-shadow: 0 0 0 1px ,you could remove the 'background' and then add new code snippets like:{background: } {background: } {background: } etc... to have varied background colors for the different content boxes. Same goes for all the colors in the layout, really! I made things uniform because that's my preference, but on some pets it may look nice to have more of a rainbow. -'h1' font is what I used for the mini-header sort of thing on Amithi's profile; 'h2' is for the way I do my character information basics like the nickname, age, gender, etc; and 'h3' is what I used to enlarge the name in the pet friend section (I also made 'h3' the same color as the bold font, though these can be separated.) None of these are necessary to use! I just like to have a few enlarged font options.
notes
- This profile has the web font code for the name included (though it uses a different font than I ended up using for my second example pet). It also has the code for a background included.- When the pet like icon is clicked, it will turn into a transparent version of whatever color is set for it (I usually set .icon.heart and .icon.heart.red to the same color). The opacity can be adjusted by searching for .icon.heart.red{opacity: and editing the number value.
- It also has an extraneous div that needed to be included so that the tabs wouldn't be awkwardly floating when the page is first loaded. I added a sized-up text emoji on Rua's profile to make it less empty; on Caquex's, I'm using a gif. While I made it so that all of the divs resize automatically up to a maximum of 600px, it's important to keep the 'col2' div smaller than the others, otherwise it will be visible underneath the smaller divs when they're selected. That might sound confusing but really all you need to know is to mostly ignore that div, outside of adding a small image or a text emoji if you'd like to avoid it being empty, and focus on the ones that I have placeholder text in!
- The friend section doesn't have set heights. If the text for a pet friend isn't long enough and it's making it display weird, make sure that there's a "clear" for floating images:
- Changing the hex color here changes the color for the border on the tabs as well as the main columns:, , , , , , , , , {box-shadow: 0 0 0 1px }- stripe1 is the name of the larger background stripe; stripe2 is the smaller one. - This profile is designed for pets with relatively short names; longer ones will overlap with the pet color info and owner. To fix this, you will need to change the position, like this user did: image showing what needs to be changed.
notes
- Layout was made to have five links in the main navigation, but more can be added if you really want. You may need to edit things a bit to make the text fit though. If you'd like to add another (or if you just want to remove one), find the small menu link font & width section. By default, each navigation item has a width of 20%, because 100 divided into 5 is 20. You can edit that number, but if you stick with using a percentage, you'll want to be sure that the percentages add up to 100%! So for example, if you want to remove the friends section, you can go ahead and remove the link in the navigation, then edit the menu links to all have a width of 25%.notes
- If you want to include the same sort of character image in the profile section that I did, the image should be of equal height and width. It is set to resize to 200 x 200 pixels! If you would rather not use that style of image, it can be removed entirely.- The code for the circular images (both in the basic profile & friends section) is isolated; the CSS for it is under the color section. This was done so that if you'd rather not use that style for the images, you can easily remove the code!
- The "statistics" and "items" headers can be edited if you would prefer to use different words. These headers are part of the CSS.
- There is room to add one more navigation button without needing to resize anything in the layout. The process for adding another content box is virtually the same as it is for my anchor link layout with left navigation, but you'll need to add the name of your new div to the sections of the CSS that say:
.statsbg, , , ,as well as adding a corresponding target z-index here::target, :target, :target{z-index: 3} - The navigation buttons are all Font Awesome icons. I highly recommend checking out this cheat sheet of their icons!
- Image guide to customizing colors!
2021 LAYOUTS
Dropdown sidebar pet info
notes
- You may need to adjust the height of the credit box when it's hovered over depending on how many things you need to credit! Search for 'credit hover size' in the CSS and adjust the height value needed.- You can create more content boxes if you want to break up profile content into more boxes! Just use the [tt]
'Night mode' scrolling profile
notes
- The customized example layout that I posted displays the friend section in rows of three 'cards', but if you would like to have it display in rows of two, I included that in the code posted. There are HTML comments marking where the two-row version is. Be sure to remove whichever version you do not want!I hope these explanations make sense! If anything is confusing, I'm happy to try to explain better. ;w; Also, I'd love to see what you do with the layout if you end up using it! I encourage you to ping me and tell me what pet(s) you're using my code with so I can check 'em out~
click
-Removing legacy name:.legacy-name{display: none}
-Adding a background:
body{background-image: url(URLHERE)}Note: my profile templates default to having the background both tiled and fixed (fixed meaning that it doesn't scroll with the page), because I'm so used to using that in all of my pet profiles and completely forgot that other people might do things differently! If you don't want to use a tiled background, you'll need to change the code where it says:
body{background-repeat: repeat;
background-attachment: fixed}and instead have something more like this, which will set a background to appear in the bottom right corner:
body{background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right}Depending on the background size, you may end up wanting to set it to cover or contain, which will resize the background itself to fit the screen. Here is a link to a guide to background sizes!
- I use web fonts for a lot of my personal profile layouts, because I think they're a great way to make pet names stand out and add personality! To use a web font, add this to the beginning of the CSS, right under the style tag:
@ import url(https://fonts.googleapis.com/css?family=Parisienne);[/code] Remove the space before 'import' and change the pet name font family to 'Parisienne', cursive; Adding 'cursive' after a comma makes it so that if the web font doesn't work for some reason, the browser will display the font as your computer's default cursive font. If the font you're going with isn't cursive like the Parisienne font, you might want to change "cursive" to something like "sans-serif" or just a common font like Verdana! This code has the font I used for Amithi's profile, but there are a ton of options out there for pets that you might not want such a pretty cursive font on. I get all of my web fonts from Google fonts! Also, you can have more than one web font on a profile if you'd like; you can separate different fonts with a | (so the URL to import both of the fonts I used on Ruanna's profile was https://fonts.googleapis.com/css?family=Lemon|Muli )
you're amazing and i love this ^_^
Thank you so much for this. I have so little experience and this will help me greatly. Question, where/how do you add the background image in?
. . . Someone told me I have two faults. I don't listen and . . . some other stuff they were rattling on about.
Oh man, I'm sorry for not including that! I usually include the background in the beginning of the CSS to help me remember to change it for each pet. So basically just put this somewhere after the first 'style' tag:
body{background-image: url(URLHERE)}
I have the background set to repeat and also be fixed in place (rather than moving as you scroll down the page), if you need that changed I can point you to the part of the code that specifies that. c:
Thank you! ;v;
Thank you again. I appriciate this. :)
. . . Someone told me I have two faults. I don't listen and . . . some other stuff they were rattling on about.
Following :D thank you for this!
Collecting minions , weapons, rainbow and evil things now, PM me if you are selling!
No problem! Let me know if you need help with anything else. c:
You're welcome! I enjoy making templates but I have a bad habit of later deciding I don't want to actually use them for my pets, so I figure this is a good way to make it so the ones I don't end up using don't go to waste haha.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
I feel like this is a silly question but removing content... Will that effect anything? Like I only need the profile and tc boxes.
Aaa you're very welcome! I'm really happy to see that there's interest for these. c':
Nope, there shouldn't be any issue whatsoever! If there is, let me know; it would mean I probably messed up somewhere. :'D It should be totally fine to remove extraneous divs and of course the links on the left. If you don't want to mess around with removing them from the CSS itself (I know that can be kind of intimidating haha), that shouldn't make a difference either. edit: Oh, or did you mean removing anything else? Like stuff I have in the left column? Removing extra divs and the corresponding links should have no effect on anything else, but some positioning values would need to be adjusted if something like the spotlight box or minion were removed.
lol sorry that was very vague XD yeah I meant the divs, thank you much for the answer! This code is great. Thank you so much for sharing!
(rips shirt off to reveal another shirt that says I LOVE LEA'S CSS on it)
seriously though THANK YOU for sharing your talent with the world, I am seriously too lazy to do my own coding these days (and I guess I can't keep up with the newer versions of CSS, anyway). I'm probably going to use the anchor link template for my future Pokemon trainer OC!
(please)
So, you're my hero right now. I've used this here: [x] and I'll probably use it for a bunch of other pets as well. I've been ripping my hair out trying to fix them all since the site changed the coding and I really don't have the patience anymore. I especially love it for this pet though, because I've been struggling to find a good way to display his massive TC and this really helped. :3
Haha no problem, I figured you meant the divs but then had a 'but wait, this is a perfect opportunity to overthink things!' moment. You're very welcome! I'm looking forward to seeing what people do with these. :'Db (I honestly get really excited every time I see someone posted.)
You're so welcome! I'm super happy to see that it's useful to people, especially since that one was made just for an experimental freebie, rather than something I was thinking about using myself (though now of course I'm using it haha.) That's a seriously impressive TC, wow! I looove seeing big TCs and I'm glad that you like the way this one displays :D
dgfdddg YES GOOD JOIN ME IN POKEMON TRAINER OC HELL. B) Yeah this anchor link thing should totally work for a Pokeverse character, or lemme know if you want something more like how I do the stupid Pokemon thing with my own trainer kids :') God knows I love making these things.
As you should, you did a great thing! I added it to the profile for my pet Hepburn and I'm currently working in the final touches. <3
