Change CKEditor Colors to Match Style (for 4.1.4 and above)

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Steve Machol
    Former Customer Support Manager
    • Jul 2000
    • 154488

    Change CKEditor Colors to Match Style (for 4.1.4 and above)

    Add this code to your additional.css template to match the colors of the editor to the style you are using:

    /* Background Color for CKEditor */
    .cke_skin_kama .cke_wrapper {
    background:{vb:stylevar postbithead_background} !important;
    }

    /* Background Color for CKEditor Buttons
    (Note, this may be too dark for some styles. If so you can delete this one.) */
    .cke_skin_kama .cke_toolgroup {
    background: {vb:stylevar postbit_foot_background} !important;
    }


    /* Background Color for CKEditor Hover Link*/
    .cke_skin_kama a:hover {
    background: {vb:stylevar control_content_hover_background} !important;
    }

    The additional.css template can be found here:

    Admin CP -> Style Manager -> Edit Templates -> CSS Templates -> additional.css




    Note: If you want to change these to your own custom colors, then use this code instead:

    /* Background Color for CKEditor */
    .cke_skin_kama .cke_wrapper {
    background-color: #xxxxxx !important;

    }

    /* Background Color for CKEditor Buttons */
    .cke_skin_kama .cke_toolgroup {
    background-color: #xxxxx
    x !important;
    }

    /* Background Color for CKEditor Hover Link*/
    .cke_skin_kama a:hover {
    background-color: #xxxxxx !important;
    }

    ...with xxxxxx being the hexcode of the color you wish to use.

    /* Background Color for CKEditor Hover Link*/
    .cke_skin_kama a:hover {
    background: {vb:stylevar control_content_hover_background} !important;
    // background: {vb:stylevar doc_background} !important;
    }

    Note: Fixed typo, thanks to RS_Jelle.
    Last edited by Steve Machol; Sat 6 Aug '11, 8:27am.
    Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
    Change CKEditor Colors to Match Style (for 4.1.4 and above)

    Steve Machol Photography


    Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


Related Topics

Collapse

Working...