Home/ Questions/Q 798241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:56:17+00:00

I have a web service where people can edit their pages CSS, but I

  • 0

I have a web service where people can edit their pages CSS, but I have a bar on the footer of that page that I want to make consistend on every page…

People are, right now, able to “remove” it with CSS and I really didn’t want to go and parse the CSS to remove rules related to that bar… Is there a way to preserve the styles or re-aply them after load to keep the bar always visible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you modify the user-created CSS as you save it; adding descendant selectors to all their rules, you can limit the effect of their styles to an element of your choosing. If you take this HTML:

    <html>
  <body>
    <div id="userEditableArea">
      <h2>Stylable</h2>
      <p>Users can style this section.</p>
    </div>
    <div id="footerBar">
      Users can't style this section.
    </div>
  </body>
</html>

    The user creates the following stylesheet, trying to hide your footer:

    h2 {font-size:2em;}
p {font-color:#333;}
#footerBar {display:none;}

    When the user saves their styles, you parse through and add #userEditableArea to all of their rules, so they only work on elements inside <div id="userEditableArea">. This should be pretty easy to accomplish with a regex pass or two. 

    #userEditableArea h2 {font-size:2em;}
#userEditableArea p {font-color:#333;}
#userEditableArea #footerBar {display:none;}

    Anything you don’t want them to mess with, put outside of #userEditableArea.

    This should be pretty robust – more so than using !important rules or high-specificity selectors, and doesn’t require any JS.

    • 0