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

Quelyn's avatar
Quelyn
Genius
: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! :)
      • luk's avatar
        luk
        Boss
        10 years ago

        Sure, the Web-Inspector is a tool no frontend developer should miss, but it basically just shows you the crazy selector chains you have to use to properly override Lithiums ID-prefixed selectors (I'm sure you know and love #lia-body =D)...and as it does hurt my dev-heart more to have 3 mile long selectors than using (an also ugly) !important, I chose to go this path...guess as long as I'm the only one customizing the community (e.g. nobody else needs to override my rules again...) this should be fine...