Top Footer Widget Link and Button Colors

Support
#1

Hello,

I found this code in a previous post.

.x-colophon.top .widget a {
color: #ffffff;
}

.x-colophon.top .widget a:hover {
color: #f7ec13;
}

But it changes the button text hover color as well as the link hover colors.
How can i make it so the button hover text stays black as I have in my global settings?

Primary URL https://usatcorp.wpengine.com/
Demo User Name demo
Demo Password 3c2bd7631efc

#2

Hello Jesse,

If you just want to target the links and not the buttons, you may update the code to:

.x-colophon.top .widget a:not(.x-btn) {
color: #ffffff;
}

.x-colophon.top .widget a:not(.x-btn)hover {
color: #f7ec13;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

Awesome, that works, thank you.

Side question… Is there a way to insert the X Pro button with short code into a footer widget? As of now I’ve only found short codes that appear to pull in the standard cornerstone style buttons. I’d like to be able to adjust the top and bottom padding to make the buttons in the footer widget to thinner in appearance. And I’d like to be able to adjust the border thickness. Which i’m not sure of how to do, since the button short code page doesn’t include examples of those modifications.

#4

Hi Jesse,

The button shortcode gets its styling from the Theme Options > Buttons configuration. Please adjust those options how do you want your general buttons to be.

See button size option.

Add this to Theme Options > CSS

.x-btn, .button, [type="submit"],
.x-btn:hover, .button:hover, [type="submit"]:hover {
	border-width: 8px;
}

Please do note that further customization from here would fall outside of the scope of our support.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#5

Sorry, my questions keep evolving as I change what I’m doing.

I’m using the button type “transparent” from the legacy button shortcodes.

How do i make the border on transparent buttons thinner, and how can i adjust the inner padding?

Footer Buttons
Footer Buttons1166×281 62.7 KB

#6

Hi Jesse,

Please add this to Theme Options > CSS

.x-btn.x-btn-transparent, .x-btn.x-btn-transparent:hover {
	padding: 0.1em 0.85em 0.1em 0.85em;
	border-width: 1px;
}

Feel free to adjust those values where you see it fits.

CSS padding property.
CSS border-width property.

Please do note that the customizations provided here are only a guide, it would ultimately be your responsibility to take it from here.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#7

Perfect! Thank you!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.