Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Can anyone share any ideas on how to create a Button / Highlighted Text using HTML?

Hello!

I hope you can help. In our content body, we would like to provide a hyperlink to other content that looks like a button so it is more pronouned than just larger hyperlinked text. Does anyone know if there is the ability to highlight text or some HTML code where we can create a visual button style please? 

My next thought is a single cell table, with background colour but open to any funky ideas? Thank you!

1 Reply 1
Boss

Hi,

it wouldn't be too hard, but Khoros is stripping out any custom added classes from links, so it can't be done by simply adding Khoros button classes to a link via the HTML editor of TinyMCE. What we tend to do as a workaround is to use a combination of styling that is not recommended to use anyways, means a link that is also bold and italic for example, like so:

<em><strong><a href="https://yourlink.com">Button Text</a></strong></em>

 

gotta make sure the order is correct, e.g. when you do it in the editor you highlight the link then press the "bold" button, then the "italic" button (or you can define all permutations in CSS as well, but we don't do that so it's technically still achievable to have a bold and italic link by simply changing the order of applying the style).

Then you need to define the proper styles (don't forget :hover & :focus styles!), but basically it's copying (or adding to the right place in SASS) the styles of your regular buttons that you use in your community into a CSS block like this:

.lia-message-body em strong a {
    display: inline-block;
    ... your other styles
}
.lia-message-body em strong a:hover,
.lia-message-body em strong a:focus {
    ...your :hover & :focus styles
}

 

this you only have to do once (e.g. define your "inline"-button styles) and then you can just format a link that way in the rich text editor and it will turn into a button.


Lead-Dev @glowing blue

If my answer was useful to you, please consider marking it as a solution, this helps somebody with a similar question finding it more quickly.
Thank you!

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.