Button text size

[Chris McGee]

#653782

I am new to using Avada and even WordPress in general. I’ve learned quite a bit from the videos and documentation, but one thing (so far) that I cannot find is how to change the text size inside a button element. Does this have to be done with a custom class and custom CSS, or is it built into the theme somewhere?

[marklchaves]

#653960

According to the docs, you get four different “canned” sizes to choose from.

https://avada.theme-fusion.com/design-elements/button-element/

If you want to set the button font-size yourself, you can use CSS.

.fusion-button-text {
  font-size: 2em; /* Change as needed. */
}

Maybe add an ID attribute to individual buttons if you need to target specific buttons on a page.

Enjoy!

[Chris McGee]

#654193

So, like with the Slider Revolution mystery border, this is another situation where I’d need to add in some custom CSS. Okay, I can see that this is going to be a recurring theme (pun intended) with WordPress. However, one issue I have with this is custom classes.

Is there any way to assign a custom class to some elements even if the Element Options for that element doesn’t have a “CSS Class” field? I mean, sure, I could probably use Chrome’s dev tools to find the selector for the items I need to alter, but assigning my own classes for certain things would be nicer.

[marklchaves]

#654551

Hi @skyunlimited,

Welcome to WordPress! 🙂

You can assign custom class names via Fusion Builder.

https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

Directly into the HTML (text edit tab or code block). E.g.

<div class="my-fancy-class">This text is a test.</div>

Or, via PHP if needed.

Happy coding!

[Chris McGee]

#654703

Thank you, @marklchaves. I don’t know how I missed that part of the documentation.

Also, I was mistakenly under the impression that a few of the Fusion Builder elements did not have the “CSS Class” field, but it seems I was wrong. Going over all the ones that are on our home page, they all do seem to have that field available, so yay!

One last thing (for now): that “CSS Class” field only seems to accept one class. Is this true and, if so, is there a workaround to give an element more than one custom class?

[marklchaves]

#654755

My pleasure @skyunlimited.

Multiple CSS Classes in the Fusion Builder CSS Class Field

I’m not sure if this is a documented feature. But, I’ve added multiple class names in that CSS Class field before with no issues.

I did a quick proof mock-up with screen grab and code snippet on my prototyping page.

https://marklchaves.com/itsonlyrockandroll/#multiple-classes

Don’t be shy about experimenting with the theme/WordPress. Sling some code around. Have fun.

Share & enjoy!

P.s. In the future, please start a new thread for new questions so that everyone can benefit.

[Author]

Posts