Adding custom CSS

2 posts by 2 authors in: Forums > CMS Builder
Last Post: April 5, 2016   (RSS)

By Kittybiccy - April 5, 2016

Are there any up-to-date posts or documents explaining how to add custom CSS to my wysiwyg.css file? Have been trying to follow some old posts but I can't get the custom styles needed, displaying in the wysiwyg dropdown.

Have tried adding in my custom CSS to the wysiwyg.css file (do we do it here or do we still need to create a wysiwyg_custom.css file?) and also editing the edit_functions.php file (I've tried taking out the majority of the theme_advanced_buttons1 and I've emptied cache a few times but no change!).

I want to add in CSS for an h2 class (so we can have different coloured h2 elements) and also a p class (so that we can have two sizes of p text). I don't want the client using the colour or font size elements!

Any help or direction greatly received, thanks!
Hannah

By Damon - April 5, 2016

Hi Hannah,

The first step is to copy both these files:
/cmsb/lib/wysiwyg.css
/cmsb/lib/wysiwyg.php

and save as:
/cmsb/lib/wysiwyg_custom.css
/cmsb/lib/wysiwyg_custom.php

This will allow you to upgrade CMS Builder in the future without any of your customizations being overwritten.

Don't edit the edit_functions.php or any of the other CMS Builder library files as this will probably break things. Everything you want to do can be done by editing the two new custom files you created.

To add buttons or dropdowns to the WYSIWYG editor, here are some steps:
http://www.interactivetools.com/kb/article.php?Customizing-the-WYSIWYG-editor-buttons-22 To add the style select dropdown, add this

To add the style select dropdown, add this styleselect into the button list in the wysiwyg_custom.php file. Next, you want to add the styles that will appear in this dropdown into the wysiwyg_custom.css. If I add these simply example styles into the

If I add these simple example styles into the wysiwyg_custom.css: 

.red { color: red; } 
.green { color: green; }

then you will get red and green in the styleselect dropdown. After you make the edits to the wysiwyg_custom.php and wysiwyg_custom.css, upload to your CMS Builder installation via FTP. Then log into CMS Builder and do a hard refresh, usually CTRL+Shift+r to hopefully clear the cache.

After you make the edits to the wysiwyg_custom.php and wysiwyg_custom.css, upload to your CMS Builder installation via FTP. Then log into CMS Builder and do a hard refresh, usually CTRL+Shift+r to hopefully clear the cache.

Let me know if you have any questions about any of these steps.

Thanks!

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/