Replies

Jun 25, 2021 4 years ago
Clopin
has a massive family
User Avatar
Animal Kingdom

hi friends! i purchased a premade profile, and (with permission) i am seeking help to alter some of the tabs on it! the profile is for my pet manor, and we have three tabs on the right-- one for his treasure, one that was for his friends (renamed info) and one for his stats. i'd like the friends/info tab to become a tab where i can put credits, but i am wholly unsure of how to do that. i was able to block the friends section from displaying. i thought it would be something simple like replacing the friends area with an area in which i can write things, but i can't find the code that designates the friends section to that box. as for the stats tab, same thing, but i'd like to replace it/add stats like his legacy name, birth date, and adoption date. is anyone able to point me in the correct direction for finding these things and altering them in the code? i can take some screeenshots of the specific code pieces if necessary, but since it was purchased i wouldn't feel right sharing the actual code.

Manor

[flower=Clopin]

Jun 25, 2021 4 years ago
Star Captain
Anrivef
User Avatar

These are the tags for legacy name, adoption date, and birth date. In the code they're probably in front of the bracket display: none like I've put in the example, so you'd have to take those tags, delete them from in front of display: none, then position them all where you'd like them to be. .legacy-name, .pet_wco_info_date, .pet_age_info_date {display: none} I'm.. not great at coding though so I have no idea how to get stuff into tabs, lol, I just shove stuff around my pet profiles til it lines up. But maybe you can play around with those tags til someone else has a better answer XD

Jun 25, 2021 4 years ago
spacemage
is fashionable
User Avatar

@/Clopin

Simple overview that should point to what's needed, I hope this is understandable if not let me know

Basically tabs work with css target styling to display information that is designated how this works default styling of tabbed info is hidden and when a tab is clicked the url is modified to have a designated target at the end usually the id of element with the info going to be shown there are other cases but lets leave it here for now on that info

So for example the tab for treasure when the following tab is clicked the url has "" added at the end this now causes the css styling selector ":target{...}" to activate and overwrite default value to display the . I assume the positioning and other styling for treasure is in the selector "{...}"

Now for what you want making friend appear again may make it easier to figure out/follow, anyways if you didnt change the target of the info tab the styling selector should most likley start with ":target" probably has some more after but if you did then the selector would start with SOMEid:target.

So to replace friends with credits, one way replace the target that gets added to url when tab is clicked with "" (or the id of the element you are wanting as its replacement) tab code for mentioned tab is below

should be modified to look like this if credits is the intended ID
info
Now for the info/credits itself style "" for positioning and such might be good to use the styling used for the friends

The other tab replacement won't be as easy since that info is in a container/element with other info/stuff but it's doable just a bit more complex the other elements need to be style so they get exempted from being hidden when tab is not selected I can go into more concert solution later but Im tired and idk if the other info is understandable to anyone besides me lol I hope it is but if not you can ping me that its not when im back i'll explain things better and also go into the solution for the other tab

Edit: Okay after looking at it again a different way would be easier than the aforementioned exemption way, anyways: So the first step would be to get the pieces of info positioned to where you like it to end up so temporarily remove the display none so it's visible. So basic positioning code below for convenience if needed REPLACE_THIS { position: absolute; z-index: 3; left: 0px; top: 0px; } after you have it to a good location put the display none back in for those elements now for the tab replace the target like i mentioned before so tab code look like below

should be modified to look like this
stats

Now the last thing needed to for the info to appear when the tab is clicked so need a selector like this ":target .legacy-name", below code should work and all three selectors are there as well :target .legacy-name, :target .pet_wco_info_date, :target .pet_age_info_date { display: initial; }

I made a forum group for CustomCSS and more

Please log in to reply to this topic.