CSS3 buttons and EPiServer editor stylesheet
Posted on May 8, 2011 by Frederik Vig in EPiServerYou’ve probably seen them around, the cool new CSS3 styled buttons. Before you had to use images and image replacement to achieve a similar effect. Now you can do this without images and by only using CSS. The cool thing about this is that it makes it so much easier to use on our sites. We can easily add these buttons to the editor stylesheet and let our editors choose from the different action buttons that they are allowed to use.
Here is a button that we can use in three different colors. As you can see the only change needed is the additional HTML class.
<p><a href="#" class="action-button blue">Blue button</a></p> <p><a href="#" class="action-button green">Green button</a></p> <p><a href="#" class="action-button orange">Orange button</a></p> |
The CSS code looks like this:
.action-button, .action-button:visited { display: inline-block; padding: 5px 10px; color: #fff; text-decoration: none; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .action-button.green, .action-button.green:visited { background-color: #99c70a; } .action-button.green:hover { background-color: #6f9302; } .action-button.blue, .action-button.blue:visited { background-color: #22adbf; } .action-button.blue:hover { background-color: #017691; } .action-button.orange, .action-button.orange:visited { background-color: #ff5c00; } .action-button.orange:hover { background-color: #d45500; } |
To make it work in Internet Explorer as well we can use CSS3 PIE.
We can easily add these three buttons to the editor stylesheet so that our editors can pick them from the styles drop down list in TinyMCE.
.action-button, .action-button:visited { display: inline-block; padding: 5px 10px; color: #fff; text-decoration: none; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .action-button.green { EditMenuTitle: Buttons; EditMenuName: Green; background-color: #99c70a; } .action-button.blue { EditMenuName: Blue; background-color: #22adbf; } .action-button.orange { EditMenuName: Orange; background-color: #ff5c00; } |
You can set the path to your editor stylesheet in episerver.config, under site settings and uiEditorCssPaths or by adding a dynamic property with the name UIEditorCssPaths.
This will add the options green, blue and orange to the style drop down list, grouped under the Buttons title:
We can now select any link and apply the button look to it. The result:
Pretty cool huh?
Rachel says:
Post Author August 12, 2011 at 01:43I’m trying something similar to this. But when I apply the style it applies a comma seperated list. So I get class=”list,overflow” in my output instead of “list overflow”. Also it doesn’t recognise more than two. In my instance the html has three layers and I need to output class=”layout overflow which” and for this I used .layout.overflow.which but it never picks up the third style.
Jonas says:
Post Author November 30, 2011 at 18:06Have you successfully used CSS3 PIE – the behavior-version (.htc) in an EPiServer-solution?
I made the front-end in a ruby-environment, and when using the same front-end, the same paths, even tried the Application_BeginRequest stuff to serve the .htc that way it doesn’t work, but I can get the .htc from any possible sub directory…
I have to identify every instance of behavior and add corresponding calls for the rules using PIE.js, and that’s not equally nice…
I managed to do this in a DotNetNuke-site – I can not see why I can’t get it working in EPiServer…
Can you please clarify your PIE-solution!?
Frederik Vig says:
Post Author November 30, 2011 at 23:27I´ve used it in the past without problems. What problems do have? Maybe you need to register the mime type in IIS?
Frederik