Why does this does not work?

Edit Subject

Your styles property wasn't set correctly. Rather than one big string, it's supposed to be an embedded JS object. You also had two margin properties in there: "0 15px 15px 0" and "0 0 10px !important". JSON requires that each property be unique.

Here, I reformatted it for you.

CKEDITOR.stylesSet.add( 'my_styles', 

[

	{ name: 'article-box', element: 'span', styles: {

		display: 'inline',

		float: 'left',

		width: '220px',

		padding: '15px',

		overflow: 'hidden',

		border: '1px solid #dedede',

		clear: 'left',

		color: '#7f7f7f',

		'font-style': 'italic',

		margin: '0 0 10px'

	}}

]);

I do not get it, drop down menu is still empty. But if I do it like this ...

CKEDITOR.stylesSet.add( 'my_styles',
[
{ name: 'article-box', element: 'span'}
]);

then it shows (but does not do anything) ... what am I doing wrong?

Oh, sorry, one other thing I missed – "font-style" should have been either in quotes or "fontStyle". (I forget which.) Try each of these:

'font-style': 'italic',

fontStyle: 'italic',

it works now ... thnx

Glad that worked.

FYI, each of those styles will actually get added to the style= attribute of any element you set to the "article-box" format.

It might make more sense to add the styles to a .article_box class in a CSS file, link that CSS file to your Wygwam Configuration, and then update your style set to just add the class "article_box" instead of all of those inline styles.

CKEDITOR.stylesSet.add( 'my_styles', 

[

	{ name: 'article-box', element: 'span', attributes: { 'class': 'article_box' } }

]);

i did put URL to my CSS file instead of js file where I had this style and nothing happened ... again I do not have it in dropdown ...

You need to do both – include the URL to your CSS file in the "CSS File" setting in your Wygwam configuration, as well as include the Style Set with the code I posted in my last reply.

no ... it just does not work ... I have it in dropdown but nothjing happens when I choose it ... here are 2 styles I must have in dropdown and that is it ... those 2 are in css file. Please help?!

.article-box { display: inline; float: left; width: 220px; padding: 15px; margin: 0 15px 15px 0; overflow: hidden; border: 1px solid #dedede; clear: left; color: #7f7f7f; font-style: italic; }
.article-box * { margin: 0 0 10px !important; }
.article-box>:last-child { margin-bottom: 0 !important; }

.article-quote { margin: 20px 0; padding: 18px 40px 20px 94px; overflow: hidden; background: url(site/v2/assets/images/css/quote.png) no-repeat 20px 20px; font-size: 18px; line-height: 24px; color: #555; border-top: 5px solid #ddd; border-bottom: 5px solid #ddd; clear: both; }

So that’s your CSS file. What does your Style Set file look like?

and ma style set file looks like this

CKEDITOR.stylesSet.add( 'my_styles',
[
{ name: 'article-box', element: 'span', attributes: { 'class': 'article_box' } }
]);

Your CSS class is ".article-box" (with a dash, instead of an underscore). So you need to use a dash in your style set definition as well.