• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding formats to the visual editor – span styles not working

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding formats to the visual editor – span styles not working

This topic is: resolved

Tagged: css, format, style

  • This topic has 4 replies, 3 voices, and was last updated 9 years, 7 months ago by kenziejoy.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 28, 2015 at 11:51 pm #172185
    kenziejoy
    Participant

    Hi,
    I'm trying to add styles to the drop down menu in the visual editor. I was using this as a guide
    http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/

    And it appears to be working - The styles appear in the drop down and when I highlight text and apply it in a post I can see in the text editor that the text is correctly surrounded by span style with the right class tags. But the styles that I wrote for those tags in the css aren't being applied in the post. Is there a reason that span style doesn't work in wordpress or Genesis? Or does it mean that something is overriding my class styles in the CSS?

    Thanks - I'm so close!

    November 29, 2015 at 12:54 am #172186
    Brad Dalton
    Participant

    This has nothing to do with your theme or Genesis

    Please ask the site where you sourced the code.


    Tutorials for StudioPress Themes.

    November 29, 2015 at 12:12 pm #172207
    kenziejoy
    Participant

    Well it does, because I specifically want to know if there is any reason that Genesis does not allow this. Is there a setting in the Genesis framework that I need to adjust in order to make this work - because the directions are for vanilla WordPress.

    November 29, 2015 at 12:31 pm #172209
    carasmo
    Participant

    It's a multi-step process and it doesn't have anything to do with Genesis per se, it's whether or not you did the following:

    1. Add the button and the styles in functions.php with the mce_buttons_3 and tiny_mce_before_init
    That will give you the drop down and show the styles you set up in the array of the latter.

    2. To see your styles in the visual editor, Google for "wordpress editor style sheet"
    http://www.carriedils.com/add-editor-style/

    3. To see the styles applied on your site, you need to add them in your child theme's style.css document.
    In your style.css file you create classes like this:

    h2 .my-span-style, 
    h3 .my-span-style, 
    blockquote .my-span-style
    /* and so on with a comma between selectors but not after the last one */
      { 
       font-family: 'something', font-stack-goes-here;
    }

    for each tag (except p, including blockquotes)
    or use !important. Basically you can't over-ride specificity of CSS unless you are using the same or greater specificity or you use !important which I don't recommend.

    .my-span-style {
       font-family: 'something', font-stack-goes-here!important;
    }

    Google for font-stack, CSS specificity, and other terms you are not sure of.


    Genesis Theme Customization and Help

    December 2, 2015 at 7:18 pm #172547
    kenziejoy
    Participant

    Ahhh, I think it was the specificity that got me because everything else seemed to be working. Ok - thank you, I will try that.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble