Pet Profile CSS: I need a lot of help [SOLVED]
Replies
Hello, I've been trying to find a basics on pet profile css, but the links in the sticky post are not working for me (they all redirect me to the news page) If someone has it bookmarked, could you please share it? thanks!! ;u;
EDIT: I have finally tried to create a pet profile so now I can try and ask more specific questions haha
I'm used to creating pages from 0, and I usually figure stuff out pretty quickly, but since I can't see what the beta css are and how they work on a page, I have no idea how to make them work inside my code. I really want there to be a way where I can completely reset the pet css and code my own inside my cool boxes. Is that even possible? My biggest pet peeve with most custom pet profiles is how they get stuck on the top left of the screen, which would look fine on smaller displays but my monitor is huge and I really wanted to make a more responsive centered layout...
(disclaimer, I've worked on this profile comparing my code of one of Lea's profiles in hopes of understanding how everything works but after 8 hours I just gave up lol)
I'll try to work on a new profile layout cause I dunno if I ended up liking this one too much! :')
• • • •
hmm, it's really weird that some of the links are broken and some aren't they work if you copy the url and remove the www prefix? bizarre, but at least they're not gone for good.
thankfully at least one works without extra effort, and it's the one i go back to the most! that's Subeta CSS Compendium :D you might also find 's tutorials helpful; those are hosted on their personal site, bug.bz
in this case i think you want either the reset code bug provides on their site (which is a fun @ import url thing), or the basic reset spoiler on 's compendium thread:
BASIC -- Resetting
When you start on a profile, you might want to get rid of a lot of stuff before you go into specifics like moving boxes around. I'll give you my reset block of code and then explain every line. Here's the * {margin: 0; padding: 0;}
, , , , , , {display: none;}
body, , {background: ;}
.prototip {display: none;}
The first line removes all margins and paddings that have not been declared inline (inline declaring is where one specifically declares a property in a HTML tag instead of putting it in the CSS). This insures some browser-compatibility of your layout. Some browsers add their own margins and paddings to some elements, like Internet Explorer. And that tends to mess up stuff.
The second line hides everything around your pet profile. gave a code for that in their thread, but it's rather long and has a lot of repeated tags. BTW: If you want the bookmarks visible, just remove them from this line.
The third line is in case you want everything to be the same background colour instead of 3 different ones. I put black here, but you can chose any colour you want by changing the zeroes to the hexadecimal value of your colour.
The fourth line is to hide the box that pops up when you hover over the user name. Remove this line if you want to keep that, of course!
and regardless of which you use, the image reference bug has for explaining the profile sections is always a good thing to have on hand!
i know you have other questions, but i'm not sure how many of them have to do with needing to reset the profile? i think the pet color and owner positioning might be tied to that, i've run into similar problems. the only other thing i can answer off-hand is that to test your spotlight link, you need to turn it on, and then check the profile on a separate browser -- you can't see your own spotlight link :
Oof. Pet profiles are definitely not designed for coding from scratch. But we've been working around that for years, so we have a lot of tips!
Knowing what things are named seems to be one of your top issues. I'll list some things below, but I'd highly recommend using Google Chrome if you can and looking at a generic pet profile. Then, right click on the profile and click "Inspect". It'll bring up a thingy that at the top has all the HTML, at the bottom left has the CSS that is affecting that particular code, and at the bottom right has some square stuff that I've never found particularly useful. At the top left of this is a button that looks like a mouse pointer. If you click on that mouse pointer, you click on any element on the page, and it'll bring up the exact coding that corresponds to that element, including what it's nested in (HTML) and what is modifying it (CSS). This will help a lot.
When it comes to pet profiles, this is how the general nesting goes:
pet_info is a div that contains all information on the page, including your custom coding.
column_1 typically has the minion information.
column_2 is the pet image, pet name, ownership information, and (birth & adoption) dates. They all have span classes and are able to be manipulated separately. If you win a pet spotlight, the trophy also shows up in this div.
column_3 is the pet's stats, weapons, and job information.
pet_desc is whatever information you put in about the pet, their story, etc. Anything you type on their "description" page.
pet_treasure is treasure chest
pet_friends is friends, ofc.
You'll probably find out more information using the links provided you with. However, I'd still highly recommend using the Chrome trick so that you can look under the hood yourself and see what you're dealing with. :)
thank you SO SO SO SO SO muuuch!! :'D I've just finished designing my new template on SAI and I'm very excited to try my hand at coding a new profile with the links you provided!! I will be back if I run into problems!! ♥
thank you very much!! that actually explained a lot! I thought pet_info only had the basic stuff not the whole thing! :0 I've used the inspect tool to find the css for the page but I didn't think to check how the html ties into it! I should've done that haha I'll use all your info when my brain is restored from the code burnout, lol
• • • •