Custom CSS
4 posts by 3 authors in: Forums > CMS Builder
Last Post: November 30, 2018 (RSS)
By furcat - November 26, 2018
I need assistance getting custom styles available in the wysiwyg editor on CMS. I have edited the cmsb/lib/wysiwyg.css file to include the following styles:
img { outline: 0; border: 0 none; max-width: 100%; height: auto; vertical-align: top; -ms-border-radius: 6px; border-radius: 6px; }
img + h2, img h3, img h4 { margin-top: 15px; }
img.alignright { padding: 0; float: right; margin: 5px 0 10px 30px; }
img.alignleft { padding: 0; float: left; margin: 5px 30px 10px 0; }
img.aligncenter { float: none; display: block; margin: 5px auto 15px; }
img.aligncenter:first-child { margin-top: 0; }
img.aligncenter:last-child { margin-bottom: 0; }
.content-section:first-child { margin-top: 0px; }
.content .list-style li { position: relative; padding-left: 18px; margin-left: 0; margin-bottom: 12px; }
.content .list-style li:last-child { margin-bottom: 0; }
.content .list-style li:before { font-family: 'FontAwesome'; content: '\f105'; color: #1863AB; position: absolute; left: 1px; top: 4px; font-size: 16px; line-height: 18px; }
.light .content .list-style li:before, .box-s3 .content .list-style li:before, .box-s4 .content .list-style li:before, .call-action:not(.dark) .content .list-style li:before { color: #fff; }
.content .list-style.dots li:before { content: '\f111'; font-size: 8px; top: 5px; }
However, when I click on the styles in the editor all I get are the standard styles. What am I doing wrong?
Thank you.
By Dave - November 26, 2018
Hi furcat,
The WYSIWYG we use in CMS Builder is TinyMCE: https://www.tiny.cloud/
First, make sure you're using CMSB v3.07 or better as that's when we switched to TinyMCE 4.
Here's how to add styles:
- Make sure you're running CMSB v3.07 or newer
- Copy /lib/wysiwyg.php to /lib/wysiwyg_custom.php to ensure your changes don't get overwritten when you upgrade
- In wysiwyg.php, search for "toolbar1" and add "styleselect " as the first option to add a style pulldown
- In wysiwyg.php, search for "style_formats" and uncomment the example block of style formats
- Reload your CMS and confirm the new WYSIWYG menu option appears
- Update style_formats with whatever styles you want listed
- Copy /lib/wysiwyg.css to /lib/wysiwyg_custom.css to ensure your changes don't get overwritten when you upgrade
- Add any classes needed by style_formats to wysiwyg_custom.css
- See docs if needed: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
Hope that helps! Let me know if that works for you.
interactivetools.com
By furcat - November 27, 2018
Yes! It works. Thank you very much.
Another question: I have a style for lists that I want to use:
<ul class="list-style dots">
<li>Eam ea errem graeco vulputate mel scaevola appetere volutpat</li>
<li>Lvulputate mel scaevola appetere volutpat</li>
<li>Dappetere volutpat vix et munere</li>
<li>Rgraeco vulputate mel scaevola appetere</li>
</ul>
I put the class in wysiwyg.php as follows:
{ title: 'Bullets', selector: 'ul', classes: 'list-style dots' },
It doesn't work unless I select the bullet items and use the editor to create a list, and then select "Bullets" from the additional style menu, I'm assuming because there isn't a "<ul>" until I actually create a list.
Is there a more elegant solution for that situation?
By daniel - November 30, 2018
Hi furcat,
It doesn't work unless I select the bullet items and use the editor to create a list, and then select "Bullets" from the additional style menu, I'm assuming because there isn't a "<ul>" until I actually create a list.
Is there a more elegant solution for that situation?
Unfortunately, when dealing with something complex like a list that has nested elements, this is about the simplest method for adding CSS classes, beyond perhaps building a custom plugin solely for that function.
Let me know if I can help with anything else,
Technical Lead
interactivetools.com