close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

PowerCMS Editor Stylesheet

Thread began 3/21/2012 5:52 am by alan56669 | Last modified 3/28/2012 11:06 am by Jason Byrnes | 1358 views | 7 replies |

alan56669

PowerCMS Editor Stylesheet

I am using PowerCMS 2.1 and would like to use some of the styles used in my website (i.e. css formatted tables) in the editor used by the site administrators.

I have populated the dropdown style list in the editor with a number of styles used in the site to assist the administrators in keeping aligned with the styles used in the main site but i cannot fathom out how to change the editorarea to use table styles.

When the user clicks on the table icon in the editor toolbar and chooses the number of rows and columns i want a specific style to be applied, i.e. like what will appear on the main site when the page is loaded.

Any help here would be gratefully received.

Regards
Alan Edwards

Sign in to reply to this post

Jason ByrnesWebAssist

in the table properties dialog box, you need to go to the advanced tab and enter the id to apply an ID based style, or the table classes to apply class based styles.

Sign in to reply to this post

alan56669

Hi Jason, thanks for you swift reply but i'm still confused.
For the editor area to display the table style does the style need to be added somewhere first, if so what css style sheet or JS file do i need to include the styles in before i can use them in the table properties dialog box?

Thanks in advance.

Regards

Alan

Sign in to reply to this post

Jason ByrnesWebAssist

yes, the style will need to be fined in the CSS File that you have attached to the page that displays the editor area

Sign in to reply to this post

alan56669

PowerCMS Editor Stylesheet

Hi Jason,

When i change the CSS stylesheet that is attached to the PowerCMS contents_update.php page it changes the whole page including the PowerCMS admin look and feel.

The area is does not change however is the editor area itself.
Am i missing something, or have i lost the plot completly?

Cheers

Alan

Sign in to reply to this post

Jason ByrnesWebAssist

OK, try doing it this way:

Edit the HTML Editor instance. Click the Pencil icon next to the preset to edit the preset.

In the styleing tab, select the option to edit the styles listed in the menu.


you can select to create new styles, when you give thje new style a name, you can select that it applies to the table tag, the tr tag or the td tag.

in the bottom section, you can define the style attributes like border or font size / color.

after adding the table in the editor, select it, then from the style menu select the stye that was defined for the table.

Sign in to reply to this post

alan56669

PowerCMS Editor Stylesheet

Hi Jason,

As i am using POWERCMS and the page in question is the contents_update.php that is part of the POWERCMS suite there is no visible editor in the page for me to click and edit.

The following code appears in the source of the page though....

<?php
// The initial value to be displayed in the editor.
$CKEditor_initialValue = "".($totalRows_HistoryUpdate > 0)?((isset($_POST['ContentValue']) && $row_HistoryUpdate['HistoryValue'] != $_POST['ContentValue'])?$row_WADAContents['ContentValue']:$row_HistoryUpdate['HistoryValue']):$row_WADAContents['ContentValue'] ."";
$CKEditor = new CKEditor();
$CKEditor->basePath = "../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "Blank (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "98%";
$CKEditor_config["height"] = "300px";
$CKEditor_config["skin"] = "kama";
$CKEditor_config["docType"] = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["contentsLanguage"] = "";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "../webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2";
$CKEditor_config["toolbar"] = array(
array( 'Source','-','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'));
$CKEditor_config["scayt_autoStartup"] = true;
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist1.js";
$CKEditor->editor("ContentValue", $CKEditor_initialValue, $CKEditor_config);
?>


Thanks for your continued support i appreciate it.

Regards


Alan Edwards

Sign in to reply to this post

Jason ByrnesWebAssist

I see, sorry i missed the part that was CMS Builder.

you will need to edit the webassist/ckeditor/style_lists/stylelist1.js to add the table style.


for example, the last style defined in that file is:

{ name: "contentpage-clicked",  element: "span",  ordered_list: [ "a:0" ],  attributes: { "class" : "contentpage-clicked" } }




you would need to add your style for the table tag after that like this:

{ name: "contentpage-clicked",  element: "span",  ordered_list: [ "a:0" ],  attributes: { "class" : "contentpage-clicked" } },
{ name: "tableStyle", element: "table", ordered_list: [ "s:0" ], styles: { "border" : "1px solid black" } }
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

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