Hi, I would like to have some of my own CSS classes to choose from when adding a table in TinyMCE. I've added some styles in settings, stylesheet, which appear fine in the editor, but not in the table-dialog.
How do I manage these settings?
The editor handbook says:
"The class dropdown provides a list of stylesheet classes that can be assigned to the row. These allow you apply predefined styles to the row. The number of options within this list may differ between installs. Please contact your system administrator for details about which classes are available in your installation."
In the RTE datatype you can link a stylesheet to the RT editor. When you do that, you should be able to pick the classes from that CSS file in the dropdown here.
Hi, thanks for your answer. But that's exactly what I've done. But the classes does only appear in the ordinary style-dropdown in the editor, but not when I'm creating a table. This screenshot is from exactly the same Umbraco-site. As you can see there are different classes in the editor:
1. In the Settings section of umbraco, expand the Stylesheets portion of the treeview. You'll see your css file(s) for your site there.
2. Right-click on one of them (I use the main css file for the site, but it could be any of them). Select the Create menu item.
3. Give the Stylesheet Property a name (this is what will appear in the style dropdown... it can be any descriptive text). As an example, let's assume your site editors think of the first/biggest heading on a page as the "Title"... give the property the name "Title" and click the Create button.
4. You'll see the new "Title" property appear in the Treeview below the selected css file. Click on it.
5. Change the Alias field to the HTML element that should be used when this item is selected. In our case, type in "h1" (without the quotes) and click the save icon.
Hi, thank you very much for taking time to answer my questions. But that does not solve my problem. What you describe does only affect the styles in the editor, which is not the problem as you can see in my second screenshot. I have created several styles like that which appear fine in the editor(Heading 1, Heading 2 etc...).
But if you look in my first post where I'm editing a table (inside the editor), there is a different setup of classes; umbMacroHolder and preamble. These does not change if i create classes below the Stylesheets portion. Where does these come from?
I was getting similar results to Calle's. Seems to be a caching issue? I'm not seeing the text of the stylesheet in the editor, but if click the link for the stylesheet to open it in a new window, the copy that opens does not have my new classes. When I refresh the new classes show up. Before refreshing the new classes are in the styles drop down, but not in the insert table class drop down. After refreshing they show up in both drop downs.
EDIT: I have resolved this - please ignore the below. Creating a style and assigning it via the table editor applies it to the entire table.
Hi,
Apologies for reviving an old topic.
I want to add a style to allow us to easily add table cellspacing, border etc via css rather than in the page html which is deprecated.
Above it says the style is applied to the rows - is there an easy way to add a style to the entire table? there is a style field in the advanced tab but that is free text and I can't seem to make it do anything.
Custom CSS-class on tables
Hi, I would like to have some of my own CSS classes to choose from when adding a table in TinyMCE. I've added some styles in settings, stylesheet, which appear fine in the editor, but not in the table-dialog.
How do I manage these settings?
The editor handbook says:
"The class dropdown provides a list of stylesheet classes that can be assigned to the row. These allow you apply predefined styles to the row. The number of options within this list may differ between installs. Please contact your system administrator for details about which classes are available in your installation."
???
In the RTE datatype you can link a stylesheet to the RT editor. When you do that, you should be able to pick the classes from that CSS file in the dropdown here.
Hi, thanks for your answer. But that's exactly what I've done. But the classes does only appear in the ordinary style-dropdown in the editor, but not when I'm creating a table. This screenshot is from exactly the same Umbraco-site. As you can see there are different classes in the editor:
Aha, sorry, I forgot something, pulled from this topic:
1. In the Settings section of umbraco, expand the Stylesheets portion of the treeview. You'll see your css file(s) for your site there.
2. Right-click on one of them (I use the main css file for the site, but it could be any of them). Select the Create menu item.
3. Give the Stylesheet Property a name (this is what will appear in the style dropdown... it can be any descriptive text). As an example, let's assume your site editors think of the first/biggest heading on a page as the "Title"... give the property the name "Title" and click the Create button.
4. You'll see the new "Title" property appear in the Treeview below the selected css file. Click on it.
5. Change the Alias field to the HTML element that should be used when this item is selected. In our case, type in "h1" (without the quotes) and click the save icon.
Hi, thank you very much for taking time to answer my questions. But that does not solve my problem. What you describe does only affect the styles in the editor, which is not the problem as you can see in my second screenshot. I have created several styles like that which appear fine in the editor(Heading 1, Heading 2 etc...).
But if you look in my first post where I'm editing a table (inside the editor), there is a different setup of classes; umbMacroHolder and preamble. These does not change if i create classes below the Stylesheets portion. Where does these come from?
Strange, I have them.. Maybe I'm doing something different in the style specification, see these two screenshots:
I was getting similar results to Calle's. Seems to be a caching issue? I'm not seeing the text of the stylesheet in the editor, but if click the link for the stylesheet to open it in a new window, the copy that opens does not have my new classes. When I refresh the new classes show up. Before refreshing the new classes are in the styles drop down, but not in the insert table class drop down. After refreshing they show up in both drop downs.
EDIT: I have resolved this - please ignore the below. Creating a style and assigning it via the table editor applies it to the entire table.
Hi,
Apologies for reviving an old topic.
I want to add a style to allow us to easily add table cellspacing, border etc via css rather than in the page html which is deprecated.
Above it says the style is applied to the rows - is there an easy way to add a style to the entire table? there is a style field in the advanced tab but that is free text and I can't seem to make it do anything.
Any help appreciated,
Thanks,
Matt
In v7 (using 716), the tinymce Table Advanced section is missing so there is no way to assign the class to the table.
The Format/text-style approach doesnt seem to work either; it tries to set to selected cell.
Is there a way to enable the table style selection within tinymce with v7?
I'm using version 7.5.4 and the advanced section is there.
If you follow the following post then you can specify which classes can be added to the RTE: http://stackoverflow.com/a/38400129/2963111
is working on a reply...