Announcement

Collapse
No announcement yet.

More on CKE styling using CSS.

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    More on CKE styling using CSS.

    See also,
    http://vbmods.rocks/forum/vbulletin-...ur-in-ckeditor
    http://vbmods.rocks/forum/vbulletin-...in-vbulletin-5

    Add to css_additional.
    This has been tested on vB5.2.4

    Code:
    /* ----------------- Start CKE Changes ----------------- */
    
    /* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
    Search for cke_wysiwyg_frame, around line 1087
    Find allowTransparency:"true"
    and change it to allowTransparency:"false"
    Save.  You will need to do this with every upgrade.
    NOW, you can change values using CSS below. */
    
    
    /* Start Change Editor Background */
    .cke_WYSIWYG_frame.cke_reset {
        Background-color: #202020;
    }
    
    .b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
        background: #202020;
    }
    /* End Change Editor Background */
    
    /* Start Change Editor Toolbar Background */
    .b-editor .cke_top {
        background: #404040 none 0 0;
    }
    /* End Change Editor Toolbar Background */
    
    /* Start CKE Content Panel */
    .b-content-entry-panel--autosave {
        background-color: #222432;
    }
    /* End CKE Content Panel */
    
    /* Start CKE text */
    body {
        font: 13px 'Noto Sans',sans-serif;
        color: #919ced;
    }
    /* End CKE text */
    
    /* ----------------- END CKE Changes ----------------- */
    Click image for larger version

Name:	CKE524.jpg
Views:	1
Size:	41.7 KB
ID:	1749

    #2
    More progress has been made. Sure would be nice if we could edit our own posts...

    I now have control over most of the CKE elements users would want to change via CSS.
    It was a little challenging as vB5.2.x has added new CLASS ID's and I didn't want separate codes for ever version.
    The code below has been tested upon vB5.1.2, 5.1.9, 5.2.2 and 5.2.4
    The results differ slightly, but it all works as expected.

    Code:
    /* ----------------- Start CKE Changes ----------------- */
    
    /* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
    Search for cke_wysiwyg_frame, around line 1087
    Find allowTransparency:"true"
    and change it to allowTransparency:"false"
    Save.  You will need to do this with every upgrade.
    NOW, you can change values using CSS below. */
    
    
    
    /* Start Advance Editor is Default */
    .b-editor--cke-toolbar-is-hidden .cke_top {
    display: inline-block;
    }
    /* End Advance Editor is Default */
    
    /* Start CKEditor Font Override */
    @font-face {
        font-family: 'Orbitron';
        font-style: normal;
        font-weight: 700;
        src: local('Orbitron-Bold'), url(/Orbitron.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
        }
    /* End CKEditor Font Override */
    
    
    /* Start Change Editor Background */
    .cke_WYSIWYG_frame.cke_reset {
        Background-color: #202020;
    }
    
    .b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
        background: #202020;
    }
    /* End Change Editor Background */
    
    /* Start Change Editor Toolbar Background */
    .b-editor .cke_top {
        background: #404040 none 0 0;
    }
    /* End Change Editor Toolbar Background */
    
    /* Start CKE Content Panel */
    .b-content-entry-panel--autosave {
        background-color: #222432;
    }
    /* End CKE Content Panel */
    
    /* Start CKE text */
    body {
        font: 13px 'Noto Sans',sans-serif;
        color: #919ced;
    }
    /* End CKE text */
    
    /* Start CKE buttons background */
    /* Reccomended for dark theme and inverted JS/ckeditor/skins/moono/icons.png set. */
    .cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
        background: rgba(17, 3, 36, 0.9);
    }
    .cke_toolgroup {
        background: #695995;
        background-image: linear-gradient(to bottom,#782ed4,#0f021b) !important;
    }
    /* End CKE buttons background */
    
    
    /* Start open Editor colour */
    .b-editor {
        background: #0B090F;
    }
    /* End open Editor colour */
    
    /* Start Resize bar */
    .b-editor .cke_bottom {
        background: #380E80;
    }
    /* End Resize bar */
    
    
    /* ----------------- END CKE Changes ----------------- */
    Click image for larger version

Name:	Clipboard01.jpg
Views:	1
Size:	33.0 KB
ID:	1768

    Comment


      #3
      Works on 5.2.4 . Tested

      Comment


        #4
        Another small addition. Hover over effect.
        Should work on all vB5.1.x-5.2.x

        Code:
        /* Hover */
        a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active {
            background-image: -moz-linear-gradient(top,#984ef4,#2f123b) !important;
        }
        Click image for larger version

Name:	Clipboard01.jpg
Views:	1
Size:	51.5 KB
ID:	1771

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Why for Firefox only?

        #5
        Because it was 4am and I forgot to remove portion of the testing code I was using on various browsers :P
        And because I can't edit my own posts

        But you are correct, that does not have to be FF only. It was just for testing.

        This is the present code, tested on vB5.1.x-5.2.4-
        Code:
        /* ----------------- Start CKE Changes ----------------- */
        
        /* In order to change the CKEditor colours, you must first edit /root/JS/ckeditor-rollup-5xx.js
        Search for cke_wysiwyg_frame, around line 1087
        Find allowTransparency:"true"
        and change it to allowTransparency:"false"
        Save.  You will need to do this with every upgrade.
        NOW, you can change values using CSS below. */
        
        
        
        /* Start Advance Editor is Default */
        .b-editor--cke-toolbar-is-hidden .cke_top {
        display: inline-block;
        }
        /* End Advance Editor is Default */
        
        /* Start CKEditor Font Override */
        @font-face {
            font-family: 'Orbitron';
            font-style: normal;
            font-weight: 700;
            src: local('Orbitron-Bold'), url(/Orbitron.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
            }
        /* End CKEditor Font Override */
        
        
        /* Start Change Editor Background */
        .cke_WYSIWYG_frame.cke_reset {
            Background-color: #202020;
        }
        
        .b-editor .cke_wysiwyg_frame, .b-editor .cke_wysiwyg_div {
            background: #202020;
        }
        /* End Change Editor Background */
        
        /* Start Change Editor Toolbar Background */
        .b-editor .cke_top {
            background: #404040 none 0 0;
        }
        /* End Change Editor Toolbar Background */
        
        /* Start CKE Content Panel */
        .b-content-entry-panel--autosave {
            background-color: #222432;
        }
        /* End CKE Content Panel */
        
        /* Start CKE text */
        body {
            font: 13px 'Noto Sans',sans-serif;
            color: #919ced;
        }
        /* End CKE text */
        
        /* Start CKE buttons background */
        /* Reccomended for dark theme and inverted JS/ckeditor/skins/moono/icons.png set. */
        .cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
            background: none;
        }
        .cke_toolbar {
            background-image: linear-gradient(to bottom,#202020,#020202) !important;
        }
        span[class*="cke_toolgroup"] {
            background-image: linear-gradient(to bottom,#1024c6,#03020b);
        }
        /* End CKE buttons background */
        
        /* Start Button Hover */
        a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active {
            background-image: linear-gradient(to bottom,#2cbfcb,#1b275d) !important;
        }
        /* End Button Hover */
        
        /* Start open Editor colour */
        .b-editor {
            background: #0B090F;
        }
        /* End open Editor colour */
        
        /* Start Resize bar */
        .b-editor .cke_bottom {
            background: #03021b;
        }
        /* End Resize bar */
        
        
        /* ----------------- END CKE Changes ----------------- */
        Last edited by Felix2; 10-25-2016, 07:43 AM.

        Comment


          #6
          Been playing about with this one to suit my needs until moono-dark is avaiable hopefully on the next release of vb5.4.2 .
          The top bit of the code that changes the background color to dark grey or black is not needed in this version of 5.4.2 alpha as it can now be changed with the new global pallette stylevars none the less i used parts of this code that i needed the result can be seen below.
          Click image for larger version

Name:	2018-05-03_02-39-29.png
Views:	1
Size:	16.0 KB
ID:	10774
          Wise men say nothing Fools never listen

          Comment

          Working...
          X