Docs

[agentnightingale]

Hi there

I am trying to style the call out box on this page: http://ultimatestrengthtest.nightingalewebsites.co.uk/our-approach/

I want to add a background image, remove the grey border and not have any text appear where it currently states ‘ Don’t forget to enter in your text.’

I added the custom class – ‘my-custom-class’

I tried adding the background image with the following CSS, but it didn’t work:

.my-callout :before {
background-color: transparent;
background-image: url(http://ultimatestrengthtest.nightingalewebsites.co.uk/wp-content/uploads/2016/10/colour.jpg);
background-position: 50% 50%;
background-size: cover;
}

I am not sure if the call out box is the best way to create this effect (new to X) so if there is a better way please let me know.

Thanks for your help!
All the best
Sam

[Joao]

Hi Sam,

You need to use this code instead:

.x-callout.my-callout:before {
background-color: transparent;
background-image: url(http://ultimatestrengthtest.nightingalewebsites.co.uk/wp-content/uploads/2016/10/colour.jpg);
background-position: 50% 50%;
background-size: cover;
}

Hope it helps

Joao

[agentnightingale]

Thanks for that – are you able to address the other questions for me?

Remove the grey border around edge
Not have any text appear where it currently states ‘ Don’t forget to enter in your text.’

Thank you
Sam

[Jade]

Hi Sam,

Please add these code:

.x-callout {
    background-color: transparent;
}

.p-callout {
    visibility: hidden;
}

Hope this helps.

[agentnightingale]

Hi that’s great.

One last question – what do I need to do to get the text ‘Yoram Sher’ to be in the centre of the the call out box?

Thanks for the help!
Sam

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-callout {
    text-align: center !important;
}

Hope it helps

Joao

[Author]

Posts