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: [Jason] WYSIWYG modifying standard h1, h2, formats

Hi, Jason. Is it possible to add additional options to the existing menus? For example, the Font size menu has options for sizes 1 through 7, with point sizes for each. I'd like to have additional options, if possible.

Also, what about having stylesheet options in an additional menu?

Thanks,
Nigel Gordijk

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

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

Perfect! Thanks, Jason.
Nigel Gordijk

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