close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

CSS with PowerCMS

Thread began 2/22/2010 2:52 pm by Gregg292456 | Last modified 7/28/2010 8:03 am by info360637 | 3543 views | 10 replies |

Gregg292456

CSS with PowerCMS

Is there a way to link the CSS file to PowerCMS so the end user would so how the format would look? There are some things in the CSS file that are handled differently like the ul tag and also the h (heading) tags. I would like for my client to be able to see how their changes would look with out having to do a side by side compair of the site and also be able to easily use the predefined styles. I am hoping there is a way to do this.

Thanks
Gregg

Sign in to reply to this post

gerlinda89667

Hi,
Yes, add a css style sheet with all your main default styles, text color, size, heading, links, body background of what their content area background will be. Call it cms_mystyle.css or whatever you want, save it into the HTMLEditor/custom folder, then add the link to it at the bottom of contents_insert_ContentValue1.js and the contents_update_ContentValue1.js
The headings tags will show up with the css formating in the font format dropdown and all the other styles will show on the page as they add content or choose lists etc... If you want them to be able to choose styles and for them to show in the styles dropdown, you will have to add those to the xml file.

FCKConfig.EditorAreaCSS = '../custom/cms_mystyle.css'; // relative to fckeditor/editor/fckeditor.html
FCKConfig.BodyClass = '';
FCKConfig.StylesXmlPath = '../custom/contents_insert_ContentValueStyles1.xml'; // relative to fckeditor/editor/fckeditor.html
FCKConfig.ManagerEnabled = true;
if (true) {FCKConfig.Plugins.Add('kfm');}

Hope that helps,
Gerlinda

Sign in to reply to this post

kris348832

Originally Said By: gerlinda89667
  Hi,
Yes, add a css style sheet with all your main default styles, text color, size, heading, links, body background of what their content area background will be. Call it cms_mystyle.css or whatever you want, save it into the HTMLEditor/custom folder, then add the link to it at the bottom of contents_insert_ContentValue1.js and the contents_update_ContentValue1.js  



Thanks for the post, that's what i'm trying to do, but I'm not quite certain exactly what code to put when adding the link to the bottom of contents_insert_ContentValue1.js and the contents_update_ContentValue1.js

Could you be a little more specific, that'd be a great help.

Thanks
Kris

Sign in to reply to this post

Eric Mittman

If you called your file cms_mystyle.css and put it in the HTMLEditor/custom you would just reference it in the code like the example:

FCKConfig.EditorAreaCSS = '../custom/cms_mystyle.css'; // relative to fckeditor/editor/fckeditor.html
Sign in to reply to this post

info360637

HTML Editor - custom css

Hi,

I am trying to insert some of the css styles from my site to the CMS system. I have read seceral posts on this - followed the advice to copy my css file to the 'custom' folder, and update the .js and xml files - but all I get on offer is 'red title'. Not very helpful. Can anyone give me a foolproof 'how to'?

Again, I just want my css styles to appear in the drop down in the html editor.

Thanks,
Jim

Sign in to reply to this post

info360637

HTML editor and custom css??

Hi,

I am trying to insert some of the css styles from my site to the CMS system. I have read seceral posts on this - followed the advice to copy my css file to the 'custom' folder, and update the .js and xml files - but all I get on offer is 'red title'. Not very helpful. Can anyone give me a foolproof 'how to'?

Again, I just want my css styles to appear in the drop down in the html editor.

Thanks,
Jim

Sign in to reply to this post

info360637

Don't get it?

>The headings tags will show up with the css formating in the font format dropdown and all >the other styles will show on the page as they add content or choose lists etc... If you >want them to be able to choose styles and for them to show in the styles dropdown, you >will have to add those to the xml file.

This makes no sense to me? ..all the other styles will show on the page as they add content..? How else would this be other than in the styles dropdown?

Help!

thanks
Jim

Sign in to reply to this post

neilo

Hi Jim,

If you have the actual HTMLEditor extension, the easiest method is this:

1.

Make sure that the styles you want to appear in your Editor's Style select list are in a format that will be recognised by the Editor, i.e. they should be in your stylesheet as classes (which begin with a . dot), not element ids (which begin with a # hash).

So if you have a span or a div that has a style that you want to include, rewrite it as a class, so:

#sidebar_header {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
color: #C4CCC6;
}


becomes

.sidebar_header {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-transform: uppercase;
color: #C4CCC6



If your site has a particular body style, i.e. font-family, font-size, color, line-height, background-color etc, write it as a class and name it (e.g.) .siteBodyStyle (DO NOT name it 'body').

Do not include any styles that contain a height attribute, as it will make your Editor Style select list go wonky.

Ensure that the stylesheet is in the CMS folder (or inside a folder that is in the CMS folder). If it isn't, slide it in to the CMS folder in your DreamWeaver's 'Files' panel, and click 'yes' to update any/all links.

2.

IMPORTANT! If your PowerCMS files and folders are in their own folder which in turn is in your site root, create a new site definition in Dreamweaver, with that folder (i.e. 'CMS' or PowerCMS') as the site root. This example assumes it is called 'CMS'.

Dreamweaver Menu > Site> Manage Sites > Duplicate Site > Edit >


Local Info:

Name it (e.g.) yoursite CMS
Local Root Folder: add 'CMS\ ' to the end of existing Local root folder path

Testing Server:

Testing Server Folder: add 'CMS\ ' to the end of existing Testing server folder path
URL prefix: add 'CMS/' to the end of existing URL prefix path



Save site definition, and use it while making changes to HTMLEditor.

If your CMS files and folders are all already in the site root, ignore the last step.

3.

Open your admin/contents_insert.php file.

Have it clearly in mind now that you will NOT be saving this page, and that you will NOT check any box to 'save as preset'.

Double-click the HTMLEditor Toolbar place-holder, and click it once again so that the HTMLEditor [Edit] button appears in the Properties panel/inspector. Click the [Edit] button to open the Editor Quick Insert GUI.

4.

Follow this exact procedure.

a. Click 'Customise' to the right of the 'Editor preset' select list.
b. Go STRAIGHT to the 'Styling' tab.
c. Click the folder icon to the right of the 'Editor CSS' select list, and navigate to your stylesheet. Your classes will show up in the 'Available styles' area.
d. If you made a .siteBodyStyle class, then click the arrow in the Body class select list, and select your siteBodyStyle class from the list.
e. Repeat the process, as it selected the wrong one. Second time is a charm.
f. Select the styles from the 'Available styles' area that you want to include, by holding down the 'Ctrl' button and clicking individual styles to select, holding down
'Shift' and clicking a beginning item and ending item to select the range, or sliding the cursor over the listed styles to select them all (and de-selecting ones you don't want by holding down Ctrl and clicking them)
g. The styles MUST be highlighted in blue, or they are not being selected.
h. Press OK - but do NOT check the box to save as preset. Just click OK again to close that window.
i. Press OK again to close the Editor GUI.
j. Close the page, but DO NOT save it.

The process will have created a new xml file in your HTMLEditor/custom folder called contents_insert_ContentValueStyles2.xml

[If you have previously edited the Editor instance and already have that file, the new file name will be your last most recent 'insert' xml file incremented by one.]

5.

Open that file (HTMLEditor/custom/contents_insert_ContentValueStyles2.xml)

a. 'Save As' HTMLEditor/custom/contents_insert_ContentValueStyles1.xml - overwriting that file (click OK to overwrite).
b. 'Save As' HTMLEditor/custom/contents_update_ContentValueStyles1.xml - overwriting that file (click OK to overwrite).

You can now delete the newly-created 'contents_insert_ContentValueStyles2.xml' file.

Close any open pages.

6.

Open the file HTMLEditor/custom/contents_insert_ContentValue1.php

At line 50, change 'contents_insert_ContentValueStyles2.xml' to 'contents_insert_ContentValueStyles1.xml

Tip:

(Not absolutely necessary, but very useful - change the values in lines (37 and 38) :

FCKConfig.FormatOutput = false;
FCKConfig.FormatSource = false;

to 'true' - this will tidy up the 'source view' in the Editor instance into a far more friendly format!)


Now copy lines 37 to 50 of that file.

7.

Now open:

HTMLEditor/custom/Open contents_update_ContentValue1.php

And replace lines 37 to 50 with the lines you just copied from contents_insert_ContentValue1.php'

Save and close all files.

8.

Open both the 'admin/contents_insert.php' and 'admin/contents_update.php files'.

For each of them, attach your site stylesheet by clicking the little'link' icon at the bottom-right of the CSS Styles panel, and navigating to and selecting the site stylesheet.

9.

You should now switch back to your regular site definition.

Upload your HTMLEditor/custom folder, your stylesheet (make sure it goes to the correct location) and any of your site pages that were updated when you changed the location of the stylesheet.

10.

If, when you the open CMS' admin pages on your live site, the layout looks odd, - it means that one of your styles is conflicting with a style in the admin.css stylesheet. Check that you haven't given one of your styles the same name as one of the admin.css styles. Keep your own styles appropriately named for the rules of your own pages, avoiding generic terms.

A final tip:

Selecting and de-selecting styles from the drop-down styles list.

I became somewhat confused when I first started applying my custom styles to content using the newlypopulated styles select-list in the Editor interface. I thought it was intermittently unreliable. It turns out (either by default or through my error) that if you highlight some text and apply a style from the list - it looks and works just fine. If you decide to try another style, things seem to go a bit wrong. The more you try, the worse it gets. This is because each style you select, adds to (rather than replaces) the previous one.

If you want to select one distinct style, then you have to de-select the previous style(s) in the list. The selected style(s) have a little arrow to the left of them to indicate that they are active.


---------------------------------------------------------------------------------------

That seems a lot, but it is much quicker to do than it is to read it.

If you want a copy with even more waffle (but has pics to go with it) then try these:

for HTMLEditor/PowerCMS

for HTMLEditor/SiteSculptor

If you don't have the HTMLEditor extension, then post back and I will explain what has to be done to make it work. (Just as easy).

Sign in to reply to this post

neilo

Just to explain the process a bit, so you know what should be happening. When you make achange in the Editor interface, it will write those changes to the HTMLEditor/common/insert or update php file but will not create a new file. When you select your stylesheet and styles from within the Editor interface, it writes the styles' names to a new .xml file (insert or update) and writes to the custom/php file the path to where that xml file is, and where the actual stylesheet is.

As this information (style names and location of stylesheet) is the same for both the admin/insert and update pages, the information just needs to be copied to the files from one (insert or update) php page to the other one.

For HTMLEditor in PowerCMS2, although there are javascript files as well as php (and xml) files, the paths only need to be copied to the php pages.

If you wanted to add the styles to PowerStore3 instances of HTMLEditor, the changes would be made/copied in the custom/javascript files.

In SiteSculptor, it would just be to the one 'contents_update_ContentValue1.php' file i.e. - you wouldn't need to do any copying and pasting at all.

If you use the HTMLEditor extension itself to apply an instance of the editor on a page, then the changes would be made to just thecustom/javascript file for that instance.

In every case, when styles are selected, a new custom/xml file is created. All that is required is to make sure that the paths to the correct xml file(s) and stylesheet are present and accurate in either the custom/php or javascript files. It wouldn't hurt (if in doubt) to copy the same lines to both the php and javascript files.

Sign in to reply to this post

Eric Mittman

Thanks for posting this and the details as well. It seems that this is something that can be difficult for users making edits to the HTML Editor interface, thank you for taking the time to post the steps you have here.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...