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;
font-size:10px;
color: #FFF;
background-color:#C00;
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 {
background-color:#900;
border-top: 1px #31557f solid;
border-left: 1px #31557f solid;
border-bottom: 1px #666666 solid;
border-right: 1px #666666 solid;
text-decoration:none
}
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" /> </Style>
Hope this helps, post any questions in the comments.
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?
Make sure you use steps #7 – #12 at
http://www.allaboutduncan.com/index.php/2007/using-a-custom-css-file-in-dotnetnuke-for-fck-editor/
If the styles still don’t show are being change by another style sheet, there must be a conflicting selector in your CSS. Try changing the name of your custom styles. Since DotNetNuke applies most styles using a <span> tag, it can easily overlap styles.