Tutorial: Custom styles pulldown in wysiwyg

19 posts by 7 authors in: Forums > CMS Builder
Last Post: March 20, 2009   (RSS)

By Dave - June 26, 2008

Hi Michael,

I responded via email, but for anyone else following, here's what I did:

- I upgraded /tinymce3/ files to the latest version, the was some issues that made it not display in Firefox 3
- I edited /lib/menus/default/edit_functions.php where it says "theme_advanced_buttons1" - I replaced "formatselect,fontsizeselect" with "styleselect"
- I updated /cmsAdmin/css/wysiwyg.css with the latest version (some of the wysiwyg specific CSS has changed) and created a test class to make sure it was working.
- I cleared my cache and reloaded /cmsAdmin/css/wysiwyg.css since my browser was using the cached version.

After that everything seemed to work correctly.

Let me know if anyone else has any problems.
Dave Edis - Senior Developer
interactivetools.com

By Dave - June 26, 2008

That's a good question. I don't really know, I guess it would depend on the tags the wysiwyg outputs. I'd give it a try and experiment. Let us know what you find out! :)

Be sure to try it in FireFox and Internet Explorer just to make sure they don't act differently.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By Mohaukla - June 30, 2008 - edited: June 30, 2008

Hey Dave,
Good news!
I have experimented with the style dropdown in conjunction with the font size dropdown and have had great success.
There are a couple of things that should be kept in mind.

1. The CSS stylesheet wysiwyg.css (when edited to your liking) should not contain any size parameters in order to work with the size dropdown.
2. Other parameters should be left out like Bold,Italics etc.
3. When using the editor itself you should clean all formating out of the content entered (if pasted from another application) .... Also keep in mind that when you come back to edit the content later that the wysiwyg sometimes clings to old styles so I found it worthwhile to remove the formating for the intended section first and then apply the new style as needed.
4. If you have not assigned a style to the text you are saving it will certainly use the pages (or browsers)defined base style. So if you save something and it does not look like what you put in ... then check your text in the editor.

I have attached an example of the style sheet that I am using. There is a two versions of each font type. The only difference is that one allows for link decoration (i.e. Arial___) and one does not. The only questionable font in the list is Gadget but this can be easily removed if so desired.

Anyway I hope this helps anyone out whose looking for a little more customization of the editor.

Dave .. Thanks for all your help!
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!"
Attachments:

wysiwyg_001.css 3K

By Dave - June 30, 2008

Michael,

Thanks for the tips and update! :)
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By nigelparry.net - November 11, 2008

Has the location of the button customization changed recently?

In edit_functions.php it does not seem as if any of these buttons appear.

TinyMCE's Wiki is funny, it has a list of all the button types you can add and remove, but it doesn't say WHERE to add or remove them?

Nigel
_____________________

For more information about Nigel Parry and nigelparry.net
websites please see http://nigelparry.net

nigelparry.net: award-winning communications
solutions for clients with something to say

Website & print design
Internet, public relations & media consulting

Re: [nigelparry.net] Tutorial: Custom styles pulldown in wysiwyg

By Dave - November 11, 2008

Hi Nigel,

It has changed, it's now in /lib/wysiwyg.php
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By Christopherb - March 19, 2009

How do we get the editor to show h1, h2, h3 dropdowns?



we have the following within the wysiwyg.css and they work fine.



.bodytextlink {color: #CC0000}
.bodytextlinkbold {color: #CC0000}

Re: [Christopherb] Tutorial: Custom styles pulldown in wysiwyg

By Dave - March 20, 2009

Hi Christopherb,

You can find a list of available pulldowns and buttons for the wysiwyg here:
http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

I think the one you want is 'formatselect', and there's some additional options for it here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_blockformats

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com