Interactivetools.com Forum: Discontinued Products: Article Manager 1: custom colour in WYSIWYG editor

Home: Discontinued Products: Article Manager 1:
custom colour in WYSIWYG editor

margaretmh
User

Sep 25, 2006, 9:57 PM

Post #1 of 9 (2128 views)
Shortcut

custom colour in WYSIWYG editor	Can't Post

I am not sure whether this is possible but what i would really love to do is insert some custm colours into the WYSIWYG editor in the article templates to reflect the colours used in the site - ie the specific headers so that:

1. The articles are universal
2. Other writers can be referred to use specific colours for subheads etc without having to type in the #number each time.

Is this possible - when I tried it I had to do it each time I went into an article?

Thanks

ChetW
Staff

Sep 26, 2006, 10:48 AM

Post #2 of 9 (2120 views)
Shortcut

Re: [margaretmh] custom colour in WYSIWYG editor [In reply to]	Can't Post

Hi,

Thanks for the post!

If I understand correctly you would like to have the articles title change color based on the author who published the article, is this correct?

If so one thing you could do is make use of a spare art_field, this spare field would be used for authors to put in a unique author class that has been asigned to them.

We would then edit you HTML template files so that the articles title has a css class attribute assigned to it this css class would be named based on the author class that was entered by the articles writer in the spare field that you are using.

The css classes themselves would be determined by editing the stylesheet so that all the author classes are in there.

Does this sound like something that may work for you? If you have any other questions please feel free to ask!
Cheers,
Chet Woodside - Product Specialist
support@interactivetools.com

Hire me!
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 Priority Consulting.

margaretmh
User

Sep 26, 2006, 4:42 PM

Post #3 of 9 (2113 views)
Shortcut

Re: [ChetW] custom colour in WYSIWYG editor [In reply to]	Can't Post

Thanks Chet - your tip will prove useful for other instances but what I was really wondering was whether I could set up a range of styles/colours within the WYSIWYG editor that people could access.

So when they were doing a subhead within the body of an article, for example, they could easily pull it down as a style. Bold and size are easy enough but making a custom colour each time seems a bit onerous. If needs be I will use the standard colours in the colour pallette but I thought it would be good to use the site's colour scheme if possible.

By the way, while we are on fonts - in the WYSIWYG editor sizes are 1, 2, 3 ,4 etc but in the style sheet they are 12px etc. Is there a way of linking them?

Thanks again for your help - everytime I have asked for help I get quick and clear action - it's great!

ross
Staff / Moderator

Sep 28, 2006, 9:40 AM

Post #4 of 9 (2093 views)
Shortcut

Re: [margaretmh] custom colour in WYSIWYG editor [In reply to]	Can't Post

Hi.

Thanks for clearing that up Smile

.

I have been playing around with some of the editor settings and what I was thinking would work here is using stylesheets. There is a button you can add to your editor that will let the writer choose a style for a particular section of their article. That means you would just create a stylesheet for them with the different colors as styles and they choose the one they need.

Does that sound like it would work? Let me know and I show you how to set that up. I look forward to hearing from you Smile

.
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

margaretmh
User

Sep 28, 2006, 5:13 PM

Post #5 of 9 (2091 views)
Shortcut

Re: [ross] custom colour in WYSIWYG editor [In reply to]	Can't Post

Yes Ross - that sounds perfect. It would mean that writers could easily keep the colours that we use throughout the site.

If you can send me the instructions I will try to implement it!

I seem to be making mistakes all over the place at the moment but this would be great - thanks again.

ChetW
Staff

Sep 30, 2006, 5:40 PM

Post #6 of 9 (2077 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:

Code

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

Code

wsiwyg.features=[ //buttons to display

Underneath here replace this:

Code

"FontName","FontSize"

With this:

Code

"StyleAndFormatting","Styles"

7. Next a few lines below the area you just edited look for this:

Code

"FullScreen" ];

Just after the above bit of code add the following:

Code

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:

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

margaretmh
User

Oct 4, 2006, 5:39 PM

Post #7 of 9 (2037 views)
Shortcut

Re: [ChetW] custom colour in WYSIWYG editor [In reply to]	Can't Post

Thanks Chet

I got this working first go so your instructions are spot on - not hard at all - thanks!

Galaxy
User

Apr 4, 2007, 3:12 PM

Post #8 of 9 (1686 views)
Shortcut

Re: [ChetW] custom colour in WYSIWYG editor [In reply to]	Can't Post

Hi
No window loads when I click on the capitalized italic "A" from the top left hand corner of the WYSIWYG editor. I've made sure popup blocker is turned off but no joy....
Peace

ross
Staff / Moderator

Apr 4, 2007, 4:04 PM

Post #9 of 9 (1685 views)
Shortcut

Re: [Galaxy] custom colour in WYSIWYG editor [In reply to]	Can't Post

Hi there.

Thanks for the update!

Could you send me a support request for this one?

https://www.interactivetools.com/support/email_support.cgi

I am not quite sure what's happening here so I would like to have a closer look Smile

.
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Search for (options)