Adding formats to the visual editor – span styles not working

[kenziejoy]

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!

[Brad Dalton]

This has nothing to do with your theme or Genesis

Please ask the site where you sourced the code.

---

Tutorials for StudioPress Themes & WooCommerce.

[kenziejoy]

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.

[carasmo]

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

[kenziejoy]

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