Title: Visual Editor Content Styling
Last modified: August 22, 2016

---

# Visual Editor Content Styling

 *  [sultrain](https://wordpress.org/support/users/sultrain/)
 * (@sultrain)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/visual-editor-content-styling/)
 * I am adding a snippet in the section “Visual Editor Content Styling” in the CSS
   section and my understanding is that this snippet should appear in the Visual
   editing interface in place of the “Button Content” (single block)
 * I have tried a number of CSS types, even as simple as:
    `<div id="shnad2" style
   ="text-align: center; width: 100%; background-color: yellow;">ad1</div>`
 * I have tried using SPANs and even coping in the code displayed by the default
   MORE button:
    `<img class="wp-more-tag mce-wp-more" title="Read more..." src="
   data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
   alt="" data-wp-more="more" data-wp-more-text="" data-mce-resize="false" data-
   mce-placeholder="1" data-mce-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///
   yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">`
 * The result is that nothing appears in the Visual editor view (or when viewing
   the F12 view elements view in the chrome (all I see is the Button Content)
 * I have tried using different things in the Button Content section as well:
    <!–
   shnad1–> and [display-posts category=”category name here” posts_per_page=”1″/]
 * Still nothing has worked.
 * Please assist.
 * [https://wordpress.org/plugins/visual-editor-custom-buttons/](https://wordpress.org/plugins/visual-editor-custom-buttons/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [sultrain](https://wordpress.org/support/users/sultrain/)
 * (@sultrain)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/visual-editor-content-styling/#post-5756450)
 * Additional info:
 * When reviewing the /plugins/visual-editor-customer/buttons/js/button-1-1.js that
   was created for my new button, the code does not appear to include any reference
   to the CSS that was set in the Edit Button interface.
 * Should the CSS appear somewhere in this JS file ?
 *     ```
       (function() {
           tinymce.create('tinymce.plugins.vecb_button1', {
               init : function(ed, url) {
                   ed.addButton('vecb_button1', {
                       title : 'SHNAD1',image : 'http://www.skirtcollective.com/wp-content/uploads/vecb/ad-btn-1.png',onclick : function() {
                            ed.selection.setContent('<!--shnad1-->');
                       }
                   });
               },
               createControl : function(n, cm) {
                   return null;
               },
           });
           tinymce.PluginManager.add('vecb_button1', tinymce.plugins.vecb_button1);
       })();
       ```
   
 *  Thread Starter [sultrain](https://wordpress.org/support/users/sultrain/)
 * (@sultrain)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/visual-editor-content-styling/#post-5756465)
 * I see the **styling_content** in the wp_postmeta table and it contains the expected
   CSS code in the meta_value field.
 *  Plugin Author [cyberduck](https://wordpress.org/support/users/cyberduck/)
 * (@cyberduck)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/visual-editor-content-styling/#post-5756787)
 * In the section “Visual Editor Content Styling” you should only add pure css like
   this:
 * #shnad2 {
    text-align:center; width:100%; }
 * The hatm should be placed in the “Button content area like:
 * Before:
 * <div id=”shnad2″>
 * After:
 * </div>

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Visual Editor Content Styling’ is closed to new replies.

 * ![](https://ps.w.org/visual-editor-custom-buttons/assets/icon-256x256.png?rev
   =1116627)
 * [Visual Editor Custom Buttons](https://wordpress.org/plugins/visual-editor-custom-buttons/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/visual-editor-custom-buttons/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/visual-editor-custom-buttons/)
 * [Active Topics](https://wordpress.org/support/plugin/visual-editor-custom-buttons/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/visual-editor-custom-buttons/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/visual-editor-custom-buttons/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [cyberduck](https://wordpress.org/support/users/cyberduck/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/visual-editor-content-styling/#post-5756787)
 * Status: not resolved