Applying strict stylesheet (CSS) properties on classes in Umbraco 4.x.x
Has anyone any experience of making stylesheet properties for the RTE much more strict on classes?
You can add element names eg h1, h2 p etc and classes eg .className, but when I try and add img.className for example the properties fail to apply in the styles dropdown (version 3 of tinyMCE).
An example, I created a property called 'ImageRight' with a class name of .imageRight to apply a right float to an image, then added this to the parent Editor stylesheet to ensure the property displays in the RTE. True to form the property appears in the styles dropdown and you can apply the class to an image. The problem is you can apply it to any other block level element! Thankfully these rules only affect the RTE stylesheets as they're kept seperate from the site styles....But it would be nice to lock down classes in the editor too!
I know I'm preaching to the choir here, but for anyone else who may find this and be confused...
You could negate the effect of this class on other block elements by simply using
img.floatRight {float:right}
in the css. Then other block elements won't be affected by the style. Making the styles dropdown "context-aware" would be cool, but in the interests of KISS the above solution will work.
Dan thats exactly what i'm doing in the site style to ensure if anyone was to mess up in the RTE, at least it wont apply sitewide. But i'd like it to work on the RTE editor stylesheets too!
Ahh, in that case - it is a bit crap. Thankfully they don't call it a "WYSIWYG" in umbraco, as with all of the js html editors what you see is most definitely not what you end up getting!
Thought i'd note something I have discovered. If you have e.g. the following styles:
Heading 2 => h2 Paragraph => p Leading Paragraph => .leading (because ideally youd have p.leading but it doesn't work)
Then once the user has switched to Leading Paragraph, there is no way to swtich back to normal paragraph - because selecting Paragraph does not remove the class. My workaround is to add another style for normal paragraph with alias = ".". When selected, this removes the .leading class:
Heading 2 => h2
Paragraph => p Paragraph: Leading => .leading Paragraph: Normal => .
My advice would be to not to try and do too much within the RTE. While they do provide alot of flexibility, it can also be a bit of a mess depending on how much you try to do. The control freak in me would prefer to take flexibility away from basic users and editors and build a document type tailored specifically to a certain template. You should actually have more flexibility (as a developer) further down the line as a site grows as your content isn't all in one big bucket (the RTE) of course there's always a balance you have to strike between the two. What are othe people's thoughts on this as I'd be curious to know and learn from others experiences.
Applying strict stylesheet (CSS) properties on classes in Umbraco 4.x.x
Has anyone any experience of making stylesheet properties for the RTE much more strict on classes?
You can add element names eg h1, h2 p etc and classes eg .className, but when I try and add img.className for example the properties fail to apply in the styles dropdown (version 3 of tinyMCE).
An example, I created a property called 'ImageRight' with a class name of .imageRight to apply a right float to an image, then added this to the parent Editor stylesheet to ensure the property displays in the RTE. True to form the property appears in the styles dropdown and you can apply the class to an image. The problem is you can apply it to any other block level element! Thankfully these rules only affect the RTE stylesheets as they're kept seperate from the site styles....But it would be nice to lock down classes in the editor too!
Martin
I don't think you can lock down the classes in the way you want.
You can change the name of the class/style to include where it should be used?
I know I'm preaching to the choir here, but for anyone else who may find this and be confused...
You could negate the effect of this class on other block elements by simply using
img.floatRight {float:right}in the css. Then other block elements won't be affected by the style. Making the styles dropdown "context-aware" would be cool, but in the interests of KISS the above solution will work.
Dan
Hi
Dan thats exactly what i'm doing in the site style to ensure if anyone was to mess up in the RTE, at least it wont apply sitewide. But i'd like it to work on the RTE editor stylesheets too!
Martin
Ahh, in that case - it is a bit crap. Thankfully they don't call it a "WYSIWYG" in umbraco, as with all of the js html editors what you see is most definitely not what you end up getting!
Good luck,
Dan
Hi
Thought i'd note something I have discovered. If you have e.g. the following styles:
Heading 2 => h2
Paragraph => p
Leading Paragraph => .leading (because ideally youd have p.leading but it doesn't work)
Then once the user has switched to Leading Paragraph, there is no way to swtich back to normal paragraph - because selecting Paragraph does not remove the class. My workaround is to add another style for normal paragraph with alias = ".". When selected, this removes the .leading class:
Heading 2 => h2
Paragraph => p
Paragraph: Leading => .leading
Paragraph: Normal => .
Cheers
Andy
My advice would be to not to try and do too much within the RTE. While they do provide alot of flexibility, it can also be a bit of a mess depending on how much you try to do. The control freak in me would prefer to take flexibility away from basic users and editors and build a document type tailored specifically to a certain template. You should actually have more flexibility (as a developer) further down the line as a site grows as your content isn't all in one big bucket (the RTE) of course there's always a balance you have to strike between the two. What are othe people's thoughts on this as I'd be curious to know and learn from others experiences.
- Tim
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.