Pet Stats
Replies
I've been browsing the forums and looking for specifics on the 'statistics' portion of the pet profiles, but can't seem to find any. I'm trying to enable 'books read' and 'current job' links because they're not showing on Arkett's profile, but I'd also appreciate info and/or links to more details for the statistics section, such as showing/hiding statbars, hiding job/food/books one at a time, etc.
Unrelated to this question, I managed to disconnect Arkett's name, owner and date from his overlay somehow and had to reposition them specifically with their own tags-any clue what I did?
so for the positioning of the overlay and pet info, it looks like the problem came from using absolute positioning on the overlay. to fix it, remove 'position:absolute' from the div, and then remove the positioning from the name and owner. that should put them back in their original configuration.
as for the stats, the reason those links aren't showing up is because you have the following in your code:
a {display:none;}
presumably this is to hide the annoying 'enable weapons showing' link when you view the profile, so to work around this, add the following to your code:
a, a, a {display:inline}
to hide individual stats, pick the stat you want to hide, and add {display:none} to it. the selectors for each stat are as follows:
so if you wanted to hide just food eaten, you would write:
{display:none}
(and in that case, you could also remove '#stat_food_eaten a' from the code i gave you above because food eaten wouldn't be visible anyway)
you currently have statbars set to 'display:none' so if you want to show them, remove 'div.statbar { display: none}' from your code. then you can style them with the following:
.statbar {width:XXpx; height:XXpx; border:1px solid ; margin-bottom:0px}
obviously using whatever numbers and colors you want. you can also change the colors of the statbars themselves with the following:
, , , , , , {background-color:}
again, using whatever colors you want. you can also make each individual statbar a different color by separating them and assigning them background colors separately, or in groups; for example:
, , , {background-color:}
, , {background-color:}
hope that helps! 😊
Ahh! You are awesome, thank you! I'm sure you can tell just how much I know of CSS, haha. (I love that the statbars can be rainbow-fied. Hello, Lisel.)
Another quick question-how do I remove the little ❤️ heart icon/link? Or, at least, move it. I don't even know what it's called.
Thanks again for the quick and informative reply! Sending a thank-you token!
you're welcome, happy to help. :) the heart icon is called '.pet_like' so you can hide it with '.pet_like {display:none}' or move it with '.pet_like {position:absolute; left:XXpx; top:XXpx}'. its color is determined by whatever color your italic text is set to, and you can change the color it turns when clicked with the following:
i.red.icon {color:!important}
(again, of course with whatever color you want)
here's another tip: if you have chrome or firefox, you can use a handy tool called 'inspect' or 'inspect element' that shows up when you right click anywhere on the page. this opens a panel at the bottom of the window in which you can view and edit the page's source code (it doesn't save any changes, obviously, but you can see what certain pieces of code would do and then use that in your actual code). in the top left corner of that panel, there is an icon that looks like a square with an arrow clicking on it. if you click that icon, you can hover over any element on the page to see what it's called, and click any element to view and edit its source code. it's super helpful when you can't for the life of you figure out what a particular element (for example, a statbar or the pet like heart) is called.