I finally got it working after messing with the Arrays a bit. I found an issue that's troubling and I'm hoping for some help:
When I select the text I want to apply a custom style to, add a link, then select the style from the dropdown I noticed that parts of my Array are getting messed up in the HTML editor (you can't see the link in Visual after the style is applied).
What I'm trying to do is create a link that uses an image rather than text, using CSS. So the link text itself is indented while the background image should appear in it's place. I do this very often using CSS, and it works using my stylesheet, but not when I use those styles in an Array. The code is changing slightly (see below) so it's breaking the style I want to apply and not showing anything at all on the frontend.
Here's a copy of my Arrays:
Array( Array( 'title' => 'Get Started Button', 'selector' => 'a', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnGetstarted.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')), Array( 'title' => 'Find Out More Button', 'selector' => 'a', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnFindOutMore.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')))
And here's a copy of the code after it's applied in the editor:
<a style="width: 177px; height: 50px; outline: medium none; padding: 0px; display: block; overflow: hidden; background-image: url('images/btnGetstarted.png}'); background-position: center top; background-repeat: no-repeat; text-indent: -9999px; float: right;" title="Test Post" href="http://mywebsite.com/test-post/">Get Started</a>
Notice the extra code that's being added - it changes it to:
What I need to actually do is assign a div to the style, but I don't know how to do that with an Array. If I could just assign a style that is already defined in my stylesheet, then that background image would work fine, and so would the rollover. Right now, all I can see in the HTML tab of the editor, after applying the style, is everything but the background image. That is getting changed in the code for some reason, and the image is not appearing in the editor at all, so you can't see the text unless you view HTML.
Is it possible to use the plugin add-on to just add a div style using an array? All I really need to do is give the client the ability to add links to these 2 styles from the dropdown, and I'd really like to keep the css in the stylesheet, rather than in the arrays if that would work.