font background in a section sense theme

[medusasmakeup]

Is there a way to add background to a font heading? I know there is a big blocky content container, but I want the background tighter around the fonts. I use Sense theme.

https://medusasmakeup.com/

[Made4uo-Ribe]

Hi @medusasmakeup 

Yes, you can add background but adding different font will be tricky. You like to change the first image same on the 2nd image? If that so would you mind to share the preview on that store. I cant find it on the URL that youve shared. 

[medusasmakeup]

https://medusasmakeup.com/

I am looking to either make the content container have transparency or reduce the size so the fontjust have background color. Image one is my web page, image 2 is example of what I am trying to accomplish.

[PageFly-Richard]

Hi @medusasmakeup 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.banner__heading {
    background: yellow;
    padding: 2px 10px;
}
</style>

Also, i can see that your page looks very nice, but there's one thing that i notice your website is missing to add a hover animation for the button here:

You can try to add the same animation that you use for other button on the page 

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[Anshul_arora · Accepted solution]

Hello @medusasmakeup ,

I understand you are looking to highlight the font of the Banner section.

I have shared two ways for highlighting text - one is to provide background to the text, and the other is to transparent the background section.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag.

1. This code will provide a background colour to the text.

<style>

h2.banner__heading.inline-richtext.h0 {
background: #fe93c7ba !important;
}

</style>

[Please feel free to change the color of the background]

Output -:

2. This code will transparent the background of the banner box content section.

<style>

.banner__box.content-container.content-container--full-width-mobile.color-scheme-0ccabcc4-6883-44e8-a3cf-acac691ead70.gradient {
background: transparent !important;
}
</style>

Output -:

3. In case you would like to do both, then copy & paste both codes at the bottom of the theme.liquid file before </body> tag.

I hope the code helps you.

Please share if you have any queries.

Thank you.

[BSSCommerce-B2B]

Hi @medusasmakeup 

Hope my solution can help you:

- Step 1: Sale channel => Online Store => Themes => Edit code:

- Step 2: Search for theme.css and add the css directive to the end of this file:

.banner__box {
    background: rgb(var(--color-background))!important;
}

---

result:

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir!