Lea's user profile template
Replies
Hi! I've let a few people use my user profile template and I know there were a few others interested, so I've decided to finally go through with making it a proper template.
I highly recommend clearing most of your user profile before you add any CSS that changes the layout much. It makes things somewhat less confusing.
You will need to make a blank section to put your header and image inside. I've tried to avoid it but the profile CSS is active on the edit profile page and that can make things wonky. I didn't really feel like spending time struggling to get it to stop doing weird things when I went to edit, when this was an easy enough alternative.
Your first blank section should be on the top left of your profile, above your profile section. It will contain this HTML:
Below the first blank section should be your profile module. At the end of column 1, add your comment section.
Basic HTML for profile section:
1 โฌฉ 2 โฌฉ 3
The pet section will be another blank section. This one goes in column 2. This is the basic HTML for the pet section:
[ Pet links here ]
This is the CSS itself. You can put this in your profile section or another blank section, whichever is easiest for you. For ease of editing, I keep mine in its own 'blank section' between my profile and comment box sections.
Template CSS. Important notes about the CSS:
This profile uses a lot of CSS variables. I did this because it's the way I generally make my pet profiles now (as it increases ease of editing for me), but it can be confusing. All the root variables can be found by searching for :root in the CSS.
Using variables essentially allows me to instantly edit the color (or size, or box-shadow, or whatever I'm focusing on with the variable) of multiple elements without having to awkwardly clump them together in the CSS, like I used to do.
All of the colors to be edited can be found in the root section. I also included the size of the left column, under 'column1-size'. I don't recommend making this smaller than 350px. Misc notes: Pet Cards and Headshots
My profile uses custom HTML/CSS to display my pets with custom CSS-based 'cards' that include headshots. After some consideration, I've decided I'm alright with sharing this and keeping it in the CSS, but I want to warn that it is very... fiddly, for lack of better word. You have to use CSS for each individual headshot to get it positioned correctly. The headshot is a small div element with the 200 by 200 pixel pet image for its background. In addition to setting each background image, you'll need to change the background positioning for each pet to make sure the image is cropped correctly.
I included an example of the CSS required for my pet card headshots, which you can find by searching /* headshots in the CSS. This is what it contains:
This is the HTML for pet cards, using Moxie as an example:
If you don't want to deal with using my 'pet cards', the usual sCode pet links can also of course be used. These have been customized using CSS. They will display as a circular headshot, larger in size than the Subeta default, and the pet name will show up on hover.
If you want to change the way these look, you can find the CSS by searching 'customizing the scode pet headshots' in the CSS. I hope the explanations make enough sense here! It's not as straightforward as I would prefer.
Let me know if there are any questions or issues! User profiles aren't really something I love to work with, but I'll do my best to help.
Setting Title
blurb for setting here.
[/tt] to the second [tt][/tt] and edit as needed.
(More details about pet section -- namely, pet links -- at end of topic.)
.moxie {
background-image: url("https://img.subeta.net/pets/keeto_blacklight.png");
background-position: -80px -35px
}
The part that says .moxie is where I am creating a new class selector named 'moxie'. The background image is for either the official pet art or for the overlay for your pet. In the background-position, the first number is for the x/horizontal axis, and the second is for the y/vertical axis. These numbers are how you position the headshot appropriately.
To add more pet headshots, you can simply copy and paste the above, and edit the values accordingly.
You'll need to edit three instances of the pet name - the link, the headshot, and then the name itself.
I am mentally screeching over this post! ;-; THANK YOU SO MUCH oh my lorddddd, I LOVE this layout so much <3
Amazing template for those of us with a bajilion pets. 10/10 would recommand!
Oh I will be sorely tempted to try my hand at this despite having just finally finding myself satisfied enough with my profile. It's so TIDY in comparison.
| snow! he/him pets open for rp urban fantasy, supers, dnd steampunk, magic zomapoc weird western, space opera |
THANK YOU SO MUCH โค๏ธ So excited to use this, my profile has needed help for so long. LOL
[sub]CURRENTLY SEEKING[/sub]
thank you for sharing this! ive been fiddling with it this evening and im really a fan of the options and customization
[flower=ire]
Hi! Wanted to say thank you for the CSS! It is amazing and I am still trying to figure out how I want my pets listed on the profile, but absolutely wonderful work!! <3
Such a clean and satisfying profile, when I first saw it, it wowed me. I just had to try it. Once I got the hang of how the code works, it was fun to customize, too. Thank you for sharing it!
he/him / 31 / EST |  | My best friend is |
Oh thanks for this! I finally have my profile looking nice :D
I try not to think. It interferes with being nuts.
Very nice :D Thanks for sharing nwn I've lost the blank section I put the CSS in since I'm a complete noob though, whoops >u>; I reset it and it's working now~
If you can see this, I've temporarily stopped lurking uwu
Yeah, sorry, user profiles are kind of tricky, and I coded this a bit weirdly... I really wish that the CSS wasn't live on the page where you have access to editing everything. x: Are you able to edit the profile at all or anything? Looking at the source on your profile, it looks like the CSS is in the 'profile' section, which you can also edit here: click (found in the 'dashboard' dropdown under 'personal'). If you ever get totally stuck and are unable to edit your profile (which I may or may not have done multiple times), there's also an option there to completely reset the profile to default.
It looks like you're making edits as I was writing haha, so just let me know if there are any issues you can't figure out how to fix or if you need any help! User profiles are very trial-and-error, I find.
No worries ^^ I wish that too, a preview option would be great ;u; I was able to edit the profile, but the css blank section had just disappeared XD I ended up resetting my profile and starting over, and it's worked out better now nwn Thank you! I'll definitely reach out if I get mixed up again. And yeah, I was surprised to find that out :0 I'm pleased with what I've learned though nwn Thanks for the template!
If you can see this, I've temporarily stopped lurking uwu
I updated my profile using your profile code! Everything is so neat, organized, and easy to view. I love how little tweaks with the backgrounds, images and text can help people match their own unique style! I was considering buying a new profile, but with this code I can literally change my images any time to match my HA! Thank you so much for sharing the code! :)
[box=#FF977E]
Current Avatar Theme: Ryomen Sukuna :D
Custom Wearables Thread ๐ฑ Custom Wearables Shop ๐ฑ CW Ping Group
I'm glad you like it so much and oh man, thank you so much for the gift, that was really kind of you! ;; Let me know if you ever have any issues/questions with it! Also I love the color scheme you're using omg.
This was a really nice code and I would have been willing to pay for it, so I just tipped a little ^_^
The coding is great, no questions there, but do you happen to have any nice font suggestions? I like the font for the content, but wasn't sure what to do with the titles. I'm looking for a clean or elegant font-face/font family that's easy-to-read. :)
Also thanks! I eyeballed the colors 8'D I mostly just wanted it to match Sukuna/Yugi's peachy-pink (coral?) hair XD I really liked the default light gray background image you used, but wanted something similar in peach. I thought about using the hotpink and gray for the text, but just left it as-is because I felt the colors still matched p:
[box=#FF977E]
Current Avatar Theme: Ryomen Sukuna :D
Custom Wearables Thread ๐ฑ Custom Wearables Shop ๐ฑ CW Ping Group
Apologies for the late reply, I've been pretty caught up in IRL stuff lately so I haven't been around a lot.
Oh man I'm actually terrible with font choices, I have a tendency to go through phases of really liking certain fonts and... well, most of the ones I'm familiar with off the top of my head are for more of a 'medieval' vibe which does not seem like what you're looking for hahaha. Every time I try to choose a font, it's a multi-hour process because, like, I always seem to find ones I really like, but then they don't look as nice as headers as I'd hoped, you know? I feel like it kinda depends on how many headers you have, how long they are, etc. I always end up testing a bunch of fonts before settling on one.
If you haven't checked it out, the Google Fonts site has a 'filter' option which can be very helpful for narrowing things down! I feel like there are a couple of good options if you check out the 'Art Nouveau' fonts, those seem like they could work well for headers.
Oh, nice! I love that you used matching colors for the images without directly using the colordropper tool or anything hah, it makes things stand out more.
You're welcome, I'm glad people like it ^^ Let me know if you have any issues with it!