Forum Discussion

Quelyn's avatar
Quelyn
Genius
10 years ago

CSS Question: Override or Cancel default style

So, I am working on my theme and whenever I made a change within the WYSIWYG TinyMCE editor to a table row background, it doesn't appear until the KB is published.  I looked in the CSS and it looks l...
  • OlivierS's avatar
    OlivierS
    10 years ago

    Quelyn 

     

    I'm far from being a CSS expert, but if no one esle respond, you could give that a go ...

     

    When adding a Table in TinyMCE, it looks like the class is "mce-item-table"

     

    In your css, you could add:

     

    .mce-item-table td {

    background-colour:transparent;

    }

     

    or:

     

    .mce-item-table td {

    background-colour:none;

    }

     

    Note: you probably don't need to go to the pain of changing your CSS and publishing it to see if it works or not. You can add / change CSS style on the fly with FireBug (for FireFox) or any web developer tools on Chrome / IE /Safari

OlivierS's avatar
OlivierS
Lithium Alumni (Retired)

Quelyn 

 

I'm far from being a CSS expert, but if no one esle respond, you could give that a go ...

 

When adding a Table in TinyMCE, it looks like the class is "mce-item-table"

 

In your css, you could add:

 

.mce-item-table td {

background-colour:transparent;

}

 

or:

 

.mce-item-table td {

background-colour:none;

}

 

Note: you probably don't need to go to the pain of changing your CSS and publishing it to see if it works or not. You can add / change CSS style on the fly with FireBug (for FireFox) or any web developer tools on Chrome / IE /Safari

Quelyn's avatar
Quelyn
Genius
10 years ago
:O That's a good call! I'm still getting my feet wet in CSS, I should have thought of that one.

For the record "None" didn't work, but "Transparent" did!
  • Quelyn's avatar
    Quelyn
    Genius
    10 years ago

    Here's what I added: 

     

    #lia-body.mceContentBody, .mceContentBody th, .mceContentBody td, .mce-content-body, .mce-content-body th, .mce-content-body td
    {
    background-color: transparent;
    }
    • luk's avatar
      luk
      Boss
      10 years ago

      Instead of the "proper" overriding solution presented above you can also choose the "fist on the eye" approach with


      .mce-content-body td { background: none !important; }



      I recently started choosing this "approach" (even though I hate it) being tired of figuring out the hardcore Lithium CSS selectors to properly override the default rules =)...

      • Quelyn's avatar
        Quelyn
        Genius
        10 years ago
        Yeah, I have been using Chrome Developer tools to figure out the CSS classes and play with it in there first. Using it that way has helped me get the right identifiers in there and made life so much easier! :)