Announcement

Collapse
No announcement yet.

ckeditor background colour

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [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;
    }

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

    Comment


    • #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


      • #4
        Originally posted by Lynne View Post
        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


        • #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


          • #6
            Originally posted by Lynne View Post
            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


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

              Comment


              • #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 customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #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


                  • #10
                    Put this into your additional.css template.

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

                    Comment


                    • #11
                      Sorry I shouldnt have posted in 2 places. Unfortunately this does not work as explained in this post:
                      https://www.vbulletin.com/forum/show...for-new-editor
                      Bluepearl Skins - vBulletin 4 & 5 Skins

                      Comment


                      • #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 14th Jun '11, 8:24am.

                        Comment


                        • #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


                          • #14
                            Originally posted by worried View Post
                            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 14th Jun '11, 12:30am.
                            Bluepearl Skins - vBulletin 4 & 5 Skins

                            Comment


                            • #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...
                              X