Solved

font background in a section sense theme

medusasmakeup
Excursionist
42 1 14

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/

 

Screen Shot 2024-05-07 at 3.30.41 PM.pngScreen Shot 2024-05-07 at 3.31.57 PM.png

 

 

Accepted Solution (1)

Anshul_arora
Navigator
393 113 79

This is an 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 -:

Anshul_arora_0-1715154310944.png

 

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 -:

Anshul_arora_0-1715155112380.png

 

 

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.

Anshul_arora_2-1715154375346.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6136 1474 1820

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


medusasmakeup
Excursionist
42 1 14

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.

 

Screen Shot 2024-05-07 at 7.43.41 PM.pngScreen Shot 2024-05-07 at 3.30.41 PM.png

PageFly-Richard
Shopify Partner
4302 975 1629

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>

PageFlyRichard_0-1715130186091.png

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:

PageFlyRichard_1-1715130297234.png



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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
393 113 79

This is an 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 -:

Anshul_arora_0-1715154310944.png

 

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 -:

Anshul_arora_0-1715155112380.png

 

 

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.

Anshul_arora_2-1715154375346.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

BSS-TechFusion
Shopify Expert
150 26 15

Hi @medusasmakeup 

Hope my solution can help you:

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

view.png

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

view.png

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

---

result:

view.png

 

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! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development