[HoustonParticipant]

What if I do not want a button in the callout? How do i remove it?

Many thanks,
Houston

[HoustonParticipant]

I abandon the button shortcode and am not just trying to use the css that you guys use to create it. Mainly the <div class=”x-callout center-text”> and <h2 class=”h-callout”>

I am using it like this:
<div class="x-callout center-text"><h2 class="h-callout">Success!!!</h2>You have completed the registration process for the Crested Butte Mountain conference. You will soon be receiving an email with details of your purchase. Please keep this for your records.</div>

But all of the text that is not wrapped in the H2 tag is gone. LOL. I just cant win. LOL.
http://192.185.90.213/~cbconfer/registration-complete/

Many thanks,
Houston

[HoustonParticipant]

So I decided to HIDE the button with css but I am now wanting to make some of the message larger. I am guessing you can not use inline css? When I put this in:

<span style=”font-size:120%;”>Crested Butte Mountain Conference”</span> it stripped out EVERYTHING. When I went back, there was no text in the Message portion of the callout. Still loosing this game.

Any ideas?

Many thanks,
Houston

[SupportMember]

Hi Houston,

Following line of CSS should remove the button

.x-btn, .button, [type="submit"] {
    display: none;
}

Thanks

[Zack FParticipant]

Hello,
I tried the CSS code above by inserting in into the Style (inline CSS) box while editing the callout, and it does not work. All I want to do is to be able to remove the button from any callout. Can you please check the CSS code again and let me know how to fix this?

Thank you.

[SupportMember]

Hi Zack!

Thank you for the info.

If you want to remove the callout button, just use this on Customizer > Custom > CSS:

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

That should remove it on the entire website. Cheers!

[Zack FParticipant]

Thank you for the code, but I am trying to leave it on some callouts and not on others on the same page. I try to input it into the individual callouts (in the custom inline CSS box) that I want the button removed from, and it does not seem to remove it.

[RadModerator]

Hi Zack,

Inline css will not work, it will only be applied to its call-out wrapper and not the button. You can instead use class selector to hide it.

Add this css at your customizer’s custom css, or preferably at your child theme’s css.

.x-callout.hide-callout-button a.x-btn {
display:none;
}

Then, when you add a callout, you could just add hide-callout-button at css field input. This will hide the button only if it has hide-callout-button class name.

Hope this helps.

[Zack FParticipant]

Thank you. It definitely helped but I found out how to do it by doing this:

On the page that you want to remove some buttons and keep others, input the code above in the <>CSS area for the page only with visual composer active. Then use hide-callout-button in the class name box and the CSS box on the callout itself.

This hid the callout button on individual callouts for me while leaving others active on the same page. I did also have the code above uploaded to the Custom CSS area in customizer as well. Not sure if that makes a difference, but it wasn’t working until I put the code in the custom CSS area in visual composer on the page itself.

[ChristianModerator]

Glad you’ve sorted it out Zack.

[Author]

Posts