Login | Sign up | Toll-Free: 1-800-752-0455
 
 

Forum

 

10 posts by 6 authors in: Forums > CMS Builder
Last Post: April 25, 2018

Greetings ... This is my first experience editing the wysiwyg.php on v.3.13..

I would like to use custom CSS and add a "Style Select" dropdown on the editor pages. Has that process changed?

At one time, I could add "styleselect" to the wysiwyg_custom.php file after adding additional styles to the wysiwyg_custom.css file as well as the CSS file for the site. It appears that's no longer how to get that done.

Can you point me in the right direction?

Dave

Dave, did you get this figured out?  If not, post back and I'll take a look for you.

Dave Edis - Senior Developer
interactivetools.com

Here's what I have determined. Correct me if I am wrong:

In order to use CSS classes, I need to edit the wysiwyg_custom.php file at line 71 in this manner:

  // styleselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
    // Note: Selecting a 'style format' from the 'Formats' dropdown adds whatever classes and styles are listed below
    // ... to the selected content and surrounds that content with the tag specified in inline, block, or selector.
    // ... If using classes, make sure they're defined in both lib/wysiwyg.css and your website CSS files.
    style_formats: [
    { title: 'Body Text Green', selector: 'p',  classes: 'bodytext_green' },
 { title: 'Headline Green', selector: 'p',  classes: 'headline_green' },
 { title: 'Headline Green Large', selector: 'p',  classes: 'headline_green_large' },
 { title: 'Body Link Green', selector: 'p',  classes: 'bodylink_green' },

The classes then appear in the Formats dropdowns on the editor page. Do I have that correct?

I can no longer see the CSS styles under a Styles dropdown as in past versions, correct?

Dave

Hi Dave,

That's correct, the only additional change you'd need to make to your wysiwyg_custom.php to get the formats to appear is to add styleselect option to the toolbar, here is some example code for doing that:

    // Define toolbar buttons. See list of toolbar buttons here: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
    toolbar1: "formatselect fontsizeselect | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | superscript subscript charmap | removeformat fullscreen",
    toolbar2: "forecolor backcolor | link anchor | blockquote hr image media table | pastetext paste | codesample code",
    toolbar3: '',

Then you can add the style formats that you'd like to appear in the drop-down:


    // styleselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
    // Note: Selecting a 'style format' from the 'Formats' dropdown adds whatever classes and styles are listed below
    // ... to the selected content and surrounds that content with the tag specified in inline, block, or selector.
    // ... If using classes, make sure they're defined in both lib/wysiwyg.css and your website CSS files.
    style_formats: [
      { title: 'Example Class', selector: 'p',  classes: 'exampleClass' },
      { title: 'Red header',    block: 'h1',    styles: {color: '#ff0000'} },
      { title: 'Red text',      inline: 'span', styles: {color: '#ff0000'} },
      { title: 'Bold text',     inline: 'b'},
      { title: 'Example 1',     inline: 'span', classes: 'example1' },
      { title: 'Example 2',     inline: 'span', classes: 'example2' }
    ],

This will cause a new drop-down with the different formatting options to appear in the WYSIWYG menu, these can be mixed with the Text Format options if required.

Note: If you're having issues with the updates to the wysiwyg_custom.php not appearing in the CMS, ensure that you remove any tinymce-temp gz files from the cmsb/data directory of the site.

Let me know if you've got any other questions.

Cheers,

Greg

Greg Thomas
PHP Programmer - interactivetools.com

Note, you can take this a bit further than the examples here. You can add rules that will add "wrapper" elements to your markup, which opens up a whole other world of opportunities. Here is an example...

Add this...

   { title: 'Intro', block: 'div', classes: 'intro', wrapper: true, merge_siblings: false },

Now you can select a group of elements, select "Intro" from the style select dropdown, and your html will go from this...

<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>

to this...

<div class="intro">
   <h1>Heading</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
</div>

Mind blown! Mine was :)

That’s so cool! I never realised you could do that. It means for instance I could do break out quotes etc. 

any more examples of that kind of thing?

Cheers,

Tim Forrest
Toledoh Enterprises
www.toledoh.com.au

Here are my base style_formats that I use for most projects:

style_formats: [  
   { title: 'Intro', block: 'div', classes: 'intro', wrapper: true, merge_siblings: false },
   { title: 'Divider Line', selector: 'p,h1,h2,h3,h4,h5,h6,div',  classes: 'divider' },
   { title: 'Feature Box', block: 'div', classes: 'feature-box', wrapper: true, merge_siblings: false },
   { title: 'Inset Box', block: 'div', classes: 'inset-box', wrapper: true, merge_siblings: false },
   { title: 'Pullquote', block: 'div', classes: 'pullquote', wrapper: true, merge_siblings: false },
   { title: 'Button', selector: 'a',  classes: 'btn'},
   { title: 'Images', items: [
     { title: 'Float left', block: 'div', classes: 'floatLeft', wrapper: true, merge_siblings: false },
     { title: 'Float right', block: 'div', classes: 'floatRight', wrapper: true, merge_siblings: false }
   ]},
   { title: 'Photo Caption', block: 'div', classes: 'photo-caption', wrapper: true, merge_siblings: false },
   { title: 'Footnote/s', block: 'div', classes: 'footnotes', wrapper: true, merge_siblings: false },
   { title: 'DEV Notes', block: 'div', classes: 'note', wrapper: true, merge_siblings: false }
],

Nice. Thanks!

Cheers,

Tim Forrest
Toledoh Enterprises
www.toledoh.com.au

Wow! I hadn't realised the style select option was so powerful. Thanks for the details Zip. 

Greg Thomas
PHP Programmer - interactivetools.com