CSS to hide button in Callout Element

Support
#1

I like the look of the Callout element in Renew stack to use for our mission statement, however, I don’t want the button. I need help with the custom css to hide the button.

The page is http://898.6bc.myftpupload.com/about/mission/

I added a class to the callout element on that page (callout-nobutton), but i’m not sure what the css should be to hide the button.

Thanks for the help!

#2

Try this:

.x-callout a {
display: none;
}

It will remove all buttons in callout elements.

If you want to remove it only on one page, you should try something like this:

.post-275 .x-callout a {
display: none;
}

P.S. Post-275 is the class of your page.

#3

Thanks. This works for this page. If I wanted to use this style other places, can I use the class name? I changed it (for simplicity) to noclass on the mission page, but…

.nobutton .x-callout a {
display: none;
}

does not work

Thanks again for your help.

#4

Hello there,

Thank you for keeping us updated.

If you want to remove the callout button where you have input the class as nobutton, please apply the following custom CSS (this may be applied in Customize --> Custom --> CSS):

.nobutton .x-btn{
  display:none;
}

I hope this helps :slight_smile:

#5

Thank you Jordan. A related question… I set up a classes* to change the background colors of some of the callouts on the homepage. Those color changes necessitate a change to the button text (link color) too.

  • classes: .co-red and .co-gray

I tried:
.x-callout .co-red.x-btn a {
color: #fff;
}

but that doesn’t work. Your help is greatly appreciated!

#6

Hello there,

No problem at all :slight_smile:

May you try the following custom CSS instead of the one you tested please?

 .co-red .x-btn{
color: #fff;
}

Please let us know how this goes for you :slight_smile:

#7

That worked. Thank you!

#8

No problem at all! :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.