Start a new topic

Post/teaser specific CSS

Today we had an eagle eye review with Lindsay from UC Davis GSM.  Lindsay is an advanced user that struggles/fights against some default theming when making special posts/pods that need certain theming overrides.  Mac and I thought it would be rather cool to have an advanced layout editor that allowed our advanced users to add their own CSS that only affects one post by prepending #node-123 or #node-teaser-123 to the selector.  If the post was ever deleted, all the associated custom CSS would be removed.

2 people like this idea
1 Comment

So, when you want to make a tweak:

Step 1: click "Edit CSS"

Step 2: Add specific CSS just for this area. The CSS editor is smart and only lets you edit the CSS for that node. It effectively wraps the whole thing in a particular context. 

Our system would then smart enough to write CSS. It only would need to be included if (a) the node were visible [more complicated] or (b) until that node is deleted.

For additional complexity/power, we could allow the user to choose context. The default would be sitewide, which would yield the code in blue above. Other contexts, such as "Only on this page/term/template/post type, etc." might instead display

body.ttv1 #node-1754-teaser {

instead, and prepend that set of rules to the provided CSS. 

This would be a great way to keep people from getting too carried away or having broad changes affect the site in unexpected ways.

I also ran across this on GrogTag, where a little timer I wrote inside of a post for simplicity. It would have been great to isolate the CSS so it could retire once the post was deleted. 

Login to post a comment