Advanced CSS not working with TinyMCE

Store Builder Questions
1

Hello,



I’m trying to use the CSS tag in the TinyMCE HTML editor and it is not being saved. I suspect TinyMCE does not know what to do with it. The code is similar to this:


<br />
<figure class="myclass"><br />
<img src="link to image"><br />
<figcaption>caption text</figcaption><br />
</figure><br />

```<br />
<br />
When I place the code directly into the database the results are what I expect. I'm not really surprised that TinyMCE can't handle this. I'm just wondering if anyone else has run into problems like this and what they did to get around it.<br />
<br />
Thanks.
2

The tag is relatively new and not well supported in the browsers. I wouldn't use it.



[color=#000000][font=verdana, helvetica, arial, sans-serif][size=2]

Note:[size=2] Internet Explorer 8 and earlier versions, do not support the tag.[/size][/size][/font][/color]

3

CSS 'figure' is HTML5 markup, afaik none of the TinyMCE versions included with CS-Cart use HTML5, although there are some hacks you can no doubt find by searching for TinyMCE HTML5.



As a suitable alternative using current markup, in fact, if you do it this way, when adding in images using the TinyMCE editor, you can click the Apperance tab and select the class from there.



In your CS-Cart skin styles.css, add the following:



.image-with-caption {
background-color: #F3F3F3;
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
margin: 4px;
padding-top: 4px;
text-align: center;
}


Save, refresh your cache, now you can select Appearance Class “image-with-border”, ensuring the and

or you wrap the image text in are included in a div, something like this:

```php



This is the caption text



```
See the image below, that is how I generated this without the need to create a product and can just add the code in whichever WYSIWYG editor I want to have the 'Download brochure' image with styling included.
[attachment=6550:image-caption.jpg]

image-caption.jpg

4

I had a feeling that was the case. I'm only using it on one block so working in the Db is not an issue.



Triplets, I'm working on a non-supported browser fall back but thanks for bringing it up.

5

See the edit I made above, this should help you. Editing the database is fine if you're careful, but your changes will be overwritten any time you save a page in the admin which contains the WYSIWYG editor which uses that particular code you have manually edited.



Upgrades might be a bit iffy too, though I don't think any of the wysiwyg editors have any major role in the upgrade.

6

Thanks StellarBytes. Probably best to go with a variation of your suggestion.