Changing colors for buttons shortcodes

[Bark201]

Some of my old buttons shortcodes look like the following:

[x_button type=“transparent” shape=“pill” size=“large” block=“true” circle=“false” icon_only=“false” href=“mysite.com title=”" target="" info=“none” info_place=“top” info_trigger=“hover” info_content="" style=“max-width: 90%;margin: 45px auto;padding-bottom: 0.714em;padding-top: 0.714em;”]Learn More[/x_button]

I know it’s using the default font color and background. Is there a way to change the background color (also when on hover) and font colors within the shortcode? Like adding font color: black font on hover: blue etc.

Thanks.

[marc_a]

Hi @Bark201,

Thanks for reaching out!

The only option to style your button shortcode is by adding a class name and style it with CSS. Your button shortcode show looks like this one.

[x_button class="btn-custom" type="transparent" shape="pill" size="large" block="true" circle="false" icon_only="false" href="mysite.com" title="" target="" info="none" info_place="top" info_trigger="hover" info_content="" style="max-width: 90%;margin: 45px auto;padding-bottom: 0.714em;padding-top: 0.714em;" ]Learn More[/x_button]

Then your CSS code on default:

.btn-custom {
	// your CSS code here
}

On hover:

.btn-custom:hover {
	//your CSS code here
}

Please note that providing custom CSS is outside the scope of our theme support. We are just giving some hints or guides on how you can achieve it.

On the other hand, I highly advise to use the button element to avoid any custom CSS and it is not recommendable to use the legacy shortcodes.

Hope that helps.

[Bark201]

Thank you for your reply, I will look into this.

There is something else I wanted to ask. In my posts I used to have author name, when clicked on it’s linked to the homepage. How do I add it again in posts only (not pages?)?

I will provide url in private

[marc_a]

Hi @Bark201,

This can be done using the Layout Builder where you can customize your posts layout and Layout Builder is exclusively available on Pro.

• https://theme.co/docs/layout-builder-overview

If you want to use the Layout Builder, I suggest that you convert your X to Pro, here’s how:

• https://theme.co/docs/converting-from-x-to-pro

On the other hand, If you want to stick with X, the only option I can see is hiding the author name in the pages and just showing it to posts pages through CSS but it will fall under customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.