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

Need help with a WYSIWYG-editor in Joomla! 1.0.x? This is the place to be.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
JamieShields
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Mon Jan 28, 2008 11:24 am

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

Post by JamieShields » Tue Feb 05, 2008 5:12 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sat Sep 10, 2005 12:12 am

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

Post by bobede » Tue Feb 05, 2008 6:53 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Mon Jan 28, 2008 11:24 am

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

Post by JamieShields » Fri Feb 08, 2008 9:11 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sat Sep 10, 2005 12:12 am

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

Post by bobede » Fri Feb 08, 2008 1:42 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Mon Jan 28, 2008 11:24 am

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

Post by JamieShields » Mon Feb 11, 2008 8:44 am

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.

User avatar
ripplegraphics
Joomla! Intern
Joomla! Intern
Posts: 74
Joined: Sun Jan 13, 2008 1:33 am

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

Post by ripplegraphics » Thu Feb 21, 2008 4:30 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Feb 23, 2008 4:24 pm

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

Post by badurally » Sun Mar 02, 2008 9:30 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jun 04, 2008 3:13 pm

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

Post by ehackett08 » Wed Jun 04, 2008 4:07 pm

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.

Image

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

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

Post by cantthinkofanickname » Wed Jul 02, 2008 7:27 pm

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.
Thanks for your time.

User avatar
jgohil
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sat Jun 09, 2007 11:01 pm
Location: St. Louis, MO - USA
Contact:

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

Post by jgohil » Mon Dec 28, 2009 5:30 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Jul 22, 2009 10:15 pm

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

Post by mfugaj » Tue Jan 12, 2010 3:53 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Tue Sep 23, 2008 2:35 pm
Location: Leesburg, VA
Contact:

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

Post by stevegmag » Tue Jan 12, 2010 7:09 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Feb 12, 2010 7:39 pm

TinyMce Still Not working

Post by johnny5r » Fri Feb 12, 2010 7:45 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Wed Jul 22, 2009 3:45 pm

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

Post by sindere » Fri Feb 19, 2010 10:10 pm

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

micmol
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Apr 08, 2010 10:09 am

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

Post by micmol » Tue Apr 20, 2010 2:23 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Jun 18, 2010 9:13 am

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

Post by jcasub » Fri Jun 18, 2010 9:19 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Aug 31, 2010 11:49 am

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

Post by Koja » Tue Aug 31, 2010 1:34 pm

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

Glam
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Sep 17, 2009 7:57 pm

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

Post by Glam » Wed Nov 24, 2010 3:03 am

Very, very useful post. Many thanks!

Gerimou
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Tue Jul 27, 2010 10:41 am

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

Post by Gerimou » Fri Nov 26, 2010 12:12 am

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.

User avatar
pishro
Joomla! Explorer
Joomla! Explorer
Posts: 285
Joined: Tue Oct 09, 2012 7:22 am

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

Post by pishro » Fri Oct 04, 2013 12:13 am

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
You do not have the required permissions to view the files attached to this post.


Locked

Return to “WYSIWYG Editors - 1.0.x”