[Plugin: Ultimate TinyMCE] Array is changed when added to editor

Okay, so explain to me what exactly it is you are trying to do. And I’ll see if I can determine the best method.

Perhaps show me the css you would like to use which you know works from your stylesheet. Then, we can identify where it’s going wrong.

OK sounds good! Here’s my css for one of the buttons:

.getstarted {
	width: 100%;
	height: 50px;
	margin: 5px 0 15px 0;
}

.getstarted a, .getstarted a:link, .getstarted a:active, .getstarted a:visited {
	width: 177px;
	height: 50px;
	display: block;
	overflow: hidden;
	background-image: url(images/btnGetstarted.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -9999px;
	float: right;
}

.getstarted a:hover {
	background-position: center bottom;
	background-repeat: no-repeat;
}

Then I want to use it like this:

<div class="getstarted"><a href="....">Get Started</a></div>

Okay, we are going to try this first.

Thy using this as your array:

Array( Array( 'title' => 'Get Started Button', 'block' => 'div', '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')))

Hi Josh,

I tried that, but it broke the editor so it gets stuck in HTML mode and you can’t click back into Visual. If you want I can send you the login privately, if you’d like to check out the admin.

Thanks!~

You can do that. You can use my contact form here:
https://joshlobe.com/contact-me/

Working on it now…

Okay, I’ve added my premium classes and id’s plugin to your installation.

Try this workflow…

1. Hit return to make sure you are on a new line.
2. Type some text for your link.
3. Highlight that text and select (getstarted) from the dropdown classes.
4. Re-select your text again, and click the “insert link” button.
5. Type the link where you want to be sent.
6. This will make the text disappear from the content editor… but it will leave all the necessary code to make the image appear and be click-able.
7. Preview your page from your front-end of the website.

Now, is this what you were trying to accomplish? I may have mis-understood what you are attempting to do.

But, give this a try and see what you get…

Thanks! That looks like what we were going for, the button appears on the fronted perfectly and the link works. Now I just have to figure out how to add another button!
Thank you so much for your help. I’ll let them know this is working now.

You’re welcome.

To use another button… just set up another class. Like .getstarted2

Hi Josh,

I noticed in the advanced config there are 2 files mentioned in there, one is wp-content/plugins/ultimate-tinymce-classes-ids/css/classes_and_ids.css and the other is wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. What happens to these files when we perform upgrades?

I’m going to move the classes_and_ids.css to a stylesheet within our theme directory, but what about the other one?

You can’t move that stylesheet. It has to stay in the plugin directory. The scripts call the file from that location. You also cannot change the name of the file.

Neither of these two files will be affected during upgrades. One is from my premium classes and id’s plugin, and the other is from the default wordpress tinymce css.

That is the purpose of the advanced config premium plugin. It allows you to edit every single option in the tinymce interface. This was necessary in order to get the editor to load the styles from both locations.

That’s strange then, because I copied the classes_and_ids.css to a new file I named ‘advancedconfig.css’ in my theme directory, and changed it there in that box to the new link (didn’t change the other one). When I tried it in the editor, it worked even better, because now you can see the button appear in the text editor, floated to the right like it’s supposed to be. Before that, you couldn’t see the image in the editor. So far, it’s working fine, but if anything changes / breaks, I will change it back to what it was and update the other stylesheet in the plugin directory.