Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi, I’ve tried adding a custom-css by following a guide in another thread here but it’s not working, the frame around the button is still there.
I also want to be able to customize the text on the button bigger than options available in the drop-down menu.
Where do I go about with this?
Thanks.
Hi Im4d40k0
Thanks for reaching out.
Do you have a public URL where we can take a look at what’s going on?
Thank you for the reply!
I’ve tried adding via custom CSS:
as well as setting the widget class to no_border (pages > all pages > home > edit > siteorigin button > attributes > widget class > no_border) which didn't work.
I couldn't find anywhere within the CSS regarding that button to make the frame transparent nor a way to custom resize (except pre-existing drop down menu options).
link to the website (I don't see a private reply option so I've set an expired link) if you don't mind.
Oops guess the code format thing didn’t format properly.
This was the guide I tried following but didn’t work for me.
I forgot to also mention I’ve set the frame as ‘wire’ too.
Also disabled via settings > page builder > add widget class.
Thanks. The markup is different in your page so the CSS declaration has to be changed. You can try:
.no_border .ow-button-base a { border: none !important; }Thank you for your reply.
It has worked! There is no frame/border around the button.
Is there another way to custom resize the text too other than the available existing sizes in the drop down menu for that button?
Super, I’m glad to hear you’re making progress :)
Do you perhaps want to give SiteOrigin CSS a try for the text size change? If so, head over to AppearanceCustom CSS and click the eye icon to open the visual editor. Next, click the button text and then use the font size setting to adjust the size as required.
Page: Getting Started
Thank you for your reply!
I have attempted to change the size of the font through your method, but it’s adjusting the entire size for all the texts on the page. Is there a way to isolate it so only the link text size is adjusted, and perhaps for future reference too so I can adjust size accordingly on different pages for individual sentences/per text?
I appreciate your help!
For a guide on targetting specific pages with CSS, please, see Post: Unique Page Styling with Custom CSS Body Classes.
To target the button text, make sure you’re selecting the innermost container of the button before applying the font size change.
I’ve successfully managed to resize via custom CSS! Turns out it’s not selecting the text directly inside, it’s selecting slightly outside of the text container, so in my case it’s the ‘button widget’ container not the ‘span’ container which affects all the texts within ‘span’.
Thank you for your help, I appreciate it so much!
Super, I’m glad to hear adjusting your focus point in the visual editor helped. Thanks for the update.
Cheers :)