Override News Wysiwyg/tinyMCE styles with css !important

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
michaelm
New Member
New Member
Posts: 8
Joined: Tue Jul 26, 2011 1:26 pm
Location: Denmark

Override News Wysiwyg/tinyMCE styles with css !important

Post by michaelm »

I have some users that use a lot of formatting when writing summaries and content of news articles in the news module via the WYSIWYG editor. I want some places to use my own formatting to make things look alike and without strange background colors or fonts.
The WYSIWYG editor typicaly use <span> to format the tekst and this can be override using !important.
This I have done with the following css using the "!important".
You just wrap your summaries in your specific news template with a <div class =newssummary>.
You can also add other properties that you can see the tinyMCE or the users are using by adding it in the class list in the top fx. ".newssummary h1".
You properly want to add the css in your own css page or in the news css page:

Code: Select all

.newssummary, .newssummary p, .newssummary span, .newssummary strong{
color: #404040 !important;
font-size: 16px !important;
font-weight: normal !important;
line-height: 1.2em !important;
margin: 0 !important;
padding: 0 0 10px !important;
font-family: georgia,"times new roman",times,serif !important;
background-color: transparent !important;
}
Post Reply

Return to “Tips and Tricks”