FCK Editor Revisited – Adding a Custom Link Style

I’ve had a few questions/comments on using Custom Styles with FCK Editor, so here’s a style that I created that will format any link you apply it to as a red button that changes color on mouse over.

Add this CSS to the fck.css and portal.css files in you PORTALS folder.

/* Both variations --a.color-- and --span.color a--
    are needed to handle DNN's span applications
    not being consistent */

.red_button, a.red_button:link, a.red_button:visited,
 span.red_button a, span.red_button a:link,
 span.red_button a:visited {
        font-weight: bold;
	color: #FFF;
	padding:4px 8px;
	text-decoration: none;
	border-top: 1px solid #DFDFDF;
	border-left: 1px solid #DFDFDF;
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;

a:hover span.red_button,
span.red_button a:hover {
	border-top: 1px #31557f solid;
	border-left: 1px #31557f solid;
	border-bottom: 1px #666666 solid;
	border-right: 1px #666666 solid;

Be sure to add the following to the fck.xml file, to append the style to the menu in the FCK editor.

<Style name="red_button" element="span">
  <Attribute name="class" value="red_button" />

Hope this helps, post any questions in the comments.


  1. WOW! Thanks… So I got this to work on my own portal, but once I loaded it onto a client’s, all of the styles are getting overridden by the basic skin.css that belongs to the skin template that I’m using… (SOO Frustrating when it works on your own portal, and when you load it onto an exact clone, it doesn’t work)

    Any ideas on that one?

Leave a Reply

Your email address will not be published. Required fields are marked *