Custom Button Codes

[DaisyB]

Hey guys! Can I have a little help on my custom button codes? For some reason, they're not quite right, and I'm not fluent enough in html to figure out what's wrong. :/ 

For this button, I want members to be able to select their text and use this particular color (the reason we have it as a button is simply for the ease of access for when we ask members to color code certain posts, as opposed to them having to find the color we want.)

This is my code: 

<font color="#FF0000">{content}</font>

The issue members are having is that they're having trouble selecting multiple paragraphs and getting the formatting to work. When I test it, I also notice that it adds spacing to the top and bottom of the selection as well. I have a few of these shortcut buttons to specific colors/formats and I also tried seeing what would happen if I formatted the text (for example, in red), and I wanted to change my mind and format in blue, I wasn't able to do that. Is there a better way to format so that selected text ends up in a different color? Is there a way to create a button that is able to undo the formatting/stop the formatting? The same way the 'bold' button undoes it/stops bolding text when you click it again? 

I have another set of buttons that are staff only, and they're a way for staff to insert comments into member posts if necessary. On the old version of our software, we used to do this via custom BBCode, but I've been advised that custom buttons are the way to go. This is the code I've worked out so far: 

<p style="border:1px; border-style:solid; border-color:black; padding: 1em; color:#4B0082">Daisy says: </p><br>.

Which should be my comment in purple text with a box surrounding it, starting with 'Daisy says"'. I used to be able to type something, but the BBCode around it, and have what I typed stay within the confines of the box, but now if I type first, and then press the formatting button, it erases everything I typed. If I press it first, then type, it works just fine...but I'm unable to get the box to go away when I want my comment to be done. And if my comment is a little longer and is multiple lines/paragraph? (which is very rare, but happens), and I press enter, it just creates a new box, instead of keeping everything in one box. I have a period at the end of the code intentionally so far, only as a way to get out of that formatting, since I haven't yet worked out how to turn it off. Is there anything I can do to make this code better? 

Anddddd, I know this is so long, but there's one more thing I've love help with! When I try to edit the already existing custom buttons (for example, if I wanted to change the color from purple to green), my edits don't seem to save? I end up having to delete the button and then reinstall it with the new code. Any thoughts on that? 

Thanks! 

 

[opentype]

None of these example seem like good solutions. This would be a clean one:

<span class="Your-Class-Name">{content}</span>

Then add this class name to the whitelisting option and define the styling in your theme's custom.css:

.Your-Class-Name {
color: #FF0000;
}

 

[DaisyB]

That is super helpful! You might have to help me a bit though; what actually is a whitelisting option? And any ideas about why changes to my custom button codes aren't saving?