Home → How Do I... →

How to Add Compound CSS classes to WYSIWYG editor Styles dropdown options

• Edit

markey.pappalardo

18 Dec, 2014 09:49 PM

Hi!

How can we add a compound css class to the dropdown list of Styles in the WYSIWYG editor? We'd like to add the class 'button hofgold", but when I try to add it to the Preferences/Content/Global CSS Classes, it displays the following error: "An invalid CSS class name was supplied: 'button hofgold'". I also tried it unsuccessfully this way: "button.hofgold". We are running version 7.10 - 4c7a6. Attached is a screenshot.

Thanks!

-Markey

• cascadeCSS.jpg 335 KB

1. 1 Posted by Wing Ming Chan on 19 Dec, 2014 01:00 PM

   

   Hi Markey,

   I suspect that you don't have a global stylesheet with your classes defined. This is what I did:

   1. In the Global site, create a css file with all the classes I want to make available to managers
      
   2. In Preferences > General > Content, put in the same classes in the Global CSS Classes field, leaving out the dots
      
   3. The classes will show up in the dropdown; to use them (assuming there is no HTML button available), highlight the text, keep selecting the classes from the dropdown

   Wing

   • global_css_file.png 63.6 KB
   • preferences.png 39.6 KB
   • dropdown.png 16 KB
   • Edit

2. 2 Posted by markey.pappalar... on 09 Jan, 2015 06:43 PM

   

   Hi Wing,

   Thanks for your reply. I do have a Global stylesheet setup and linked in Preferences > General > Content.

   Here is the compound CSS class I added in the global_css_file:
   button.hofblue:hover, button.hofblue:focus, .button.hofblue:hover, .button.hofblue:focus { background-color: #4279af; color: #FFF; }

   The problem is when I try to add the Global CSS compound class (button hofblue) to the Preferences, I still receive the following error: "An invalid CSS class name was supplied: 'button hofblue'".

   Thanks for your help,
   Markey

   • Edit

3. 3 Posted by Wing Ming Chan on 09 Jan, 2015 07:29 PM

   

   Hi, Markey,

   I absolutely misunderstood your questions. I though that you wanted to assign both "button" and "hofgold" classes to an element like this:
   

   <x class="button hofgold">
   

   But obviously, you want at least something like the following:
   

   <button class="hofgold">...</button>
   

   This still can be done: simply by adding the class "hofgold" to the global stylesheet, adding the class name to the Preferences page to make the class available in the dropdown, and assigning the class to the button element. What can't be done, as far as I know, is to create pseudo classes like ":hover". That I cannot help.

   When you have ".button.hofblue", what exactly do you mean? Do you mean ".button .hofblue" (with a space in between) instead? If that is the case, then we are simply talking about an ancestor-descendant relationship: the "button" class assigned to the ancestor and "hofblue" class assigned to a descendant. There is no complex classes here. If you are talking about something like "button.hofblue" (without a space and without a dot before button), then "button" must be a valid HTML element and there is only one class involved: "hofblue".

   I hope that this helps.

   Wing

   • Edit

4. 4 Posted by markey.pappalar... on 09 Apr, 2015 02:21 PM

   

   Hi Wing,

   I'm sorry for the confusion. I've attached a screenshot of my global.css stylesheet with the classes button.hofgold:hover, button.hofgold:focus, etc. Since it seems that it is not possible to add compound styles to the WYSIWYG Styles dropdown, I would like to ask if this could be added as a new feature.

   Thanks,
   Markey

   • global_css.jpg 302 KB
   • Edit

5. 5 Posted by Ryan Griffith on 09 Apr, 2015 07:33 PM

   

   Hi Markey,

   As Wing mentioned, the only way to accomplish this at the moment would be to define each class separately within the CSS classes field and then add your compounded styling within the CSS file. The user would then be able to select as many styles as they wish from the dropdown and they will be added to the element's class attribute, thus generating your compounded style.

   I'm not 100% sure, but there may also be a limitation to TinyMCE where only one valid class name can be defined per style. Might be something that was improved upon in newer versions of TinyMCE.

   If you would like to add the ability to define these compounded classes, please feel free to post a suggestion to our Idea Exchange for others to vote up and/or comment on.

   Please let me know if you have any questions.

   Thanks!

   • Edit

6. Ryan Griffith closed this discussion on 20 Apr, 2015 02:35 PM.