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 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,

Daniel
Technical Lead
interactivetools.com