Announcement

Collapse
No announcement yet.

background color for new editor

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

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

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

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

    Comment


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


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

        Comment


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

          Comment


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


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


              • #8
                Originally posted by ZeroHour View Post
                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


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


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


                    • #11
                      Originally posted by ZeroHour View Post
                      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


                      • #12
                        Originally posted by Griffin80 View Post
                        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


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


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


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