ChetW
Staff
Sep 30, 2006, 5:40 PM
Post #6 of 9
(4805 views)
Shortcut
|
|
Re: [margaretmh] custom colour in WYSIWYG editor
[In reply to]
|
Can't Post
|
|
Hi,
Good to hear back from you!
To make use of styles in the WYSIWYG editor there is a few files that you will need to edit and a second stylesheet will need to be created, to set this all up follow the steps below:
Create a new CSS file for your WYSIWYG content:
1. Open your favorite text editor and create a new file lets call this file "content.css"
2. Next we will create the CSS styles that will be used by the WYSIWYG, you can create any class that you want for this stylesheet, for example type this into your "content.css" file:
.mybigredtext { font-size: 24px;
color: #FF0000;
font-weight: bold; }
3. Save your "content.css" file and upload it into the following directories:
/images/common/
/wysiwyg2/scripts/style/
Adding the style button to your wysiwyg editor:
4. Login to your webserver and find your "_interface.html" template file, this file can be found in the /templates/interface/ directory.
5. Download this file to your local computer, next before making any changes to this file create a backup copy. The "_interface.html" template is one of the files that helps the software run so you want to be sure that you always have an untouched copy handy incase anything goes wrong. :)
6. Next open you "_interface.html" template file in your text editor and look for the following section:
wsiwyg.features=[ //buttons to display
Underneath here replace this:
With this:
"StyleAndFormatting","Styles"
7. Next a few lines below the area you just edited look for this:
Just after the above bit of code add the following:
wysiwyg.btnStyles = true;
wysiwyg.css="$_imageurl_je$wysiwyg2/scripts/style/content.css"
8. Save your changes and re-upload the "_interface.html" template back into the /templates/interface/ directory.
Editing your HTML template files to include your newly created "content.css" file:
9. On your server download the following template files:
/index/default.html
/search/search_results.html
/article/default.html
These files can also be found in your /templates/ directory, on each of these three files you will want to add the following code:
<link href="$_imageurl$common/content.css" rel="stylesheet" type="text/css" />
Place this inside the <head> tag just below the <link> to the main websites stylesheet. Save you changes to these files and re-upload them back into their original locations.
10. Next login to your Article Manager admin section and re-publish your pages.
At this point you have done all the changes needed we will now go over how these styles work in the WYSIWYG
Using the WYSIWYG styles:
11. While still logged into Article Manager select 'Create Article', scroll down to your "Summary" WYSIWYG section and type:
"I want big red text"
Next highlight this text and select the capitalized italic "A" from the top left hand corner of the WYSIWYG editor. When clicking this button you will notice that a box appears with the word "Styles" written inside of it select this box.
12. A new window will load on your screen, that will have a "Styles" and "Preview" section. From the "Styles" selection choose this:
.mybigredtext
Notice that the preview will update with how the highlighted section will appear, be sure to choose 'Selected Text' from the "Apply to:" dropdown then press the 'apply' button on the bottom right hand side of this window to save your selection. :)
When finish you will notice that the WYSIWYG editor will also update with your changes. :)
Give this a try and if you have any other questions please don't hesitate to ask!
Cheers,
Chet Woodside - Product Specialist
support@interactivetools.com
[hr][i][url "http://www.interactivetools.com/consulting/"][b]Hire me![/b][/url]
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with [url "http://www.interactivetools.com/consulting/"][b]Priority Consulting[/b][/url].[/i]
|
.