ckeditor background colour

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • todie4
    New Member
    • Nov 2010
    • 19
    • 4.1.x

    [Forum] ckeditor background colour

    Has anyone figured out how to change the background colour of the ckeditor using just css?

    I've tried adding exceptions in the additional.css using the important over-ride but to no avail, having searched the net for answers the only real options seem to be messing about with the editor ,js files, not the ideal solution.

    I've tried using this in the additional.css, but it changes nothing!
    Code:
    .cke_skin_kama .cke_contents {
        background-color: #141414 !important;
        background-image: none !important;
        color: #ffffff !important;
    }
    .cke_skin_kama .cke_contents iframe {
        background-color: #141414 !important;
        background-image: none !important;
         color: #ffffff !important;
    }
  • chriske
    Senior Member
    • Oct 2008
    • 466
    • 5.6.3

    #2
    I would like to know this too.
    Please vote for:
    - Lightbox for all uploads
    - Attachment permissions for unregistered users

    Comment

    • Lynne
      Former vBulletin Support
      • Oct 2004
      • 26255

      #3
      Exactly what background are you trying to change? The background of the text area you type in (white here)? The background of the whole editor (gray here)?

      Please don't PM or VM me for support - I only help out in the threads.
      vBulletin Manual & vBulletin 4.0 Code Documentation (API)
      Want help modifying your vbulletin forum? Head on over to vbulletin.org
      If I post CSS and you don't know where it goes, throw it into the additional.css template.

      W3Schools <- awesome site for html/css help

      Comment

      • todie4
        New Member
        • Nov 2010
        • 19
        • 4.1.x

        #4
        Originally posted by Lynne
        Exactly what background are you trying to change? The background of the text area you type in (white here)? The background of the whole editor (gray here)?
        The white content area Lynne.

        Comment

        • Anders P
          Senior Member
          • Feb 2002
          • 512

          #5
          Isn't it in the clientscript\ckeditor\skins\kama folder? I've found some settings in a css file there (width of drop down menu that I need to change when using another language).

          /Anders
          Anders Pettersson
          Don't send me requests by PM to email you the Swedish language file that I have done. My translation is only available here at vbulletin.com to licensed users.
          If you want updates on when a new version of the Swedish language packs (forum & suite) are available, subscribe to this discussion.
          Don't PM me for support on how to install language files etc. please post in the appropriate forum, that will most likely give you help quicker.

          Comment

          • Bilal
            Member
            • Sep 2005
            • 51
            • 4.0.x

            #6
            Originally posted by Lynne
            Exactly what background are you trying to change? The background of the text area you type in (white here)? The background of the whole editor (gray here)?
            how about both? because my forum have a dark theme :S
            Best Regards,
            Bilal

            Comment

            • Avrojet
              New Member
              • Nov 2009
              • 6
              • 3.8.x

              #7
              Originally posted by Bilal
              how about both? because my forum have a dark theme :S
              indeed, where can we customize the look of the editor?

              Comment

              • Wayne Luke
                vBulletin Technical Support Lead
                • Aug 2000
                • 73927

                #8
                Some of it can be customized in editor.css and editor-ie.css. However the rest might need to be edited in the CKEditor folder itself. Particularly in the _source\skins\kama\ directory. That is where all the CSS is held.

                You may be able to override this in the additional.css template using !important tags.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment

                • Sean James
                  Senior Member
                  • Apr 2004
                  • 478

                  #9
                  In the editor_contents.css file you can find this:

                  body.content {
                  font: {vb:stylevar content_msg_font};
                  color: #222;
                  /* Remove the background color to make it transparent */
                  background-color: #fff;
                  /*background-color:{vb:stylevar wysiwyg_textbox_background.backgroundColor};*/
                  margin:0px;
                  padding:8px;
                  }

                  But changing this does nothing. I have also tried using !important tags and nothing changes.

                  I am trying to make the background of the editor black instead of white.

                  Surely we dont have to edit the files in the CKEditor folder itself? What if we have multiple skins some light and some dark?
                  Bluepearl Skins - vBulletin 4 & 5 Skins

                  Comment

                  • Andy
                    Senior Member
                    • Jan 2002
                    • 5886
                    • 4.1.x

                    #10
                    Put this into your additional.css template.

                    Code:
                    .cke_skin_kama textarea.cke_source {
                        background-color: #000000 !important;
                    }

                    Comment

                    • Sean James
                      Senior Member
                      • Apr 2004
                      • 478

                      #11
                      Sorry I shouldnt have posted in 2 places. Unfortunately this does not work as explained in this post:
                      Bluepearl Skins - vBulletin 4 & 5 Skins

                      Comment

                      • Andy
                        Senior Member
                        • Jan 2002
                        • 5886
                        • 4.1.x

                        #12
                        Did you try the Go Advanced editor or the Quick Reply?

                        Oh yes forgot to mention I use the standard editor not the WYSIWYG editor.
                        Last edited by Andy; Tue 14 Jun '11, 8:24am.

                        Comment

                        • worried
                          Senior Member
                          • Dec 2008
                          • 684
                          • 4.2.X

                          #13
                          I was able to change the background color by adding important by the color and adding the CSS to additional.css:

                          Code:
                          .cke_skin_kama .cke_wrapper {
                              background-color: #bd0340 !important;
                              background-image: url("images/sprites.png");
                              background-position: 0 -1950px;
                              background-repeat: repeat-x;
                              border-radius: 5px 5px 5px 5px;
                              display: block;
                              padding: 5px;
                          }
                          Please choose another color. Unless you want a hideous cherry red. :P

                          Comment

                          • Sean James
                            Senior Member
                            • Apr 2004
                            • 478

                            #14
                            Originally posted by worried
                            I was able to change the background color by adding important by the color and adding the CSS to additional.css:

                            Code:
                            .cke_skin_kama .cke_wrapper {
                                background-color: #bd0340 !important;
                                background-image: url("images/sprites.png");
                                background-position: 0 -1950px;
                                background-repeat: repeat-x;
                                border-radius: 5px 5px 5px 5px;
                                display: block;
                                padding: 5px;
                            }
                            Please choose another color. Unless you want a hideous cherry red. :P
                            Thanks for your help mate, This changes the color of the frame which was I was able to do. What I am trying to do is change the color of the text area. Like in the attachment.

                            So change the white area to black (text area)
                            Attached Files
                            Last edited by Sean James; Tue 14 Jun '11, 12:30am.
                            Bluepearl Skins - vBulletin 4 & 5 Skins

                            Comment

                            • Lynne
                              Former vBulletin Support
                              • Oct 2004
                              • 26255

                              #15
                              You may add this to additional.css and it will change it for Source mode:
                              HTML Code:
                              /* Change editor background colors */
                              .cke_skin_kama textarea.cke_source {background-color: black !important} 
                              .formcontrols .blockrow.texteditor textarea:focus{background-color: black;}
                              Unfortunately, in order to modify it for just your style in WYSIWYG mode, you would have to modify the editor_contents.css file and there is a bug associated with that here which won't allow you to apply it to your style - ckeditor calling wrong editor_contents.css file

                              Please don't PM or VM me for support - I only help out in the threads.
                              vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                              Want help modifying your vbulletin forum? Head on over to vbulletin.org
                              If I post CSS and you don't know where it goes, throw it into the additional.css template.

                              W3Schools <- awesome site for html/css help

                              Comment

                              Related Topics

                              Collapse

                              Working...