Override News Wysiwyg/tinyMCE styles with css !important
Posted: Thu Feb 14, 2013 7:56 am
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:
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;
}