Make button smaller/change color on section page

[Markbsh]

Hi there,

I need some urgent help with customizing a section page I purchased for the Section app.

Specifically, I’d like to:

1. Change the button typography to 'Jost', which I’m currently using for my store.

2. Set the button’s main background color to #f5f5f5 and the text color to #1114AE.

3. On hover, I’d like the button background to switch to #1114AE and the text color to #ffffff.

4. Lastly, I’d like to make the button slightly smaller in size.

Thanks in advance for your support!

Website url: https://andresatelier.dk/

Kode is: aapre

Best regards,
Mark

[Shadab_dev · Accepted solution]

It is coded all right with just a few simple mistake.

You see how there is a warning sign, all it needs is a #before the color code so instead of f5f5f5 it should be #f5f5f5.

You can change these yourself in the code of that section you downloaded.

[Markbsh]

Just did it and it worked. But how do I change the font and make the button smaller

[Shadab_dev]

For making the button smaller you can decrease the font size of it like this inside the same css block

font-size: whetever-number px;

For font you can do this

font-family: your-font-name, 'fallback-font';

[Made4uo-Ribe]

Hi @Markbsh 

Do you mean this button?

[Markbsh]

Yes 

[Made4uo-Ribe]

Thanks for the info. To change the text on the button, you need to locate the button in here:

To change the background/color check the code below. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.ab-banner-button-wrapper-template--22387209929036__ss_video_banner_KgF4kg a {
    background: #f5f5f5;
    color: #1114AE;
    padding: 13px 25px !important;
}
.ab-banner-button-wrapper-template--22387209929036__ss_video_banner_KgF4kg a:hover {
    background: #1114AE;
    color: #ffffff;
}

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!