close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

CSS with PowerCMS

Thread began 2/22/2010 5:52 pm by Gregg292456 | Last modified 7/28/2010 11:03 am by Gregg292456 | 2360 views | 10 replies

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).

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...