<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>
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
Yahoo!'s YUI 3: CSS Reset
http://validator.w3.org/unicorn/?ucn_lang=en
http://www.w3.org/StyleSheets/Core/Modernist