Anyone else having problems with the "styles" drop down in the cms not working?

Not even the general ones in the .typography file are populating.

i did re-order the typography.css .layout.css and form.css files in the requirement class, does this have anything to do with it you think??

do you have any content in the style box ?

u need to add styles to this css file.

cms/css/editor.css

if u do so it should appear in the styles box :)

If i recall, i tried this and no luck. There were default options that populated in older versions of Silverstripe that I have used like (e.g. .floatLeft) but those are not there either. I will try again and see what happens.

Thanks!

I'm having the same problem with 2.3.6 - nothing appears in the Styles drop down menu.

I've tried with 2 different installations of SS on 2 different servers, tried with Firefox and Safari (no IE to hand at the moment), cleared the browser cache, flushed the SS admin pane.
I've also tried switching the template from Tutorial to my custom template to Blackcandy with no luck.

I checked the demo install on the SS website and this also doesn't show anything in the Styles drop down.

Any ideas? I am a beginner so may have missed something obvious...
Carol

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;
	}

Actually I tried that with no luck, but I did find a different solution to this, check http://silverstripe.org/customising-the-cms/show/276090?showPost=281006

This worked for me, and I think is better because it's part of your mysite folder so is less likely to be overwritten during an SS upgrade.

Ah! good find. Thanks for sharing.