PluXml 5.6 / CKEditor 4.7.3 modification to get more handy

Written by pmd - - no comments

PluXml 5.6 / CKEditor 4.7.3 modification to get handy code <div>

I modified the file /plugins/ckeditor/ckeditor/styles.js to have a much more easier way to put code in my memo.

Before:

    {
        name: 'Special Container',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc'
        }
    },

After:

    {
        name: 'Special Container',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc',
            'white-space': 'nowrap',
            'overflow': 'auto',
            'font-family': 'monospace, monospace',
            'font-size': '0.9rem'
        }
    },

Modification to get better visual when using <kbd>

In PluxXML Administration > Parameters > Themes > Edit Theme files > /css/plucss.css I have set this for <kbd> HTML tag.

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
   }
  • Before : CTRL + ALT + DEL
  • After : CTRL + ALT + DEL

CSS source

Rss feed of the tag