close ad
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues


Use Own Stylesheet in PowerCMS

Thread began 12/30/2009 1:10 pm by reneas.email303886 | Last modified 5/10/2011 8:30 am by Jason Byrnes | 10437 views | 27 replies |


Use Own Stylesheet in PowerCMS

I am using PowerCMS I also have HTML Editor. I want the client to be able to use the styles defined in my style.css file. What do I need to do to achieve this?? Do I need to replace a css file on the server with my css?? I found this entry in the fck editorarea.css file:

* A user can configure the editor to use another CSS file. Just change
* the value of the FCKConfig.EditorAreaCSS key in the configuration
* file.

Please explain in detail what file contains the FCKConfig.EditorAreaCSS key...thanks!


Sign in to reply to this post

Dani Chankhour

To add your own styles to the styles drop down list in the PowerCMS:

1. Reenter the HTMLEditor in Dreamweaver (from the Properties Window)
2. On the Quick Insert Click the Customize Button
3. On the Edit Settings click the Styling Tab
4. Click the Folder Icon to browse to your style.css file
5. a list of the classes in the file should be listed
6. select the classes that you want to show in the styles drop down list
7. Click OK, and OK

Let me know if you have any questions about these steps.

Sign in to reply to this post


Not understanding these instructions

I am using Dreamweaver from CS3. I don't understand what you mean by
"1. Reenter the HTMLEditor in Dreamweaver (from the Properties Window)".

My properties window is grayed out. It sounds like you are saying to run the HTML editor from Dreamweaver, but I see no way to do this...can you just say what config files to change and I can do it by hand...thanks!

Sign in to reply to this post


I just posted this on another thread but thought I should post here too. Maybe it will help.

For what it's worth, I just uploaded my normal site, including the stylesheet, images, etc. In other words, I don't have to change the WA header because I'm just using mine. The CMS content is picking up my stylesheet so if I change a H1 tag to purple and assign H1 to something in the CM area, it will turn purple once I re-upload my styles. Of course a user could override that with inline styles. Does that make sense? I've just started working with this so I may be crazy but it seems to be working just fine.

I have all my CMS files (the downloaded ones) in one folder. Everything else (pages, includes, images) outside that folder, at the root of the site.

I think the content management part of it is really simple to use. It takes a bit to get all the paths correct during setup and to understand what's going on. Documentation just sort of stops and leaves us hanging. Screenshots would be helpful as well.

But once you get to the admin page - way cool! I just wish there was an Add PDF button or it was an accepted format in the file upload. I'm going to add the code that I saw in another thread and see if that works. I absolutely have to be able to let users add PDFs to their sites.

I too have tried Joomla and Wordpress and was not happy with lack of control. I still have a hard time with not being able to 'touch' everything in the database but it's only a small part of the site so I can deal with it. I still have control over the majority of the sites.

Here is the link to my site. I'm just playing around with this and experimenting so I can't guarantee what you will find at any given point but it might help some.

Thank you all so much!

Sign in to reply to this post


I want to remove the CMS admin header

Is there an easy way to change the Power CMS header in the Admin page to a custom site-specific header? I just need to know what the header file is called and I'll make one the same size and file format and ame only with my design.


Sign in to reply to this post

Dani Chankhour

If you are referring to the PowerCMS logo, you can change that in the template.

Under the Template Folder, you will see an admin.dwt.php page, and look for this line of code:

<img src="../images/logo.png" width="154" height="79" alt="Power CMS" />

And then you can either replace the logo.png under the images folder with your image or change the src to point to your image.

Sign in to reply to this post


Original question not answered...


As per the original post, I am also curious about accessing the original CSS file that is sitting in the root folder of the web site that was built before I installed the PowerCMS sub-folder. Can some assistance be provided on how I access those styles in the edit window in PCMS?

Sign in to reply to this post

Jason ByrnesWebAssist

see this post for details:

Sign in to reply to this post


Please forgive my newbieness or just plain stupidity, but can you please help me understand why I need to install the HTMLEditor to get access to my root level css files in the PowerCMS editor.

I have installed the PCMS on the server, I have been interacting with it. I have been setting up editable regions and I can complete the edits and return to the site successfully.
(side note: I had trouble with this at first because I would login through one Firefox window, then I would open a new tab to view the site, but I couldn't see the edit buttons. But if I logged in and then typed into the same window the primary web address, I would see the edit buttons. This small glitch forced me to edit the template file and make the logo link back to the client's home page)

That all being said, what I am struggling with is the HTML Editor and WHY do I need to install that and how is it installed when I have already built the site. But more over, why does it or is it needed when I have already installed the PCMS program on the server. It seems that I need to go through all of this just get access to CSS in the drop-down.

Now if there is no choice and I need to install the HTML Editor, the instructions are not very clear and the first couple of set-up screens were daunting within DW CS5 fearing I was going to break all my work.

Thank you, A

Sign in to reply to this post

Jason ByrnesWebAssist

you do not need to install HTML Editor to get your style sheet into the toolbar, but you _do_ need to edit the code if you dont install it.

1) on the admin/contents_insert.php and admin/contents_update.php page, change the following code:

$CKEditor_config["toolbar"] = array(

array( 'Source','DocProps','-','Save','NewPage','Preview','-','Templates'),
array( 'Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'),
array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
array( 'Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'),
array( 'Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'),
array( 'FitWindow','-','About'),
array( 'Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'),
array( 'OrderedList','UnorderedList','-','Outdent','Indent'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'),
array( 'Link','Unlink','Anchor'),
array( 'Style','FontFormat','FontName','FontSize'),
array( 'TextColor','BGColor'));


$CKEditor_config["toolbar"] = array(

array( 'Source','DocProps','-','Preview'),
array( 'Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker'),
array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
array( 'Image','Flash','Table','HorizontalRule','Smiley', 'SpecialChar','PageBreak'),
array( 'Bold','Italic','Underline','Strike','-','Subscript','Superscript'),
array( 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Link','Unlink','Anchor'),
array( 'Styles','Format','Font','FontSize'),
array( 'TextColor','BGColor'),
array( 'Maximize','ShowBlocks'));

2) in the admin/contents_insert.php and admin/contents_update.php page

chagne the following code:

$CKEditor->editor("ContentValue", $CKEditor_initialValue, $CKEditor_config);


$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist1.js";

$CKEditor->editor("ContentValue", $CKEditor_initialValue, $CKEditor_config);

3) in the admin/contents_insert.php and admin/contents_update.php page, add a reference to the style sheet, for example:
<link rel="stylesheet" type="text/css" href="../mycss.css"/>

4) Create a new folder in the webassist/ckeditor folder named "style_lists", inside that folder create a new js file named "stylelist1.js"

5) add the following code:


[    { name: "my red div",  element: "div",  ordered_list: [ "a:0" ],  attributes: { "class" : "myredclass" } },
    { name: "my blue div",  element: "div",  ordered_list: [ "a:0" ],  attributes: { "class" : "myblueclass" } },

this will add two items to the style list:
my red div
my blue div

selecting my red div will add a div around the selected text with a class of "myredclass"
<div class="myredclass">selected text</div>

you can add other items to the style list using the same format of:
Name - what will be displayed in the list
Element - the type of element it applies to
attributes - how the style is added to the tag.

more details on the addStylesSet can be found here.

Sign in to reply to this post

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





Ease of use


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