Docs

[JfantasyBooks]

Hey there, Themeco Team!

Name: JFantasyBooks
Site: Fantasy-Updates
Site Url: https://fantasy-books.live
WordPress Version: 4.6.1
X Version: 4.6.4
Cornerstone Plugin Version: 1.3.3

Problem:

I am trying to change the color of the the button, color of the button when I hover, color of the button text, and color of the button text when I hover when using the shortcode.

The shortcodes demo does not provide such information.

This is the shortcode currently: [button type=”flat” shape=”square” size=”large” block=”true” href=”#” title=”Example”][icon type=”bolt”]Sponsor Us[/button]

Can you help me with this?

[Friech]

Hi There,

Thanks for writing in! Lets put a class on that button shortcode

[x_button type="flat" shape="square" size="large" block="true" href="#" title="Example" class="mybtn"][icon type="bolt"]Sponsor Us[/x_button]

Then add this on your custom CSS on Customizer.

/*mybutton initial color*/
.x-btn.mybtn {
	border-color: red;
	background-color: white;
	color: black;
}

/*mybutton hover color*/
.x-btn.mybtn:hover {
	border-color: blue;
	background-color: black;
	color: white;
}

Feel free to change those color values.

Hope it helps, Cheers!

[JfantasyBooks]

So nothing happened.

My button is in my custom sidebar. Could that be the reason?

[Paul R]

Hi,

I can’t seem to find the button you are referring to.

Can you provide us the exact url of the page where we can see your button.

Thanks

[JfantasyBooks]

This reply has been marked as private.

[Lely]

Hi There,

Are you referring to the button Sponsor US? If yes, please add the class mybtn to the class property of the button. Like the previous sample by Friech. The class mybtn holds the styling so we have to add it for it to work.

Hope this helps.

[JfantasyBooks]

Oh, Thanks!

Last thing, so I’m trying to change the color of the text, but it won’t change. No matter what I do to ‘color’ in the css. Nothing seems to work.

[Friech]

Please update the provided custom CSS code above to this.

/*mybutton initial color*/
body .x-btn.mybtn {
	border-color: red;
	background-color: white;
	color: black;
}

/*mybutton hover color*/
body .x-btn.mybtn:hover {
	border-color: blue;
	background-color: black;
	color: white;
}

Cheers!

[JfantasyBooks]

You guys are awesome. Thank You!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts