Avoid overriding by css

3 Views

I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).

I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.

Read More

Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.

for example,

User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.

But here the problem arises, wordpress’s admin css can have css rule like this, 

h1 {
 color : #d6d6d6;
 line-height: 40px;
 font-size: 30px;
}

So, it looks different in tinyMCE and in my container. (as tinyMCE’s code is inside iframe and that remains unaffected by wordpress’s css rules, but my container doesnt)

I want something so that any element inside container remains unaffected by wordpress’s admin css.

I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.

I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.

    .container h1 {
    color:#000000;
    line-height: 24px;
    font-size: 24px;
}

    This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I’m guessing at the default values you want to use.)

    Unfortunately you would have to add in an undo rule for everything that wordpress’s admin css changes.

  2. Another possible solution is to edit the page tinyMCE returns in it’s frame to add in wordpress’s CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.

    Do you have code-level access to the iframe contents tinyMCE creates?

  3. Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.

    h1 {
    color:#ff0 !important;
}