How to style a callout

Support
#1

Hi there

  1. I’d like to create a callout that doesn’t have a rounded rectangular shape, but is a proper sharp rectangle.
  2. I’d also like to set the callout background to a transparency of white, instead of having the opaque white colour.

I’ve added this code to the CSS, but it doesn’t achieve point 1 and 2 above.
What it does do is switch off the callout border, which I want.

.x-callout {
border: 0px solid transparent;
background-color: rgba(255,255,255,40);
box-shadow: none;
border-radius: 0px;
}

(I’m using Safari on a Mac, but also Chrome / Mac doesn’t work)

thanks a lot

#2

Hello There,

Thanks for writing in!

Do you want something like this:

If that is the case, please make use of this code instead:

.x-callout {
  border: 1px solid #e5e5e5;
  background-color: rgba(255,255,255,0.75);
  box-shadow: none;
  border-radius: 0px;
}

.x-callout:before {
    display: none;
}

Please keep in mind that with rgba(), the alpha should only be from 0.0 to 1.0.

Please let us know how it goes.

#3

Hi Rue! Thank you so much for your support, it means a lot to me!

The corners are now squared, thanks to your line of code (x callout before, display: none) which did the trick.

But I can’t seem to get the transparency of the box to work…My square callout box needs to be an alpha of white, otherwise my text won’t show up. As an aside: I’ve got a span style in the callout title (to vary font weight), but even if I take that out, the callout won’t show up the way I wanted.

Here’s my code relating to the callout (it sits in the custom CSS of that page, but also does’t work when I put it in the global CSS).

.x-callout .x-btn { /* call out button */
font-family: Lato;
text-transform: uppercase;
padding: 0.9em 1.29em 1em;
font-size: 60%;
}

.x-callout {
border: 0px;
background-color: rgba(255,255,255,0.75);
box-shadow: none;
border-radius: 0px;
}

.x-callout:before {
display: none;
}

.x-callout .x-icon-lightbulb-o {
display: none;
}

#4

Hello There,

Thanks for updating in! The background color is only controlled by this line: background-color: rgba(255,255,255,0.75);. You may change the opacity from 0.0 up to 1.0. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Best Regards.

#5

thanks! the site isn’t published yet, so I’ve sent a secure note with all the details. Thank you so much!

#6

Hi there,

Thank you for providing the login information. Judging the page you talked about we came up with this code which you can add to the CSS section of that page in Cornerstone:

#x-section-1 .x-callout {
    background-color: rgba(255,255,255,0.5) !important;
}

Also, the given page in the Secure Note is working OK. It took a little bit of time to load in the cornerstone, but I could see the page there.

To follow up the front end conflict problem please kindly open up a new thread to be able to help you in details.

Thank you.

#7

It worked!

I’m so buying another x theme license for my next web project.

Thank you so much for all your help. Have a great day.

#8

Glad to hear it :slight_smile:
Cheers!