Adding Styles to the HTML Editor

I want to allow my client to use existing styles in the website. By reading some former posts I managed to re-enter the HTML and hit the Customize button to add my style sheet. I clicking the Styling tab in the editor settings and navigated to my main.css style sheet. Two questions here:-
1. Why can I see only some of my styles? For instance I cannot see styles for H1, H2, H3 etc. even though they are there in my style sheet.
2. In the Body Class drop down menu I see some of my styles. Do I have to go through this process for each one or is there a way to select multiple styles?
All help gratefully received.
Christine

You will only see the style definitions for classes. To select multiple styles to be put in, you would us control or shift on a PC and command or shift on a Mac.

You can define styles for the h1 - h6 tags, which goes some way to enforcing site style, by editing the cms 'HTMLEditor/fckconfig.js' file, some way down under '// Basic Block Styles (Font Format Combo).'

This has to be done in this format, ensuring that the 'punctuation' is correct, e.g:

'h1'			: { Element : 'h1', Styles : { 'color' : 'Red', 'font-size' : '18px', 'text-decoration' : 'underline' } },

	'h2'			: { Element : 'h2', Styles : { 'color' : 'C1D0E1', 'font-size' : '14px', 'text-transform' : 'uppercase', 'font-weight' : 'bold' } },

	'h3'			: { Element : 'h3', Styles : { etc.

Back up your fckconfig.js file first if you have a go. You will probably have to clear your browser cache to see the changes.

As Jimmy says, you can only add classes, (classes begin with a dot, not a #) but you could add any new classes to your stylesheet:

.anewstyle {
color: #FFFFFF;
border: 1px solid #131D2B;
padding: 6px;
background-color: #2D4262;
}

Thanks everyone I will have a go later today. I appreciate the help.

Hi,

Thanks for all the help in changing the Heading tags. I implemented that and it works just fine. I am still having a problem adding my styles to the editor. I am opening contents_insert.php and then clicking on the HTML Editor in the Web Assist toolbar at the top of DW. It opens the editor but I think it is for a new one as it is asking for Editor preset <new from blank> as default. If I click the Customize button next to that and then the Styling tab I can then navigate to my main.css file, select the classes I want to include
and click OK. Trouble is a box then opens that asks to save changes as an existing design project and the name is <New from Blank>. Hope someone can help me figure this out. It would appear I am creating a new editor not going into the one already on that page. I looked at the Properties Pane but there is nothing there to help.

yes, if you click on the button in the insert bar or go through insert, you will insert a new HTML Editor instance. To edit the one that's already applied, you will have to click on the existing editor and look in the properties inspector for edit buttons.

Hi,

I managed to find the edit button so thank you for pointing out that it was in the Property Inspector. I clicked on the edit button and in the editor I clicked Customize besides the Editor preset. Selected the Styling tab and used the browse folder to select the main.css in my site. I then selected one style and hit OK. In the Save Preset dialog box I left this unchecked, clicked ok. The next page was Site Settings. Do I need to do something here. All of this was blank so I just left it and clicked OK. I then re-uploaded the HTMLEditor folder but was not able to see my styles when I logged into the Editor online. This is bound to be something simple I guess but for the life of me I don't know what!!!
Thanks for all the help.

Have you tried to fill out the site settings with the information relevant to your site?

Hi Guys,

One thing I noticed when adding my own styles to any instances of HTMLEditor in my sites was that the styles almost certainly won't show up in my editor until I have cleared my browser's cache file. That had me stumped for quite a while.

And this from an older post:

"Also worth looking out for is that if your PowerCMS folders and files are all in the root directory and NOT in their own folder in the root directory (i.e. 'CMS', 'PowerCMS' or 'CMS102'), then re-entering the HTML Editor UI and making changes is fine, go ahead. HOWEVER, if your PowerCMS files and Folders - including the HTML Editor folder - are in their own folder within the root folder of your site, then making changes through the Editor UI will just create a new HTML Editor folder in the root directory of your site and really confuse matters.

How to get round this:

Go to 'Manage your Sites' in the DreamWeaver menu ('Sites'). Select your site and create a duplicate. Click 'Edit' to edit your duplicate site. Change the local and testing server paths for Local Root Folder, Testing Server Folder and (Testing Server) URL Prefix to the folder that contains the PowerCMS files and folders. For Instance, all references to these folders in my site that are currently: C:\Inetpub\wwwroot\Pictuality\ would become C:\Inetpub\wwwroot\Pictuality\CMS\.

In the Local Info screen for 'Site Name' just add the suffix 'CMS' to your site name, and save the site definition. Now (and whenever you want to), using this site definition, you can re-enter the HTML Editor UI and make changes without HTML Editor creating a new directory and big problems."

There are two things you can check to confirm that your styles have been added to the Editor. When you add styles, the Editor creates two new xml files in your HTMLEditor/custom folder, and makes changes to the javascript files in the same folder to connect the new xml files with your own stylesheet. So (for instance) in PowerCMS, if you are updating the editor instances in 'contents_insert.php' and 'contents_update.php', then the Editor will create two new xml files called 'contents_insert_ContentValueStyles2.xml' and 'contents_update_ContentValueStyles2.xml'. Any new configuration adds a new xml file with an incremental name change. Also in each of the javascript files, near the bottom, you will see the lines similar to:

FCKConfig.EditorAreaCSS = '../../css/myownstyles.css'; // relative to fckeditor/editor/fckeditor.html
FCKConfig.StylesXmlPath = '../custom/contents_update_ContentValueStyles2.xml'; // relative to fckeditor/editor/fckeditor.html

If you see these changes, then your styles have been added. (Remember to clear your browser cache!). If you don't see these changes, then it is likely that your PowerCMS files and folders are in their own folder, and HTMLEditor has created a new HTMLEditor folder in the root directory.

Thank you so much for all your efforts regarding the styles in the editor. I have been unable to come back to this for a few days but tried what Neilo suggested this morning. I created a duplicate copy of the site in DW as instructed. DW informed me that I have now chosen a folder within the site root folder (which is what I understood is needed to stop the Editor creating a new HTML Editor outside of the CMS folder). However, I hit problems with your instructions about being able to edit the HTMLEditor UI from there. How exactly can I open the site's files now that I am in the CMS folder of my site with this duplicate copy? I am totally confused. Sorry about this but would appreciate some help.
Thanks

I forgot to ask........ would it be okay to add styles to the fck_editorarea.css rather than doing all of the above?