Integrating Styles in the Editor
By creating an additional stylesheet with your basic styles, they will be available and used within the WYSIWYG editor.
CKEditor will attempt to load a style sheet from the /themes/mythemename/editors/ckeditor/ folder. For a basic theme, the style sheet must be named ckeditor.css, but the folder may also contain additional stylesheets based on any theme style variations using the same style variation naming scheme.
This editor style sheet only needs to contain the styling for the basic tags. It MUST begin with a specific style to prevent the drop-down lists in CKEditor from picking up a background color
.cke_panel_frame {background:white;}
TinyMCE will attempt to load a style sheet named tinymce.css (or with the style variation naming) from the /themes/mythemename/editors/tinymce/ folder.
If you 'import' a stylesheet, in addition to all imports being placed at the beginning of the stylesheet, you'll need to use an accurate (hard-coded) absolute (and not relative) pathname.
@import url('/external/bootstrap3/css/bootstrap.css');
@import url('/themes/bootstrap3theme/css/bootstraptheme.css');
The basic colors,etc should be placed in the 'body' style, however, you'll probably find these inside a div, id, or class style in your theme style sheets as the 'body' style is usually the outside border/background for the site. Other tags should include a, h1, etc...
.cke_panel_frame {background:white;}
body {
background:#fff;
}
a:link,
a:visited {
color:#c07f00;
}
a:hover,
a:focus,
a:active {
color:#ffbb55;
}
h1 {
/*18px via YUI Fonts CSS foundation*/
font-size:138.5%;
}
h2 {
/*16px via YUI Fonts CSS foundation*/
font-size:123.1%;
}
h3 {
/*14px via YUI Fonts CSS foundation*/
font-size:108%;
}
h1,h2,h3 {
/* top & bottom margin based on font size */
margin:1em 0;
font-family: 'Oswald', serif;
}
h1,h2,h3,h4,h5,h6,strong {
/*bringing boldness back to headers and the strong element*/
font-weight:bold;
}
abbr,acronym {
/*indicating to users that more info is available */
border-bottom:1px dotted #000;
cursor:help;
}
em {
/*bringing italics back to the em element*/
font-style:italic;
}
blockquote,ul,ol,dl {
/*giving blockquotes and lists room to breath*/
margin:1em;
}
ol,ul,dl {
/*bringing lists on to the page with breathing room */
margin-left:2em;
}
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
/*providing spacing for definition terms*/
margin-left:1em;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #000;
padding:.5em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
caption {
/*coordinated margin to match cell's padding*/
margin-bottom:.5em;
/*centered so it doesn't blend in to other content*/
text-align:center;
}
p,fieldset,table,pre {
/*so things don't run into each other*/
margin-bottom:1em;
}