Hi John, thanks very much for your reply.
Yes I knew I could use <span> instead, but unfortunately the <i> tags in the CSS files of the Bootstrap template I purchased have many other settings applied specifically to the <i> tag itself in addition to the "fa fa-bell" classes, e.g. to make the FA icons larger, different margins, shapes, borders, colours, etc.
And there are many variations of <i> as a sub-class of parent classes in the template. This means I would need to modify every <i> tag definition in the CSS files (there are lots!).
I did discover one useful trick to prevent the <i> tags being removed:-
Add an id="some-id" into the <i> tag, e.g.
<i id="id1" class="fa fa-book"></i>
Wonderful, but for one problem!
Now TinyMCE / C1 Visual Editor (not sure which), automatically changes the <i> to <em>, grrrrrrr!
Now to answer your question...
Yes, I have tried adding Blocks, Styles, Classes to the editor, with small success.
I totally re-organised common.xml into a more logical order and added lots of comments to help me understand how things worked.
Unfortunately common.xml is too long to paste in here, but here is a link to common.txt (.txt so as to retain the comment layout, save then rename as common.xml for viewing in VS). Note this is incomplete/experimental and not really much different to the original version supplied with C1.
The main problem is simply that TinyMCE is no good at inserting or working with nested tags (<div> <span>) in the WYSIWYG view of the Visual Editor. It's a real faff around, I presume you have tried it?
Once you've got them in there (eg manually paste some code into Source view), then you can change their Block style, or their element style or their Classes using the drop downs depending on what you have configured in common.xml.
However actually trying to insert and then select and work with the correct tags in the visual view of the editor is next to impossible! I know you can also click the tag names shown at the bottom of the editor screen, but even this is awkward, often having to click/select the same tag twice. It's all a bit messy.
If I am having trouble, god help my customer. And they will be very confused and then blame me when bits of the code they pasted mysteriously disappears!
I have had to seriously consider whether it is really worth spending a lot of time trying to devise a way my customer can use this or not. I think it just is not possible. The customer does not understand or even want to view source code.
And would they even want or know how to create a particular nice icon, over a rotating image, within a span, within a div inside a div inside a div to get that cool effect they saw in the template demo? I honestly don't think so.
90% of the time they will just want to insert some text and upload a couple of images with a very basic style applied.
My time would be better spent working on developing the data driven pages of the site using page templates to offer proper CSS styling in a fixed controlled manner, and telling my customer the Visual Editor is really only a very simple tool that is unable to insert posh styling effects for themselves.
I have wasted a lot of time on this and still not really any further forward.
WYSINWYG - unfortunately What You See Is NOT What You Get.
It is frustrating, and I would be interested to hear if others have had better success.
Thanks
Jim
Yes I knew I could use <span> instead, but unfortunately the <i> tags in the CSS files of the Bootstrap template I purchased have many other settings applied specifically to the <i> tag itself in addition to the "fa fa-bell" classes, e.g. to make the FA icons larger, different margins, shapes, borders, colours, etc.
And there are many variations of <i> as a sub-class of parent classes in the template. This means I would need to modify every <i> tag definition in the CSS files (there are lots!).
I did discover one useful trick to prevent the <i> tags being removed:-
Add an id="some-id" into the <i> tag, e.g.
<i id="id1" class="fa fa-book"></i>
Wonderful, but for one problem!
Now TinyMCE / C1 Visual Editor (not sure which), automatically changes the <i> to <em>, grrrrrrr!
Now to answer your question...
Yes, I have tried adding Blocks, Styles, Classes to the editor, with small success.
I totally re-organised common.xml into a more logical order and added lots of comments to help me understand how things worked.
Unfortunately common.xml is too long to paste in here, but here is a link to common.txt (.txt so as to retain the comment layout, save then rename as common.xml for viewing in VS). Note this is incomplete/experimental and not really much different to the original version supplied with C1.
The main problem is simply that TinyMCE is no good at inserting or working with nested tags (<div> <span>) in the WYSIWYG view of the Visual Editor. It's a real faff around, I presume you have tried it?
Once you've got them in there (eg manually paste some code into Source view), then you can change their Block style, or their element style or their Classes using the drop downs depending on what you have configured in common.xml.
However actually trying to insert and then select and work with the correct tags in the visual view of the editor is next to impossible! I know you can also click the tag names shown at the bottom of the editor screen, but even this is awkward, often having to click/select the same tag twice. It's all a bit messy.
If I am having trouble, god help my customer. And they will be very confused and then blame me when bits of the code they pasted mysteriously disappears!
I have had to seriously consider whether it is really worth spending a lot of time trying to devise a way my customer can use this or not. I think it just is not possible. The customer does not understand or even want to view source code.
And would they even want or know how to create a particular nice icon, over a rotating image, within a span, within a div inside a div inside a div to get that cool effect they saw in the template demo? I honestly don't think so.
90% of the time they will just want to insert some text and upload a couple of images with a very basic style applied.
My time would be better spent working on developing the data driven pages of the site using page templates to offer proper CSS styling in a fixed controlled manner, and telling my customer the Visual Editor is really only a very simple tool that is unable to insert posh styling effects for themselves.
I have wasted a lot of time on this and still not really any further forward.
WYSINWYG - unfortunately What You See Is NOT What You Get.
It is frustrating, and I would be interested to hear if others have had better success.
Thanks
Jim