Create unique styles (combostyle) for portal

Dec 28, 2010 at 12:52 PM

Hi,

When I change the styles.js to create new or edit style for the combolist it's only applied on my portal 0.

Is it possible to create unique styles for each portal?

Add a reference or something to the toolbar.xml?

 

Thank you and regards,

Ely

Coordinator
Dec 28, 2010 at 1:07 PM

Yes of course this is possible you can define custom one for each portal. You only need to define a different Editor Styles file in the Editor Options.

Dec 30, 2010 at 11:05 AM

Thank you for the answer.

Is there a way to do this quicker via the Toolbar.xml ?

Coordinator
Dec 30, 2010 at 1:38 PM

No, that is the quickest way.

Jan 14, 2011 at 8:06 AM

Where do I find an example of an Editor Styles File and what kind of extension does it have?

Coordinator
Jan 14, 2011 at 2:48 PM
Ely_001 wrote:

Where do I find an example of an Editor Styles File and what kind of extension does it have?

 You need to create to files the first file the CSS File, which you need to select under "Editor area CSS" in the Editor Options

 Here is a Sample i use for my tests....

.textHeader,H1 {font-size:14px;color:#003366;font-weight:bold;}

.textNormal {font-size:11px;color:black;line-height:20px;}

.textNormalBold, H2,H3, H4 {font-size:11px;color:black;line-height:20px;font-weight:bold;}

.textSmall {font-size:9px;color:black;line-height:11px;}

.textSmallHeader,H5, DT, H6 {font-size:9px;color:#003366;line-height:11px;font-weight:bold;}

you also need to have the same css properties in your skin.css or portal.css. Then it will be displayed correctly in the Editor and on the dnn page.

Then you create a Style List File "CKStyles.js" and select it in "List of available styles".

CKEDITOR.addStylesSet('CustomStyles',
[
// Block Styles
//{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
{ name : 'TextHeader', element : 'p', attributes : { 'class' : 'textHeader' } },
{ name : 'TextNormal', element : 'p', attributes : { 'class' : 'textNormal' } },
{ name : 'TextNormal Fett', element : 'p', attributes : { 'class' : 'textNormalBold' } },
{ name : 'TextSmall', element : 'p', attributes : { 'class' : 'textSmall' } },
{ name : 'TextSmallHeader', element : 'p', attributes : { 'class' : 'textSmallHeader' } },

// Inline Styles
//{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
{ name : 'TextHeader', element : 'span', attributes : { 'class' : 'textHeader' } },
{ name : 'textNormal', element : 'span', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal Fett', element : 'span', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textSmall', element : 'span', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmallHeader', element : 'span', attributes : { 'class' : 'textSmallHeader' } },

// Object Styles
{ name : 'TextHeader a', element : 'a', attributes : { 'class' : 'textHeader' } },
{ name : 'textNormal', element : 'a', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal', element : 'table', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal', element : 'td', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal Fett', element : 'a', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textNormal Fett', element : 'table', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textNormal Fett)', element : 'td', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textSmall', element : 'a', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmall', element : 'table', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmall', element : 'td', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmallHeader', element : 'a', attributes : { 'class' : 'textSmallHeader' } },
{ name : 'textSmallHeader', element : 'table', attributes : { 'class' : 'textSmallHeader' } },
{ name : 'textSmallHeader', element : 'td', attributes : { 'class' : 'textSmallHeader' } },
]);

Then you can select one of the Styles from the DropDown, and you are ready to use it in your dnn. I hope that clarify how this works.

Jan 14, 2011 at 2:59 PM

When I did this:

Then you create a Style List File "CKStyles.js" and select it in "List of available styles".

I got an error.

I'll try it again maybe something was wrong.

Keep you updated.

 

Coordinator
Jan 14, 2011 at 3:16 PM
Ely_001 wrote:

When I did this:

Then you create a Style List File "CKStyles.js" and select it in "List of available styles".

I got an error.

I'll try it again maybe something was wrong.

Keep you updated.

 

 Did you get the error when you try to upload the js file? i think by default js files are not allowed, you need to include it in the "Allowable File Extensions:" under Host->Host Settings-> add js to the list or rename the file to a txt, but iam not sure if this will work.

Feb 8, 2011 at 9:25 AM
Edited Feb 8, 2011 at 9:26 AM

When editing the main styles file only Portal 0 is affected.

Is there a way to let ALL portals use the same file by only changing one file?

Coordinator
Feb 8, 2011 at 12:56 PM

Not directly, you can use one file and copy it manually into each portal home directory, and choose it as style file in the settings for each portal.

Feb 8, 2011 at 1:10 PM

It would be great to have this setup in the web.config like when you define the skin, you define the styles file.

Coordinator
Feb 8, 2011 at 2:02 PM

You could use the config.js file inside the editor folder (Providers\HtmlEditorProviders\CKEditor)

just add the stylesSet and contentcss to it

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.extraPlugins = 'MediaEmbed,syntaxhighlight,tableresize';

config.stylesSet = 'CustomStyles:ckstyles.js';
 config.contentsCss = 'ckstyles.css';
};

Feb 10, 2011 at 8:28 AM

Hi, I managed to adjust the combostyles.

But I can't find how to adjust the format dropdown.

Remove the H1 and H2, ....

Coordinator
Feb 10, 2011 at 9:59 AM
Ely_001 wrote:

Hi, I managed to adjust the combostyles.

But I can't find how to adjust the format dropdown.

Remove the H1 and H2, ....

You can change that via config.js too.

Default values are...

config.format_tags = ''p;h1;h2;h3;h4;h5;h6;pre;address;div''; More info about that here:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

Sep 19, 2011 at 4:03 PM

I believe I have followed these instructions appropriately, but the only thing that shows up in the various drop down lists of the Editor options is the CK.css file in the Editor area CSS section.  I cannot get anything to show up for the List of available styles drop down or the Custom Config File drop down.

How do I get the files to display so that I can select them in the editor options?

I've ensured that js is an allowable file type.

Thanks

Sep 19, 2011 at 4:31 PM
Edited Sep 19, 2011 at 4:31 PM

Please disregard the previous post.  I synchronized the file system and the file appeared in the list.