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.

Attachments:

wysiwyg.css 4K

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: 

  1. Make sure you're running CMSB v3.07 or newer
  2. Copy /lib/wysiwyg.php to /lib/wysiwyg_custom.php to ensure your changes don't get overwritten when you upgrade
  3. In wysiwyg.php, search for "toolbar1" and add "styleselect " as the first option to add a style pulldown
  4. In wysiwyg.php, search for "style_formats" and uncomment the example block of style formats
  5. Reload your CMS and confirm the new WYSIWYG menu option appears
  6. Update style_formats with whatever styles you want listed
  7. Copy /lib/wysiwyg.css to /lib/wysiwyg_custom.css to ensure your changes don't get overwritten when you upgrade
  8. Add any classes needed by style_formats to wysiwyg_custom.css
  9. 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.

Dave Edis - Senior Developer
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?