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
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
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
This works exactly as I wanted.
A million thanks!!!!
Re: [zaba] WYSIWYG modifying standard h1, h2, formats
By Jason - April 28, 2010
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
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?
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
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.
Chris
Re: [chris] WYSIWYG modifying standard h1, h2, formats
By Mohaukla - August 5, 2010
That was the problem and now its there and working correctly. Its usually a simple thing.
Thanks again.
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
By NigelGordijk - July 6, 2011
Also, what about having stylesheet options in an additional menu?
Thanks,
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
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
Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net