WordPress.org

Ready to get started?Download WordPress

Forums

Basic Comment Quicktags
[resolved] Why use editor.css? (5 posts)

  1. Aahan Krish
    Member
    Posted 2 years ago #

    The /wp-includes/css/editor.css is 48KB in size and except for a few KB everything is useless. Not that the size is huge or anything, is there a reason why we shouldn't get rid of it?

    The plugin also uses its own CSS file (quicktags.css), and all we need to do is add this at the top of the CSS file (code below pulled from editor.css):

    .quicktags-toolbar {
    	border-bottom: 1px solid #ccc;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	background-color: #e9e9e9;
    	background-image: -ms-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -moz-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -o-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -webkit-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: linear-gradient(bottom,#ddd,#e9e9e9);
    	padding: 2px 8px 0;
    	min-height: 29px
    }
    
    .quicktags-toolbar>div {
    	padding: 2px 4px 0
    }
    
    .quicktags-toolbar input {
    	margin: 2px 1px 4px;
    	line-height: 18px;
    	display: inline-block;
    	min-width: 26px;
    	padding: 2px 4px;
    	font: 12px/18px Arial,Helvetica,sans-serif normal;
    	color: #464646;
    	border: 1px solid #c3c3c3;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	background-color: #eee;
    	background-image: -ms-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -moz-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -o-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -webkit-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: linear-gradient(bottom,#e3e3e3,#fff)
    }
    
    .quicktags-toolbar input:hover {
    	border-color: #aaa;
    	background: #ddd
    }
    
    .quicktags-toolbar input[value="link"] {
    	text-decoration: underline
    }
    
    .quicktags-toolbar input[value="del"] {
    	text-decoration: line-through
    }
    
    .quicktags-toolbar input[value="i"] {
    	font-style: italic
    }
    
    .quicktags-toolbar input[value="b"] {
    	font-weight: bold
    }

    Or minified:

    .quicktags-toolbar{border-bottom:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#e9e9e9;background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9);background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9);background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9);background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9);background-image:linear-gradient(bottom,#ddd,#e9e9e9);padding:2px 8px 0;min-height:29px}.quicktags-toolbar>div{padding:2px 4px 0}.quicktags-toolbar input{margin:2px 1px 4px;line-height:18px;display:inline-block;min-width:26px;padding:2px 4px;font:12px/18px Arial,Helvetica,sans-serif normal;color:#464646;border:1px solid #c3c3c3;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#eee;background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff);background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff);background-image:-o-linear-gradient(bottom,#e3e3e3,#fff);background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff);background-image:linear-gradient(bottom,#e3e3e3,#fff)}.quicktags-toolbar input:hover{border-color:#aaa;background:#ddd}.quicktags-toolbar input[value="link"]{text-decoration:underline}.quicktags-toolbar input[value="del"]{text-decoration:line-through}.quicktags-toolbar input[value="i"]{font-style:italic}.quicktags-toolbar input[value="b"]{font-weight:bold}

    Consider this a question, and not a suggestion. Just wanted to know why.

    PS: Another reason is that the CSS in editor.css is effing old. It doesn't use border-radius and -moz-border-radius. I corrected these. And I don't know what else is wrong. Please lets drop editor.css and use our own unless there's a problem. :-(

    http://wordpress.org/extend/plugins/basic-comment-quicktags/

  2. Ipstenu (Mika Epstein)
    Half-Elf Support Rogue & Mod
    Plugin Author

    Posted 2 years ago #

    I will test that today and if it works everywhere, impliment it tonight!

    That is a brilliant idea!

    ETA: Since I don't have all the code in there, like del and so on, I'll drop those too to make it even smallers.

  3. Aahan Krish
    Member
    Posted 2 years ago #

    Mika,

    I've already done the test on IE8,9 and latest versions of all other browsers (FF, Chrome, Opera, Safari). But need we check? I mean, it's the same exact code from editor.css except that I added two rules that were missing (border-radius and -moz-border-radius).

    Anyway, I removed the css for del button for ya :)

    .quicktags-toolbar {
    	border-bottom: 1px solid #ccc;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	background-color: #e9e9e9;
    	background-image: -ms-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -moz-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -o-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: -webkit-linear-gradient(bottom,#ddd,#e9e9e9);
    	background-image: linear-gradient(bottom,#ddd,#e9e9e9);
    	padding: 2px 8px 0;
    	min-height: 29px
    }
    
    .quicktags-toolbar>div {
    	padding: 2px 4px 0
    }
    
    .quicktags-toolbar input {
    	margin: 2px 1px 4px;
    	line-height: 18px;
    	display: inline-block;
    	min-width: 26px;
    	padding: 2px 4px;
    	font: 12px/18px Arial,Helvetica,sans-serif normal;
    	color: #464646;
    	border: 1px solid #c3c3c3;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	background-color: #eee;
    	background-image: -ms-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -moz-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -o-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: -webkit-linear-gradient(bottom,#e3e3e3,#fff);
    	background-image: linear-gradient(bottom,#e3e3e3,#fff)
    }
    
    .quicktags-toolbar input:hover {
    	border-color: #aaa;
    	background: #ddd
    }
    
    .quicktags-toolbar input[value="link"] {
    	text-decoration: underline
    }
    
    .quicktags-toolbar input[value="i"] {
    	font-style: italic
    }
    
    .quicktags-toolbar input[value="b"] {
    	font-weight: bold
    }
  4. Ipstenu (Mika Epstein)
    Half-Elf Support Rogue & Mod
    Plugin Author

    Posted 2 years ago #

    I always test :D

    I just (last night) made a tweak to get this working on P2, so I wanted to make sure I don't break that or bbPress. Looks solid. I'll check the code in pretty soon (and you get a credit line, my man!).

  5. Aahan Krish
    Member
    Posted 2 years ago #

    Ah, pleasure ;-P

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic