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