HTML/CSS Whitelist & Tweaks

Posted 2 years, 11 months ago (Edited 4 months, 15 days ago) by lulu

I'M NOT A FRONT END DEVELOPER omg i should really hire one but i'm literally never going to get around to it i'm so sorry 

Anyway if you see anything in the source that could be fixed to make skinning profiles easier or if you need any specific IDs or classes on elements make a post and I'll see if I can add it in for you (it's basically entirely dependent on whether it breaks current profiles or not).

Also, if you wanna use certain tags / attributes and you've noticed that they're blacklisted just post here and I'll see whether I can add it in for you, ye o/

Things I've noticed are locked that could be useful to creating some nice designs:

Checkbox inputs - useful for "checkbox hacks" allowing pure CSS buttons to change styles on other elements.

The direct descendant css selector ( a > b )

The "tabindex" property entirely, which would allow CSS tweaks through the use of the :focus pseudo-element

The :target pseudo-element (not often used, but i've seen it on sites to make more pure css buttons, checkbox hack is a much nicer alternative)

The :before and :after pseudo-elements, understandably blocked but still extremely useful. Maybe look into limiting what they can be applied to, ex: only allow them to be applied to user-supplied elements (those in HTML input areas)

I'll probably be commenting with some more suggestions, these are just things I've found while trying to work out some accordion elements for some profiles.

Prov Hi, thanks for all the suggestions! I've added checkbox/radio inputs, direct descendant selectors, tabindex and :target, just let me know if they're not working for you.

I went ahead and added :before and :after, but they don't have the content property yet which makes them kind of useless lol - I'm going to need to read up on it a bit first which I'll probably do over dinner. 

Thanks so much for your contributions, I'm really glad to have interested users! I've also updated the ToS as per your advice, hopefully it's acceptable now. 

it would be super useful if the .profile-characters div was only for the front page and then the div on the characters page to be named something else, similar to what you have with the bulletins o v o;

also! a way to edit nth-of-type and nth-child would be really helpful? ; v ; like, i don't have adoptables so i don't really feel the need to show owner & creator but i'd like to show favourites for my characters? so i wanna hide those lines. also edit tables so that i can set the color of every 2nd table row thru css rather than manually each time in the html

Hello! I would like to request a change in the HTML layout. Specifically, the bulletin area for both the profile page and the bulletin page.

I would like to have the entire bulletin entry to be placed in its own node, separate from the comment count, in the "div" with the class of "bulletin-post".

Here's a screenshot of my request. I made modifications using Firefox's developer tools to better illustrate the change. On it, I labeled this new node with the class of "some-new-class" and you'll see on the page that it contains the entire entry, but not the comment count.

While this is a minor change to the HTML layout (current designs won't be directly affected by this new node), this will open up for better and more complex designs. You have a similar layout in place on the header area where the title and the caption have their own nodes. So why not have it included in the bottom portion as well?

Personally, I tried to code a design exclusively for the bulletin. But my design came to a halt upon discovering that the current layout has is missing this node. So yeah... I'm hoping that a change can be made possible. ^__^

Well... thanks for reviewing the request. I would like to hear some feedback regarding this.

The overflow property appears to be blacklisted, at least for character pages. I have a crapton of content. Since there's no sort of spoiler/read more/show/hide feature, I figured overflow would be the best way to do it.

I know you could do something that reveals on hover for css, but this doesn't work for large fields (scroll too far, you won't be able to hover over the target anymore since the field is so huge)

Really I would prefer some sort of show/hide spoiler feature. But in the wake of that, whitelisting the overflow property would be nice.

lulu 

How would I get to edit pages not being premium? Can i do it on any at all with HTML/CSS?

I think we really need to be able to use the overflow thing.... I may have really long profiles for my characters, and I really need to keep this tidy with boxes, otherwise you would just have to scroll for kilometres to see the pictures :(

remove the inline height from the sidebar, style it in the stylesheet
literally the one thing giving me the most trouble out of anything

Ahh I've been searching for a usable workaround and I cannot find any single one -- please oh please enable the overflow property; it's not just helpful for looks, but it can potentially keep other users safe if someone can contain potentially triggering material that may be crucial to portraying a character's overall tone. I've seen official spoiler tags won't be a thing, but non-premium users can't even use the css one cy made as far as I'm aware?

EDIT: a friend of mine found this workaround: div class="character-select-panel" style="height: 50px;" (or whatever height with a max of 500)
That works out great if it's allowed to be used in character profiles!

EDIT TWO: This no longer works as of the most current update

EDIT THREE: Found a workaround! Seen HERE!

also remove the !important tag from div.left in div.clearfix (when viewing a character's image)
it's not necessary and makes styling it more difficult
or maybe actually make the css editor register custom !important tags, because they don't at this point

Spoiler buttons!!!

That's a thing I need :O

@ VARKARRUS
Like spoiler boxes? Cause there is code for those HERE c:

varkarrus I don't think I managed to ping you sorry 8l;

Oh, but the problem is that's only if you can use custom CSS...

I would love to be able to use animation and transition, if possible! Thank you so much! The outline property as well would be nice!