Sydney FP Call to action button

Hello,
I just put in the Sydney call to action button at the end of my blog posts. I’m just wondering, is there a way to customize how the text looks in there? If so, how do I do that?
thanks

Hi Marta,

Could you please to post the URL of your site? and point me which CTA button that you want to customize?

Regards,
Awan

Here is the link

It’s in a widget at the bottom of my blog posts.

thanks

Hi,

Did you mean the navigation button (older post)? If yes, please put the CSS code below using custom CSS plugin:

.posts-navigation .nav-previous a, .post-navigation .nav-next a {
    background: #b746cf;
    color: #FFF;
    padding: 10px 15px;
    border-radius: 3px;
    font-size: 17px;
    line-height: 1.5;
}

No, I’m referring to the Sydney call to action button. The one right above the social share buttons, where is says, "want to be your own boss?"
thanks

Hi,

I am Sorry, but I can’t find the CTA button whith “Want to be your own boss?” button.
Could you please to let me know the URL of the page and take a screen shot on where the button is located?

Regards,
Awan

Hi Awan, here’s an example URL

How do I attach a screen shot?

Oh I see… so how do you want to customize the button?
change the background color and the text?
is it the button on those page only?

if yes, you can put the CSS code below using custom CSS plugin:

body.postid-1431 .promo-controls a.roll-button:hover {
    background-color: transparent;
    color: #691d80;
}
body.postid-1431 .promo-controls a.roll-button {
    color: white;
    background-color: #691d80;
    border-color: #691d80;
}

Regards,
Awan

It’s supposed to be at the bottom of every blog post. Is there a way to customize the text that’s above the button to different font?
thanks

Oh Okay, So firstly you have to go to:

  • Dashboard > Edit post > edit “Sydney FP: Call to action” widget > Attribute > widget class > then put this class name to the field : post-btn-widget

  • Then put the CSS code below to the custom CSS plugin:

.post-btn-widget .roll-button:hover {
    background-color: transparent;
    color: #691d80;
}
.post-btn-widget .roll-button {
    background-color: #691d80;
    color: #FFF;
    border-color: #691d80;
}

thank you!

Hi

My website is: http://www.chcheck.co.uk/

I want to edit the font of my call to action that’s in my footer to match the rest of my footer’s font. How can I do this without changing the rest of the formatting of the call to action in other areas of the website?

thanks in advance

Hi Cape,

Did you mean somethinl like this http://prntscr.com/gbqedp? if yes, please add the CSS code below:

.footer-widgets .roll-promobox.aside-style .promo-content {
    display: block;
}

Regards,
Awan

Thank you for replying!

Yes sort of - the button placement is better but I think I know how to do that in settings.

  1. I want to make the font style and size match the rest of the footer fonts without affecting the fonts of the other call to action in the main page…
  2. And close the gap between the title (get a quote) and the text/button

I see… You can try to add these CSS code:

  • for #1:
.footer-widgets #sydney_action-3 h3.title {
    font-size: 14px;
    font-weight: normal;
    color: inherit;
    margin: 0;
}

- for #2:
.footer-widgets #sydney_action-3 div {
    padding: 0;
    vertical-align: top;
}

Regards,
Awan

Hello! Your theme is absolutely wonderful! Please having problem with how to change the size of FP CALL TO ACTION. Here is my url. http://theinternetmedia.com, how can I fix it? I tried in custom CSS but I cant find the option to make it bigger. Thank you!

HI,

Please try to use this code below:

.roll-button {
    font-size: 18px;
}

Feel free to adjust the font-size value.

Regards,
Awan

Hello Awan, thank you very much! It fix it perfectly!

All the best!

1 Like