Hi.
I am having problems with applying CSS styles (in a consistent manner) on the content loaded in CKEDITOR.
The following is the main page that applies the same CSS that I use for CKEDITOR.
When I try to load a div of the page in the CKEDITOR it applies some of the styles but misses quite a few e.g. background color of the div. Here is the div content loaded in CKEDITOR (notice how the background color of the DIV has not been applied inside CKEDITOR).
Here is the HTML and CSS code of the page:
<html xmlns="http://www.w3.org/1999/xhtml" dir='ltr' xml:lang='en' lang='en'>
<head>
<style type="text/css">
/* ------------- "generic" styles */
body {
margin: 0; padding: 0;
background: #E3EDC2 url(/myhome/assets/images/page_background.jpg);
color: #333;
font: 0.75em "Lucida Grande", Arial, sans-serif;
}
div#formButtons {
margin:1% 33% 0 33%;
}
#container_site
{
position:relative;
background-color:#E3EDC2;
width: 770px; /* sets the content width */
min-width:350px;
margin:0 auto; /* no top/bottom margin, centered horizontally */
/*overflow:hidden;*/
}
span#errormsg
{
display:block;
margin:0 auto 0 5em;
}
.error
{
margin-right: 3em;
border:1px red solid;
background:#ffffcc url(images/error.gif) no-repeat top left;
color:#dd0000;
font-style: italic;
clear:both;
}
a {
text-decoration: none;
}
a img {
border: 0;
}
p {
margin: 0 0 1em;
}
/* ------------- header styles */
#header {
margin:0;
padding:0;
background-color: inherit;
/*background: #ABD240;*/
}
#homelink {
display: inline;
margin:0;
}
#lang {
padding: 0 2em 0 0;
margin:-1.66em 0 0 0;
text-align: right;
}
#lang a{
font-family: "Trebuchet MS", sans-serif;
color: #000;
text-decoration:underline;
font-size: 1em;
}
#lang a#default{
color: #666;
}
/* ------------- main column styles */
#tabs {
padding:0;
margin:0;
font:inherit;
background-color:inherit;
border-bottom:0;
/*overflow:hidden;*/
}
div#tabs ul{
padding:0;
margin:0;
}
#leftCol {
float: left;
margin:0.33em 0 0 0;
padding: 0 20em 4em 3em;
}
#leftCol h1 {
margin: 0 33% 1.25em -2em; padding: 0.25em 2em;
background: #FFF; color: #686397;
font-size: 1.5em;
}
#leftCol h1 b {
color: #B0D742;
}
#leftCol h2 {
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #B0D742;
font-size: 1.5em;
}
#leftCol img.illus {
float: left;
margin: 1em 1em 1em 0;
}
/* ------------- sidebar styles */
#rightCol {
float: left;
width: 17em;
margin: 0.33em 0 4em -18em;
}
#rightCol div h3 {
background: #9B96CA;
}
#rightCol div {
background: #3A3C2D; color: #FFF;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#rightCol div h3 {
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
/*text-transform: lowercase;*/
}
p.content {
font-size:1em;
}
ul.content
{
list-style:none;
font-size:1.5em;
}
/* creates rounded edge box */
div#searchBox {
width:220px;
height:30px;
float:left;
margin:1.5ex 0 auto 12em;
}
form#search .text
{
background: #FFF url(/myhome//assets/images/search_mini.gif) 100% 100% no-repeat;
color:#333;
vertical-align:middle;
font-family:Verdana,Arial,"Times New Roman",sans-serif;
font-size:0.7em;
font-weight:bold;
padding-left:1em;
width:16em;
height:4ex;
border:none;
text-align:left;
}
#imgSearch
{
margin:0;
padding:0;
vertical-align:middle;
}
.topBar
{
position:relative; /* to qualify as a container div */
background-color: #024472;
/*background: #E3EDC2 url(../images/page_background.jpg);*/
margin:0;
padding:0;
height:4em;
}
div#topBarLinks
{
float:left;
padding:0;
font-family: "Trebuchet MS", sans-serif;
font-size: .9em;
font-weight:bold;
color:#fff;
margin:2.5em 0 0 2em;
}
div#today
{
float:right;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#FFF;
margin:2.75ex 1em 0;
}
#topBarLinks a:link, a:visited
{
color:#fff;
text-decoration:none;
}
#topBarLinks a:hover, a:active
{
color:#ccc;
}
#slideShow
{
text-align:center;
padding:0 0 1em 0;
}
#todayNews h4 {
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #FFF;
font-weight: normal;
}
#todayNews p:first-line {
font-style: italic;
}
#todayNews img {
display: block;
margin: 2em auto 0;
}
#post-archive table {
margin: 0 auto;
font-size: smaller;
}
#post-archive caption {
margin: 1em auto 0;
font-size: larger;
font-weight: bold;
}
#post-archive td {
padding: 0;
border: 1px solid #787A6B;
background: #5B5D4E; color: #222;
text-align: center;
}
#post-archive table a {
display: block;
font-weight: bold;
color: #FFF;
}
#post-archive table a:hover {
background: #ABD240;
}
/* ===== footer ===== */
div#footer {
clear: both;
background: #E3EDC2 url(/myhome/assets/images/page_background.jpg);
padding: 5px;
}
#footer p {
font-family: "Trebuchet MS", sans-serif;
font-size: .9em;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#footer a {
color: #000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container_site">
<div class="topBar">
<div id="topBarLinks">
<a href="/myhome/home">Home page</a> | <a href="/myhome/home/changebody/help/en">Help</a> | <a href="/myhome/home/changebody/faq/en">FAQ</a>
</div>
<div id='searchBox'>
<form id="search" action="#" method="post">
<input type="text" class="text" value="Search site..."/>
<a href="#">
<img id="imgSearch" src="/myhome/assets/images/search2.gif" alt="search" />
</a>
</form>
</div>
<div id="today"><script type="text/javascript">dispDate();</script></div>
</div>
<div id="header">
<a href="#" id="homelink">
<img src="/myhome/assets/images/images/banner_en.jpg" width="100%" height="80" alt="My Company Logo" />
</a>
</div>
<div id="tabs">
<ul><li><a href='#tabs-1'>Home</a></li><li><a href='#tabs-2'>About us</a></li><li><a href='#tabs-3'>Activities</a></li><li><a href='#tabs-4'>Events</a></li><li><a href='#tabs-5'>Gallery</a></li><li><a href='#tabs-6'>Contact us</a></li></ul>
<p id="lang"><a id="default" href="/myhome/home/lang/en">en</a> |
<a href="/myhome/home/lang/ar">ar</a> </p>
<div id='tabs-1'> <div id="leftCol">
<h1>
<b>home: </b>background</h1>
<h2>
Welcome To DiversityHouse UK</h2>
<p>
This house caters for the community's cultural, social and sports needs. Our aim is to bring together the diverse community, as well as those who are interested in cosmopolitan culture by offering outdoor and indoor activities and social events. <span style="color:#8b4513;"><strong><em>If you require any further information</em></strong></span>, please send us an email and we will respond to you as soon as we can. <img alt="Tea pot" class="illus" height="140" src="/myhome/assets/images/teapot.jpg" width="96" /> We hope that we can bring together members of the diverse community from diverse cities in the UK for a friendly gathering in london. This will include festive occasions and the National and Public holidays....</p>
</div>
<div id="rightCol">
<!--<div id="loginBox">
<form id="login" action="#" method="post">
<fieldset>
<legend align="left">Login</legend><p/>
<label for="userId">User name:</label> <input type="text" id="userId"/><br/>
<label id="pwd">password:</label> <input type="text" id="pwd"/><br/>
<input type="submit" value="Go"/>
</fieldset>
</form>
</div>-->
<div id="todayNews">
<h3>
Today’s Announcement</h3>
<h4>
Breaking the ice...</h4>
<p class="content">
You are invited to an exotic dinner this Friday to meet other members of the cosmopolitan community. The atmosphere will be great and we <strong><span style="color: rgb(0, 128, 0);">look </span></strong>forward to seeing you.</p>
<p>
<img alt="Couscous" height="120" src="/myhome/assets/images/couscous.jpg" width="160" /></p> </div>
<div id="post-archive">
<h3>
Post Archive</h3>
<table cellspacing="2">
<caption>
April 2010</caption>
<thead>
<tr>
<th class="sun" scope="col">
Sun</th>
<th class="mon" scope="col">
Mon</th>
<th class="tue" scope="col">
Tue</th>
<th class="wed" scope="col">
Wed</th>
<th class="thu" scope="col">
Thu</th>
<th class="fri" scope="col">
Fri</th>
<th class="sat" scope="col">
Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sun">
</td>
<td class="mon">
</td>
<td class="tue">
</td>
<td class="wed">
</td>
<td class="thu">
</td>
<td class="fri">
</td>
<td class="sat">
1</td>
</tr>
<tr>
<td class="sun">
2</td>
<td class="mon">
3</td>
<td class="tue">
4</td>
<td class="wed">
5</td>
<td class="thu">
6</td>
<td class="fri">
<a href="#">7</a></td>
<td class="sat">
8</td>
</tr>
<tr>
<td class="sun">
9</td>
<td class="mon">
10</td>
<td class="tue">
<a href="#">11</a></td>
<td class="wed">
12</td>
<td class="thu">
13</td>
<td class="fri">
14</td>
<td class="sat">
15</td>
</tr>
<tr>
<td class="sun">
16</td>
<td class="mon">
17</td>
<td class="tue">
18</td>
<td class="wed">
19</td>
<td class="thu">
<a href="#">20</a></td>
<td class="fri">
<a href="#">21</a></td>
<td class="sat">
22</td>
</tr>
<tr>
<td class="sun">
23</td>
<td class="mon">
<a href="#">24</a></td>
<td class="tue">
25</td>
<td class="wed">
<a href="#">26</a></td>
<td class="thu">
27</td>
<td class="fri">
28</td>
<td class="sat">
29</td>
</tr>
<tr>
<td class="sun">
30</td>
<td class="mon">
31</td>
<td class="tue">
</td>
<td class="wed">
</td>
<td class="thu">
</td>
<td class="fri">
</td>
<td class="sat">
</td>
</tr>
</tbody>
</table> </div>
</div>
</div>
</div> <!-- tabs -->
<div id="footer">
<p>
Site design by <em>Freelance Academic Consultants</em>. Copyright © 2010.
<a href="#">Privacy Policy</a> |
<a href="#">Terms and Conditions</a>
</p>
</div>
</div>
</body>
</html>
As you can see the CSS works fine in the browser (e.g. background color of divs, etc.) but not when the content is loaded in CKEDITOR
Re: CKEDITOR CSS styles
Don't use in-line styles, use a separate css stylesheet. Then you can use :
replace contents.css with the name of your stylesheet and add it's path to the editor. IIRC.
Thanks,
Zanpakutō
Re: CKEDITOR CSS styles
Any other suggestions?
Re: CKEDITOR CSS styles
Are you doing a CSS reset in your included stylesheet?
Does the editor contain exactly the same markup as your first image?
Do you have any javascript applying css attributes in your theme which do not get applied inside the editor?
Is your CSS valid? Is your XHTML valid?
Would it not be simpler to just create a contents.css specifically for page editing, which uses the core styles of your stylesheet; than load the actual stylesheet for your template? IE, just set the body to that green colour and style the other html attributes lightly, etc. Core styles.
The basics really.
Thanks,
Zanpakutō
Re: CKEDITOR CSS styles
I am not sure what you mean with a CSS reset?
My markup and CSS is valid (tested with Dreamweaver and other apps). There is no javascript code affecting the CSS.
That was in my initial plan. The only problem is that it makes my editing less dynamic. Let me explain, if a user changes the CSS styles, I will have to manually replicate the changes again in the content.css file (your suggestion). I just want to give the users the freedom and a autonomy to code independently without my interference.
Thanks,
Zanpakutō[/quote]
Re: CKEDITOR CSS styles
It's a technique which professional web developers use to try as best as possible to put them on a level 'playing field' when styling a web site template that must be cross browser compatible.
Example : Yahoo!'s YUI 3: CSS Reset
That doesn't fill me with any confidence at all. Dreamweaver is not a validator and I'd be interested to know the names of some of these other apps, just out of curiosity.
http://validator.w3.org/unicorn/?ucn_lang=en is a validator.
You can easily switch stylesheets if the user changes it by using a variable for the stylesheet name and location.
My honest advice is make it work first. Then try to pander to the whims of others if you so wish.
Use a stylesheet named core.css for every template and make that file a mandatory requirement to using your CKEditor implementation.
Use core.css for core styles only. You shouldn't need to load the stylesheet for the entire site into CKEditor anyway, unless you really must load the entire page into CKEditor.
Here is an example of a core sytlesheet :
http://www.w3.org/StyleSheets/Core/Modernist
It applies styles to the core elements normally found on your average html page and covers the majority of elements. It doesn't effect any specific selectors.
What you are trying to do is load one section of an entire page into CKEditor (A textarea or a div tag) and expect it to apply the markup of your entire site inside the editor. It will not do this unless you load the entire page and not just one section of it inside the editor with it's stylesheets instead.
Look at the layout of your site's entire document in your web browser's source view and then switch to CKEditor's source mode to see the difference in the markup.
Thanks,
Zanpakutō