Docs

[Andreas Bjerve]

Hi!

I´d like a certain margin of space between the text in the callout box and the callout button. Do you have the code for that?

…and I´d like the button to be wider (while the button text remains centered).

Finally, I´d like to make my own marketing circle for the button. I´ve browsed around and I realize this involves a few tricks, so I´d like to be sure I´m doing it right for my own page. (I have a heart image that I´ll split in two to replace the circle).

Thanks a lot guys! 😀

[Andreas Bjerve]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code :

.p-callout {
    margin-bottom: 100px;
padding: 0 2.35em;
}
.x-callout .x-btn {
    width: 93%;
}

.x-btn-circle-wrap:before {
    background-image: url("put background image URL here");
}
.x-btn-circle-wrap:after {
    background-image: url("put background image URL here");
}

Update this code :

.x-callout {
    max-height: 900px;
    max-width: 650px;
    margin: 0 auto;
}

To :

.x-callout {
    max-height: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 2.35em 0;
}

Hope it helps.

[Andreas Bjerve]

Thanks a bunch! 😀

The top part of my heart “marketing circle” image is a bad fit, size-wise. I tried making a bigger picture, but it seems to resize to a default.

Any fix for this?

Thanks!

[Thai]

Hi There,

Please add the following CSS:

.x-btn-circle-wrap:before {
    background-size: 200px 50px;
}

Hope it helps 🙂

[Andreas Bjerve]

Just fabulous…

Thank you so much!

[Christian]

You’re welcome.

[Joao]

Glad to hear it 🙂

[Andreas Bjerve]

Hi there,

I have one more thing now related to buttons.

I have a button (called “more about me”) that I want to have a different marketing circle image than I have in my callout box.

Do you guys have a code to target that button/marketing circle.

Thanks!

[Thai]

Hi There,

You can add the class to your callout buttons, something like this:

http://i.imgur.com/njuJYRJ.png

After that update all the custom CSS:

.callout-1 .x-btn-circle-wrap:before {
    background-image: url("put background image URL here");
}
.callout-1 .x-btn-circle-wrap:after {
    background-image: url("put background image URL here");
}

Hope it helps 🙂

[Andreas Bjerve]

It does. Thanks! 😀

[Joao]

Glad to hear it,

Let us know if you need help with anything else,

Joao

[Author]

Posts