WYSIWYG modifying standard h1, h2, formats

12 posts by 5 authors in: Forums > CMS Builder
Last Post: July 14, 2011   (RSS)

By zaba - April 28, 2010

Hi, in the WYSIWYG editor, is there a way to
1. change the css for the styles h1, h2, h3, p etc.. that appear in the format select box to match those I use on my site.
2. limit the items that appear (if I only want to show p and h1, h2).
3. How can I control how other formatting is displayed in the editor, for example I want to control the <ul> <li> <a href> tags to match that of my site in the wysiwyg editor.
I have been looking around for this information and can not find it anywhere, which is odd because I thought everyone would want to be able to do this?

Re: [zaba] WYSIWYG modifying standard h1, h2, formats

By Jason - April 28, 2010

Hi,

To do this, you'll need to change 2 file. The first is cmsAdmin/lib/wysiwyg.css

In this file, you can place whatever css you want to match your site. So, for example, if you want to control all of the <ul>,<li>, and <a> tags in the editor, you would use:
ul{ }
li{}
a{}
adding whichever styles you wish.

Next, find the file cmsAdmin/lib/wysiwyg.php. First, rename this file to be wysiwyg_custom.php.
Next, open the file. Part way down the page, you'll see the following:
// Define buttons: Button codes: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
theme_advanced_buttons1 : "formatselect,fontsizeselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,|,removeformat,fullscreen",
theme_advanced_buttons2 : "forecolor,backcolor,|,link,unlink,anchor,|,hr,image,media,table,|,pastetext,pasteword,|,code,|,spellchecker",
theme_advanced_buttons3 : '',

Directly under "theme_advanced_buttons3 : '', put this line:
theme_advanced_blockformats : "p,h1,h2",

This limit the options in the formats to Paragraph, Header 1, and Header 2. You can add more to this line if you want more options to appear.

Give this a try and let me know if you run into any problems.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] WYSIWYG modifying standard h1, h2, formats

By zaba - April 28, 2010

Once again thank you Jason,
This works exactly as I wanted.
A million thanks!!!!

Re: [zaba] WYSIWYG modifying standard h1, h2, formats

By Jason - April 28, 2010

No problem. Glad that's working for you.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] WYSIWYG modifying standard h1, h2, formats

By Mohaukla - August 5, 2010

I have followed these directions and seem to have a problem. The editor looks fine (except that the dropdown does not sample the style) but the style selected does not show up in the page.
http://www.quality-aviation.com/cpms/index.php

.Blue_Titles { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #0054D1; text-decoration: none
}

.Grey_Text { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #767676; text-decoration: none;
}

I added the "styleselect" to the appropriate line in the wysiwyg.php file

// Define buttons: Button codes: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
theme_advanced_buttons1 : "styleselect,fontsizeselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,|,removeformat,fullscreen",
theme_advanced_buttons2 : "forecolor,backcolor,|,link,unlink,anchor,|,hr,image,media,table,|,pastetext,pasteword,|,code,|,spellchecker",
theme_advanced_buttons3 : '',

Why is the style not ending up in the page?
Michael Moyers



Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.



"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"

Re: [justritedesign] WYSIWYG modifying standard h1, h2, formats

By Chris - August 5, 2010

Hi Michael,

I don't see your custom class styles in [url http://www.quality-aviation.com/cmsAdmin/lib/wysiwyg_custom.css]http://www.quality-aviation.com/cmsAdmin/lib/wysiwyg_custom.css[/url]. Can you verify that you don't have a second copy of that file somewhere else by mistake?

Please let me know if you have any questions.
All the best,
Chris

Re: [chris] WYSIWYG modifying standard h1, h2, formats

By Mohaukla - August 5, 2010

Thanks Chris,
That was the problem and now its there and working correctly. Its usually a simple thing.

Thanks again.
Michael Moyers



Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.



"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"

Re: [NigelGordijk] WYSIWYG modifying standard h1, h2, formats

By Jason - July 6, 2011

Hi Nigel,

You can override the defaults in the font size drop down from inside /lib/wysiwyg.php like this:

// set formats to show with formatselect
theme_advanced_blockformats : "p,address,pre,h1,h2,h3,h4,h5,h6,code,div",

// set formats to show with fontsizeselect
theme_advanced_font_sizes : "Big text=30px,Small text=small,My Text Size=.mytextsize",

You can set any label/value pairs that you want.

To be able to set different CSS classes, first you need to add styleselect to theme_advanced_bottons1:
// Define buttons: Button codes: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
theme_advanced_buttons1 : "formatselect,fontsizeselect,styleselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,|,removeformat,fullscreen",

You can then set different CSS rules inside /lib/wysiwyg.css that will show up in this list.

Hope this helps get you started.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] WYSIWYG modifying standard h1, h2, formats

By NigelGordijk - July 6, 2011

Perfect! Thanks, Jason.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net