Hpw can I edit my call to action color? (sydney)

Please, I haven’t find where to edit the color of my call to action “bottom”.

I found the option to change background, but I want to change the botton color.

Please, somebody help me!!!

Thanks

Hi Patty,

Customize/Colors/Primary color

Dear Patty,

To specifically change the style of call to action button in the main slider, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

/* Normal state */
.roll-button{
  background-color: #fff000;
  border-color: #fff000;
  color: #ff0000;
}

/* On hover state */
.roll-button:hover{
  background-color: #ff0000;
  color: #fff000; 
} 

To style the button of “Sydney FP: Call to action” widget, use this code:

/* Normal state */
.roll-button.border{
  background-color: #fff000;
  border-color: #fff000;
  color: #ff0000;
}

/* On hover state */
.roll-button.border:hover{
  background-color: #ff0000;
  color: #000; 
} 

Adjust the hex color code to any color of your choice.

Regards,
Kharis

Is it possible to specifically change the word color, background color, and hover color for a particular “sydney call to action” button, instead of changing all of them? Thanks!

Indeed, it is possible to do. Go edit the “Sydney FP: Call to action” widget > Widget Styles > Attributes > Widget Styles > enter a class name, e.g. my-cta-button.

Then apply the following CSS code:


/* Normal state */
.my-cta-button .roll-button.border{
  background-color: #fff000;
  border-color: #fff000;
  color: #ff0000;
}

/* On hover state */
.my-cta-button .roll-button.border:hover{
  background-color: #ff0000;
  color: #000; 
}

Regards,
Kharis

Hi Kharis,

It works perfectly! Thank you for your nice help!

Hi, I have been searching all of the forums but now I am stuck.

I have changed the colour of my CTA button using simple custom css.

But the writing on the button only shows if I hover over it.

I obviously need the writing to be showing all the time!

How can I fix this??

I am happy for the writing to stay white in colour.

And how can I make the button go transparent on hover??

VERY GRATEFUL for any help! It’s driving me mad!!

Here is my website url: www.begoodtoyoucoaching.com

Many thanks in advance!!

Hi,

How do you make the button go transparent on rollover?

Thanks
Stuart

Hi Stuart,

The below CSS code does transparent background on rollover state.


.roll-button:hover {
  background-color: transparent !important;
}

To apply custom CSS addition, you can add it to Appearance > Customize > Additional CSS from your site dashboard.

If that code doesn’t work for you, please share a link to your page where I can see the button.

Regards,
Kharis

Hi,

That works fine on desktop, however on mobile there is no font shown within the button.

Thanks
Stuart

link to site

Hello there,

Please use this below CSS code and let me know how it works.


.promo-controls .roll-button {
  color: #fff !important;
}

.promo-controls .roll-button:hover {
  background-color: transparent !important;
}


Regards,
Kharis

All works!

Thanks

Please close

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

How to fix this Call to Action BUTTOn Ploblem?

How can i fix this call to action Button problem please?

Hi Marco,

Edit your CTA widget, in the Attributes option, enter a custom class name into Widget Class field. For example: my-cta

To add custom style to the button, use this CSS code:


.my-cta .promo-controls .roll-button.border {
  border-color: #fff000;
  background-color: #fff000;
  color: #000;
}

.my-cta .promo-controls .roll-button.border:hover {
  border-color: #ff0000;
  background-color: #ff0000;
  color: #fff000;  
}

To apply extra CSS code to your site, add it to Appearance > Customize > Additional CSS.

Dear Kharis,
I’d like to change the colour of the text above the CtA-Button which I have identified as h3.title.
First question: is it wrapped in .promo-content or do I have to use the layer above which is .promo-wrap?
Second question: the elements color is defined by an element.style property (if that the right term, I usually code Java and C#…). How do I overwrite that? What I’ve read so far is that element.style can not be that easily overwritten.

Thanks for helping a css noob.

Regards
Larimow

Hello there,

To change the CTA text color, you don’t have to use additional CSS code as it’s tied in the design option of the widget. Edit your CTA widget, in the Widget Styles section, expand the Design tab. Then choose headings color.

Please see this screencast:

Cloudup

Regards,
Kharis

Hello Kharis,

thank you for this advice, I fixed the issue now. Still, my CSS-Question persists. What if I’d like to modify this text further? Add a shadow for instance, change the font etc?
Is there a way to overcome the element.style issue?

Regards
Larimow