3

Currently when you add a new HTML formatting button it simply outputs as the tag name as text within a box. I am looking to replace this text with an image much like the native HTML formatting button such as bold, strike-through, italics etc... Is there a way of doing this - the EE documentation simply states:

The custom HTML buttons are powered by the jQuery library MarkItUp. Because of this, some powerful customization is possible in the “opening tag” field. If you wish to take advantage of this syntax, more information can be found on within the MarkItUp documentation, and particularly under the section on Magic Markup. http://ellislab.com/expressionengine/user-guide/cp/admin/default_html_buttons.html#advanced-customization

1

I haven't used this myself but it sort of seems this is just handled in the CSS by setting a background image. If you inspect the new tag code, is there a css class you can key off to style it in the CSS? Something like....

.html .markItUpButton1 a {
    background-image:url(images/h1.png);
}
| improve this answer | |
  • 1
    Many thanks. I have taken a better look now and css is indeed the way to go. It isn't quite that simple as applying a background image to each button though as each button does not have a unique identifier but rather the button set is contained in a div with id like markItUpField_id_4 as an unordered list. I have however from your suggestion managed to do some rudimentary styling, which fits my needs just targeting this entire list. – Gareth Davies Dec 21 '12 at 15:42
  • Perfect. Click the checkmark to to the left of my answer if you want to mark it correct. – Anna_MediaGirl Dec 21 '12 at 16:36
2

It appears that EE does assign classes to custom buttons, so for example an aside button has the class .btn_aside. You should be able to apply the default editor button CSS (see below) with a few tweaks to achieve what you're after.

background: transparent url(../images/your_button.png) no-repeat;
text-indent: -10000px;
border: 0!important;
width: 19px;

If you're looking for a quick and simple way of applying CSS within the control panel then the CP CSS extension should do the trick.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.