[MarceloParticipant]

Hi there,

I have 3 buttons in my Home page and I want to add different colours to the buttons. I set up the first button as Global in the Custom CSS with the following CSS code:

.x-btn, .button {

color: #ffffff;
border-color: #BEAB54;
background-color: #DAC568;
text-shadow: none);
box-shadow: none;
}

.x-btn:hover {
color: #ffffff;
border-color: #BEAB54;
background-color: #f8df6e;
text-shadow: none);
box-shadow: none;
}

How do I add different colours to the other 2 buttons without changing the style of the first button?

I want to give the second button the following style:

.x-btn, .button {

color: #eeeeee;
border-color: #BEAB54;
background-color: #DAC568;
text-shadow: none);
box-shadow: none;
}

.x-btn:hover {
color: #f6f6f6;
border-color: #BEAB54;
background-color: #f8df6e;
text-shadow: none);
box-shadow: none;
}

P.S. I’m using the Button Element from Cornerstone

Many thanks in advance!

[FriechModerator]

Hi There,

Thanks for writing in! Basically .x-btn is the default class for all the button created with Xshortcode/Cornerstone. Try to apply another class on your specific buttons and use that class to target that button specifically.

.other-btn{
	color: #eeeeee;
	border-color: #BEAB54;
	background-color: #DAC568;
	text-shadow: none);
	box-shadow: none;
}

.other-btn:hover {
	color: #f6f6f6;
	border-color: #BEAB54;
	background-color: #f8df6e;
	text-shadow: none);
	box-shadow: none;
}

If this doesn’t solve the issue, please provide us login credentials in private reply.

Hope it helps, Cheers!

[MarceloParticipant]

This reply has been marked as private.

[RupokMember]

Hi There,

Thanks for updating! Please add your own color to the provided CSS. Like if you want to make the other-btn background silver provide something like –

.other-btn {
  background-color: #f3f3f3;
  border-color: #f3f3f3;
  box-shadow: none;
  color: #333;
  text-shadow: none;
}

Also provide the right color on hover too. Don’t just copy-paste the code, change with your own color code.

Hope this helps!

Cheers!

[MarceloParticipant]

Hi,

I did changed the CSS colours but the code doesn’t seems to be working. I used your settings just for reference. There is something that is not working. Even when I change the CSS settings nothing seems to change.

Help please!

[ThaiModerator]

Hi There,

I’ve just added following CSS under Customizer > Custom > CSS, and it’s working fine on my end:

.other-btn {
  background-color: #f3f3f3;
  border-color: #f3f3f3;
  box-shadow: none;
  color: #333;
  text-shadow: none;
}
.other-btn:hover {
	color: #BA3232;
	border-color: #CFBC69;
	background-color: #EAE1B7;
	text-shadow: none;
	box-shadow: none;
}

Please take a look at your website.

Regards!

[MarceloParticipant]

Hi there,

It’s working beautifully now! One question. As this change is only for the home page, does the code should be used in Custom CSS instead of Customizer > Custom > CSS?

As far as I was explained all the changes in a specific page should go in the Custom CSS and global changes in the Customizer > Custom > CSS. Is it correct?

Many thanks indeed for your time and attention!

You X-Theme Rock!!!

[RupokMember]

Hi There,

Thanks for updating! Glad that it works. However you can place it on Custom CSS. If you want to use it on global CSS (Customizer > Custom > CSS) then you can add preceding .home class to avoid conflict on other pages –

.home .other-btn {
  background-color: #f3f3f3;
  border-color: #f3f3f3;
  box-shadow: none;
  color: #333;
  text-shadow: none;
}
.home .other-btn:hover {
	color: #BA3232;
	border-color: #CFBC69;
	background-color: #EAE1B7;
	text-shadow: none;
	box-shadow: none;
}

However as it’s your custom class so it shouldn’t be any problem or conflict unless you use the class again on any page.

Hope this helps!

Cheers!

[Author]

Posts