Carolg:
teejay was right that you have to check the file: cms/css/editor.css
I am not sure why this is but it looks like that css file was left empty. I believe perhaps it was not in the past. You can create custom styles in there and will show in the style drop down in the CMS. You can also copy over the main classes (i.e. .right) and it will allow the CMS to pick up these styles so they are represented in the administration pages also.
Hope this helps! Below is what I have in there. some of it is specific to my site.
/**
* Default Editor Styles for the CMS
*/
.mceItemFlash {
border: 1px dotted #f00;
}
body.mceContentBody {
min-height: 200px;
font-size: 62.5%;
}
/*
body.mceContentBody a.broken {
background-color: #FF7B71;
border: 1px red solid;
color: #fff;
padding: 1px;
text-decoration: underline;
}
*/
/**
* SilverStripe Black Candy Theme
* http://www.silverstripe.com
*
* This typography file is included in the WYSIWYG editor and the front end. It provides
* a place to add link styles and font styles you would like in the CMS and the Front End.
*/
/* GENERIC STYLES
-------------------------------------------- */
* {
font-family: Verdana, Lucida, Arial, sans-serif;
}
/* PARAGRAPHS
-------------------------------------------- */
p {
color: #333;
line-height: 18px;
font-size: 11px;
margin: 0 0 18px 0;
text-align:justify;
}
/* QUOTES
-------------------------------------------- */
blockquote {
margin: 10px;
font-size: 1.4em;
color: #777;
font-style: italic;
}
q {
display:block;
font-size: 0.8em;
margin: 1em 1em;
padding: 0.5em;
border: 1px #ccc solid;
}
/* LINKS
-------------------------------------------- */
a {
text-decoration: underline;
color: #666;
}
a:hover {
text-decoration: none;
}
/* LINK ICONS - shows type of file
------------------------------------ */
a[href$=".pdf"],
a[href$=".PDF"],
a.pdf {
padding: 2px;
padding-left: 20px;
background: url(../images/icons/page_white_acrobat.png) no-repeat left center;
}
a[href$=".doc"],
a[href$=".DOC"],
a.doc {
padding: 2px;
padding-left: 20px;
background: url(../images/icons/page_word.png) no-repeat left center;
}
a[href$=".xls"],
a[href$=".XLS"],
a.xls {
padding: 2px;
padding-left: 20px;
background: url(../images/icons/page_excel.png) no-repeat left center;
}
a[href$=".gz"],
a[href$=".GZ"],
a[href$=".gzip"],
a[href$=".GZIP"],
a[href$=".zip"],
a[href$=".ZIP"],
a.archive {
padding: 2px;
padding-left: 20px;
background: url(../images/icons/page_white_zip.png) no-repeat left center;
}
a[href$=".exe"],
a[href$=".EXE"],
a.application {
padding: 2px;
padding-left: 20px;
background: url(../images/icons/application.png) no-repeat left center;
}
/* LIST STYLES
-------------------------------------------- */
ul,
ol {
margin: 18px 0 18px 24px;
color: #333;
}
ol li {
margin-top:10px;
}
+ ul {
list-style-image:url(../images/bulletRTGrey.gif);
}
li {
margin: 5px 10px;
font-size: 11px;
list-style-image:url(../images/bulletRTGrey.gif);
}
li li {
font-size: 10px;
}
/* HEADER STYLES
-------------------------------------------- */
h1,
h2 {
color: #74251b;
margin: 0 0 18px 0;
font-weight: 300;
font-family: Verdana, Lucida, Arial, sans-serif;
}
h1 a,
h2 a{
font-family: Verdana, Lucida, Arial, sans-serif;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h2.blogTitleHeader,
h2.blogTitleHeader a{
font-size:16px;
color:#74251b;
font-family: Verdana, Lucida, Arial, sans-serif;
}
h3 {
color: #222;
margin: 0 0 18px 0;
font-weight: 300;
font-size: 18px;
}
h4 {
font-size: 16px;
color: #222;
width: 95%;
font-weight: 300;
line-height: 18px;
border-bottom: 1px solid #ccc;
margin: 0 0 16px 0;
}
h5 {
font-size: 14px;
color: #222;
font-weight: 700;
margin: 0 0 12px 0;
}
h6 {
font-size: 13px;
color: #555;
line-height: 1.4em;
margin: 0 0 12px 0;
}
/* PRE STYLES
-------------------------------------------- */
pre {
font-family:"Courier New",Courier;
display:block;
font-size:1.2em;
margin:2em 5em;
padding:0.5em;
border:1px #ccc solid;
background:#eee;;
}
/* TABLE STYLING
-------------------------------------------- */
table {
margin: 0 0 18px 0;
font-size: 11px;
color: #666;
border-collapse:collapse;
}
tr {}
td {
border:1px solid #999;
padding:5px;
}
td.whiteTextCell {
color:#FFF;
}
tr.whiteTextCell1 {
color:#FFF;
}
Red {
color:#900;
}
/* WYSIWYG EDITOR ALIGNMENT CLASSES
-------------------------------------------- */
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
/* IMAGES
-------------------------------------------- */
img {
border: 1px solid #999;
}
img.right {
float: right;
margin-left: 20px;
margin-bottom:5px;
}
img.left {
float: left;
margin-right:20px;
margin-bottom:5px;
}
img.leftAlone {
float: left;
margin-right: 100%;
}
img.center {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
}