How to Add Style Class to WYSIWYG Editor Drop-Down?!

[JamieShields]

Hi there,

I want to do something which to make our development teams life easier.

I have some different style classes for the paragraph txt in my CSS e.g. p.quote etc.

I wandered if anyone knew of a way to add the different styles for the paragraph text to the drop down in the default WYSIWYG - the one called '-- Styles --' next to '-- Format --'

It would just be a really cool thing to have, and would make my life a whole lot sweeter.

[bobede]

The best thing to do here would be to create a css file that has only the styles that you need, call it wysiwyg.css or whatever and include it in your template along with the usual template_css.css. If you then install an editor such as JoomlaFCK, you can select it under Mambots and enter the url for the new css under "Use custom CSS classes". There is also an option there to use the template_css classes but thatr would likely give you a list that is way too long.

Bob

[JamieShields]

Hi Bob,

When I do what you describe above and open a page to edit with the WYSIWYG it has disappeared (none of the icons are visible) and the text is all in HTML.

If I go back in to the paramaters of the TINY MCE and take out the path to my CSS classes it returns the WYSIWYG.

It does this with Joomla FCK and TINY MCE.

- Jamie

[bobede]

Hi Jamie

That is very odd. I've done this a number of times before in Joomla 1.0.X using JoomlaFCK and editing the mambot, or using JCE and making the change in the component settings, but you had me second guessing myself, so I thought I had better try it in Joomla 1.5 with the TinyMCE editor just to be sure.

I created a file called editor_content.css with 3 classes in it (.largeheading, .smallheading, .captiontext) and copied it to the templates/rhuk_milkyway/css folder. Then I went to Extensions>Plugin Manager and selected the Editor - TinyMCE 2.0 and added http://localhost/joomla15/templates/rhu ... ontent.css under the Custom CSS Classes section. I left everything else unchaged. I opened an article and the Styles drop down in the editor does display my 3 classes and properly applies them to selectewd text in the article. Your file names and paths would of course be different.

Did you change any of the other settings for the TinyMCE editor?
Under User manager can you check that the user you are logged in as, has the TinyMCE editor as the default editor selection?
Did you double check the Global configuration to make sure that TinyMCE was the default editor?

If all those check out, I'm stumped.

Bob

[JamieShields]

Hi Bob,

I've got it working now. For some reason it wasn't working when I put down the full path name to my CSS.

When I enter "templates/vascutek/TextCss/vascutext.css" it works okay.

I've just realised actually, looking at your filepath that I was entering a path which started with C: not localhost. That's not smart.

Thanks for all your help.

[ripplegraphics]

Thanks for this post - I tried it, and got it to work...but it replaces the entire preset formatting for the editor, which I have sort of gotten used to.

Is there as easy a way to simply add to the existing dropdown list?

[badurally]

Hi all,
To list a selected class list in the style drop down menu, just add a css file (e.g editor.css) to your css directory. Place the editor.css file under your template/yourtemplatename/css/ (e.g ../template/joomla151/css/).
In the editor.css file, place as much as classes you need. this will then be listed in the style drop down menu of your tinymce editor.
By default the editor looks for a file "editor.css". If it cannot find it, then it uses its default class (caption and system-pagebreak).
note:only the classes in the editor.css file will be listed and not caption and system-pagebreak. these 2 classes will still work as normal, but will not be listed in the style drop down menu.

Hopes this will help.

Cheers

[ehackett08]

TinyMCE 2.0 Has a setting "Template CSS classes" (No) (Yes) if yes is selected then it will automatically search your template folder for a file called editor.css. Then It will replace all the items in the dropdown tab with those in the editor.css file.

[cantthinkofanickname]

Of course the only problem with this is that there are two stylesheets to maintain! It would be nice somehow to segregate the editor styles in the default stylesheet. Problem with using the default one is too many confusing styles for anovice front end author to understand. Be interested if anyone has any experience here.

[jgohil]

For anyone else that tried following these directions but still couldn't get it working - you'll need to do this:

http://joomlacode.org/gf/project/joomla ... m_id=17211

So basically, the steps listed above are correct, but if you followed them and all of your WYSIWYG buttons disappear, fix the bug as listed in the link above.

[mfugaj]

Add styles to WYSIWYG editor in Joomla 1.5.x
Adding custom styles to the WYSIWYG editor makes styling articles much easier. Here are the simple steps to-do so!

Create your custom.css that includes your custom styles.
Save this custom.css to your template directory. /templates/my-template/css/custom.css
Go to Extensions -> Plugin Manager
Select the Editor - TinyMCE 2.0
Put the path to your custom.css in the Custom CSS Classes field.
Save

[stevegmag]

For those that don't want to add the actual style to the editor.css file, you can just create empty classes, like:

.class1 {}
.class2 {}

This should add the classes to the style menu and let you tag content with those classes, but leave the actual CSS coding to the template CSS. This will not display the style in the editor though, just on the front-end after you've applied style to the classes. If you need some indication in the editor, you can add style to both files, and I believe the template CSS gets included last in the HTML HEAD, so you can still overwrite the editor.css styling in the template.css file.

This link is helpful as well: http://www.gontztechnologyservices.com/ ... oomla.html

[johnny5r]

so I've done everything listed in this string and it still doesn't show in the styles menu. I've done an absolute path, I've done a relative path, I've even done the php modifications to the tinymce.php file that was documented in jgohil's post and still nothing is working. anyone have any other ideas?

[sindere]

I got it working on the first try, thank you very much.

[micmol]

Hi cantthinkofanickname,

If you want your style to have effect not only in your editor, but also in the online article, then you have to include the custom.css file you created, in the templates index.php file. This way you can avoid maintaining the styles in two stylesheet files.

The lines of code you need to look for in the index.php file looks like this:

Code: Select all

<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/custom.css" rel="stylesheet" type="text/css" media="screen" />

Just copy the line and type in your custom created css file.

I hope this is useful.

[jcasub]

Hi, I've added my styles with the steps mentioned, but with drop down, it's not possible to add more than one.
How can I add two styles to the selected text?
It's possible without editing the html?
Thanks

[Koja]

Hi Bob, you helped me a lot thank you very much!

[Glam]

Very, very useful post. Many thanks!

[Gerimou]

I was mucking around for quite a while until I realized, that I have to do the work twice - I tried to put the thing on the left leg or on the right leg, but it needs both legs to stand.

The EDITOR.css in the TinyMCE plug-in setting is necessary for displaying the styles at the Backend.
The same styles also have to be included in the TEMPLATE.css for them to work in the Frontend.

[pishro]

This is also a way to add new style to article editor

Help25-screenshot-editor-tinymce-advanced[1].png

First, in cpanel go to this address: /public_html/templates/system/css

Then copy this file editor.css In this address: ( for example in protostar templeate ) /public_html/templates/protostar/css

Then edit the editor.css file.
And copy this cod in to end all cod editor.css file .

Code: Select all

.img-rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.img-circle {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

With this code, you can give new styles your images in article editor.
And if you look at some styles editor article is added.

add-new-style-to-article-editor.png

Good luck