Typography - Styles beyond using span?
Permalink 2 users found helpful
My typography.css has classes that need to be used in lists, div blocks and in other cases. When I use a style from the tinyMc window it defaults to using a span class. How do users choose styles that work outside of <span?
I was wondering how to deal with this too, but hadn't thought it through. I like jordanlev's idea. After sifting through some of the TinyMCE docs, I'm inclined to agree that there's currently no way to add the class directly to an element in wysiwyg mode.
Another option might be to set up the CSS like this:
.LargeText, .LargeText div {
font-size: 24px;
font-weight: bold;
}
This way the class could either be added directly to the div in html mode or to the span in wysiwyg mode...
Another option might be to set up the CSS like this:
.LargeText, .LargeText div {
font-size: 24px;
font-weight: bold;
}
This way the class could either be added directly to the div in html mode or to the span in wysiwyg mode...
Interesting method to get the div working. Does anyone know if that is a cross-browser hack? I'll do some tests with this next chance I have the time.
The real issue that I'm running into with these spans is that I cannot call a class specific ordered list. Ideally the user could make a list, highlight it, then choose the "fancy bullets" style. Maybe there are some TinyMc modifications that can be made.
The real issue that I'm running into with these spans is that I cannot call a class specific ordered list. Ideally the user could make a list, highlight it, then choose the "fancy bullets" style. Maybe there are some TinyMc modifications that can be made.
On second thought, my previous comment was just plain wrong. A div can't be a child of a span, and there's no CSS parent selector.
You're right, your "fancy bullets" example won't work with TinyMCE's spans because list-style-type only applies to a <ul> and if the user highlights the list and selects a class, it will just wrap the contents of each <li> with a span with the selected class.
But there may be a way to work around this using JQuery, though. For example, you could do something like this: $('fancylist').parent().get(1) to select any <ul> that has items whose contents are spanned with the class 'fancylist'. Once you've selected them, you could add a "real" class to those ul's -- i.e. one with some CSS rules attached to it.
This link seems relevant:http://stackoverflow.com/questions/45004/complex-css-selector-for-p...
You're right, your "fancy bullets" example won't work with TinyMCE's spans because list-style-type only applies to a <ul> and if the user highlights the list and selects a class, it will just wrap the contents of each <li> with a span with the selected class.
But there may be a way to work around this using JQuery, though. For example, you could do something like this: $('fancylist').parent().get(1) to select any <ul> that has items whose contents are spanned with the class 'fancylist'. Once you've selected them, you could add a "real" class to those ul's -- i.e. one with some CSS rules attached to it.
This link seems relevant:http://stackoverflow.com/questions/45004/complex-css-selector-for-p...
I think I may have stumbled upon a better answer to your question. It turns out that with some simple modifications to the the TinyMCE setup you can allow the user to select from the style dropdown and apply styles directly to a block element (i.e. not a span).
So supposing you have this in your typography.css:
Just copy concrete/blocks/content/editor_config.php to /blocks/content/editor_config.php and insert the following code:
near the end of the file, just before this:
Now if you open an editor (at least in advanced mode), you can make an unordered list, click anywhere in it and select 'Fancy Bullets' from the styles drop-down. The bullets should become squares and you should see in HTML view that the class has been applied correctly to the <ul> element with no <span> inserted. For more info, see here:http://tinymce.moxiecode.com/examples/example_24.php...
So supposing you have this in your typography.css:
ul.fancy-bullets { list-style-type: square; }
Just copy concrete/blocks/content/editor_config.php to /blocks/content/editor_config.php and insert the following code:
// Style formats style_formats : [ {title : 'Fancy bullets', selector : 'ul', classes : 'fancy-bullets'} ]
}); </script>
Now if you open an editor (at least in advanced mode), you can make an unordered list, click anywhere in it and select 'Fancy Bullets' from the styles drop-down. The bullets should become squares and you should see in HTML view that the class has been applied correctly to the <ul> element with no <span> inserted. For more info, see here:http://tinymce.moxiecode.com/examples/example_24.php...
can't we use the advanced toolbar configuration in "Sitewide Settings" to set these formats?
Would be nice if we don't have to modify files for this! But nice catch!
Would be nice if we don't have to modify files for this! But nice catch!
The method works, do you know of a way to make this edit install with a theme? Seems the user should click and have all the styles set. Right now the tiny mc edit requires manual editing.
Either way thanks for the solution, possibilities are endless.
Either way thanks for the solution, possibilities are endless.
you can easily override the config value for the toolbar but that's not a great idea as it would override a custom configuration the site owner might not want to lose.
We'd need a second config value or something we pull from a theme. --> core modification
We'd need a second config value or something we pull from a theme. --> core modification
Remo and netclickMe: I like your ideas of being able to set this up from either the dashboard or from code... For reference, here is the thread I found where abberdab explained how to do change the settings.
http://www.concrete5.org/community/forums/customizing_c5/tinymce-cu...
AnotherAndrew supplied the link here:
http://www.concrete5.org/community/forums/usage/tinymce-editor-head...
http://www.concrete5.org/community/forums/customizing_c5/tinymce-cu...
AnotherAndrew supplied the link here:
http://www.concrete5.org/community/forums/usage/tinymce-editor-head...
.LargeText {
}
.LargeText div {
font-size: 24px;
font-weight: bold;
}