background color for new editor

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Sean James
    Senior Member
    • Apr 2004
    • 478

    [Forum] background color for new editor

    I am trying to change the background color of the new text editor without much success.

    The background is controlled via this CSS in the editor_contents.css templates

    Code:
    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 the background color from FFF to 000 does not do anything.. It is like this template is not controlling the CSS
    Bluepearl Skins - vBulletin 4 & 5 Skins
  • Andy
    Senior Member
    • Jan 2002
    • 5886
    • 4.1.x

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

      #3
      Unfortunately this does not work either.

      So far I have tried all the ones below and nothing works.

      body, body.content {
      background-color: #000 !important;
      color: #fff !important;
      }

      .cke_skin_kama .cke_wrapper {
      background-color: #202020 !important;
      border: 1px solid #000 !important;
      }

      .cke_skin_kama .cke_contents iframe {
      backrgound-color: #000 !important;
      color: #fff !important;
      }

      body.wysiwyg {
      background-color: #000 !important;
      color: #fff;
      }

      body.content {
      background-color: #000 !important;
      color: #fff !important;
      }

      .cke_skin_kama textarea.cke_source {
      background-color: #000000 !important;
      }
      Bluepearl Skins - vBulletin 4 & 5 Skins

      Comment

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

        #4
        This worked for me...
        Code:
        .cke_skin_kama .cke_wrapper {
            background-color: #ead0d5 !important;
        }

        Comment

        • Sean James
          Senior Member
          • Apr 2004
          • 478

          #5
          This is the wrapper not the content (text area)
          Bluepearl Skins - vBulletin 4 & 5 Skins

          Comment

          • Sean James
            Senior Member
            • Apr 2004
            • 478

            #6
            Tried everything that I know off and it seems that you cannot change the background of the text editor... Great if your using white skins not too great when using dark skins. Why the developers cannot take the time to properly connect the stylevars and this new editor is beyond me.
            Bluepearl Skins - vBulletin 4 & 5 Skins

            Comment

            • ZeroHour
              Senior Member
              • Sep 2007
              • 167

              #7
              Griffin, based on what your editing that *should* work, can you sanity check by clearing your cache as I have seen a lot of browsers hold on to css changes.

              Comment

              • Sean James
                Senior Member
                • Apr 2004
                • 478

                #8
                Originally posted by ZeroHour
                Griffin, based on what your editing that *should* work, can you sanity check by clearing your cache as I have seen a lot of browsers hold on to css changes.
                Hey ZeroHour, thank you for your help.
                The only way to fix this problem is like you said by manually deleting your browsers cache. Once I did this the text editor was black like I wanted it.

                There seems to be a problem with caching or something as now when I change to a white skin the editor is black unless I delete the cache manually once again. Once I do this and then change back to a black skin the editor is then again white until I once again manually delete the cache lol. At least I know my CSS is working.
                Bluepearl Skins - vBulletin 4 & 5 Skins

                Comment

                • ZeroHour
                  Senior Member
                  • Sep 2007
                  • 167

                  #9
                  One trick would be to find where the css include is and add an &blahblah=4 onto the end, it means the browser will think its a different file and reload the css.

                  Comment

                  • Hidjra
                    Member
                    • Jan 2002
                    • 63
                    • 4.1.x

                    #10
                    These are the one i tried, and also works when you focus the textarea.

                    PHP Code:
                    .cke_skin_kama textarea.cke_source, .formcontrols .blockrow.texteditor textarea:focus{} 
                    It was'nt me, it was the one armed man

                    Comment

                    • Sean James
                      Senior Member
                      • Apr 2004
                      • 478

                      #11
                      Originally posted by ZeroHour
                      One trick would be to find where the css include is and add an &blahblah=4 onto the end, it means the browser will think its a different file and reload the css.
                      Thanks mate I might try this, this would probably be in the headinclude template.
                      Bluepearl Skins - vBulletin 4 & 5 Skins

                      Comment

                      • ZeroHour
                        Senior Member
                        • Sep 2007
                        • 167

                        #12
                        Originally posted by Griffin80
                        Thanks mate I might try this, this would probably be in the headinclude template.
                        If you setup a style replace value it could even make it easier but tbh once your css has expired I would remove the blahblah part just to keep things clean but it gets around the issue when tweaking.

                        Comment

                        • Rahstyles
                          Member
                          • Apr 2006
                          • 83
                          • 4.1.x

                          #13
                          1 question.. how do u manually clear the catch on ur browser?? Does this mean.. that u go into interent options then press delete?

                          Comment

                          • ZeroHour
                            Senior Member
                            • Sep 2007
                            • 167

                            #14
                            depends on os but generally holding ctrl or shift and hitting the refresh button should do it but internet options has a way to do it too.

                            Comment

                            • aileron
                              New Member
                              • Apr 2009
                              • 12
                              • 3.8.x

                              #15
                              Yesterday I figured out how to change the background of the editor (not the background of the text area). This is hardcoded (incredibly stupid...) in a file named clientscript/ckeditor/skins/kama/mainui.css. The CSS block to change starts at approx. line 27 and looks like this:
                              Code:
                               27 .cke_skin_kama .cke_wrapper
                               28 {
                               29         -moz-border-radius: 5px;
                               30         -webkit-border-radius: 5px;
                               31         border-radius: 5px;
                               32         background-color: #d3d3d3;
                               33         background-image: url(images/sprites.png); 
                               34         background-repeat: repeat-x;
                               35         background-position: 0 -1950px;
                               36         display: block;
                               37         /* IE Quirks: editor chrome overflow horizontally without an explicit width. */
                               38         _display: inline-block;
                               39         padding: 5px;
                               40
                               41         /*background-color: Red;*/
                               42 }
                              Just change the settings fot background-color and background-image, respectively, and you are done. However, I am still trying to figure out how to change the default font used in the editor...

                              Comment

                              Related Topics

                              Collapse

                              Working...