We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 38351
    • 16 Posts
    I've tried adding custom CSS classes in the 'template_selected_content_classes' property of TinyMCE. However, I'm not seeing the classes show up in the drop-down. Here is an example of the format of classes I'm putting in the value field:

    Blue Content Link=bodylink;Orange Read More Link=readmore;Content Paragraph=content


    Am I adding the classes incorrectly?

    This question has been answered by frogabog. See the first response.

    • discuss.answer
      • 10208 ☆ A M B ☆
      • 1,780 Posts
      Under System Settings, filter by area "Rich-Text Editor".

      You can enter a comma separated list of css selectors by hand (no styles, just the selectors) or enter the path to the css file itself.

      Either way, you have to define the selectors and stylings in the css file.

      See: https://forums.modx.com/thread/73224/tinymce-styles#dis-post-407185
        Frogabog- MODX Websites in Portland Oregon
        "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
        Having server issues? These guys have MODX Hosting perfected - SkyToaster
        • 38351
        • 16 Posts
        Thanks Frogabog, I'll check that out and re-post once I can get it working.
          • 38351
          • 16 Posts
          I got it to work, thanks. However, I couldn't quite understand a few things:


          • Can I describe the selectors in the style drop-down (e.g. Content link style=contentLink)? I read something about that in older versions of TinyMCE but can't get it to work.
          • I noticed that the style function adds a <span class="class"> tag when applying a style. Is there any way to use the Select function to define an element style, like <h1 class="class">?
          • Finally, what's the relationship between the URL path and the comma separated list of selectors? Either way, it seems you have to define the path.
            • 10208 ☆ A M B ☆
            • 1,780 Posts
              Quote from: fnkdumplin1 at Jan 17, 2012, 08:16 PM
            • Can I describe the selectors in the style drop-down (e.g. Content link style=contentLink)? I read something about that in older versions of TinyMCE but can't get it to work.

            • Best to forget all that and style everything in your stylesheet. I would suggest reading up and searching everything about CSS (Cascading Style Sheets). You want the editor to look at your stylesheet to determine the styles, the editor should have no command of styles that aren't pre-coded in the .css file your site is using. Sometimes there's more than one stylesheet, so if you need everything in the editor you'll have to combine all those stylesheets into one that the editor is looking at (the path you set in the manager).


            • I noticed that the style function adds a <span class="class"> tag when applying a style. Is there any way to use the Select function to define an element style, like <h1 class="class">?

            Again, turn to your search engine (google it) for the definition of the span tag. The list is meant to style text within an element or provide quick access to a defined style from your stylesheet. Most often a span is used within a <p> where you want specific text to display differently than the surrounding text. Such as within a paragraph, you will style some text as bold but not all of the paragraph or sentence. Standard tags that aren't defined in the stylesheet is what this list is actually intended for.

            [li]Finally, what's the relationship between the URL path and the comma separated list of selectors? Either way, it seems you have to define the path.[/li]

            If you use the comma separated list, it's in addition to your defined styles in the .css file. Once again, turn to your search engine and look into html tags.

            Some (many) tags are always going to produce a certain result in all browsers. WC3 documentation lists all these tags. These standard tags do not need to be styled in the stylesheet as long as the doctype is defined in the <head> of your document. Typing in a comma separated list simply allows you to wrap your text with these styles in the editor (quickly). The visitor's browser renders the styles for you. Relation between the path of the stylesheet and the comma separated list is... rather nothing actually unless you bother to type in every style you defined in the stylesheet. Using the url setting however, will pull all your styles in under the style selector for you (thus, no need to type them all in by hand).

            Clear as mud? Ha, sorry. You don't even want to know how long it took me to understand all this all by myself, but after a while it becomes clear. Hang in there.


            [ed. note: frogabog last edited this post 14 years, 8 months ago.]
              Frogabog- MODX Websites in Portland Oregon
              "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
              Having server issues? These guys have MODX Hosting perfected - SkyToaster
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              Can anyone point to more recent information on this? I don't seem to be able to get the Styles drop-down activated no matter what I try.

              Never mind... I got it. It doesn't mean "path" when it says "Path to CSS file", it means URL. That is very poorly written.

              [ed. note: sottwell last edited this post 13 years, 8 months ago.]
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org