Image Banner Transparency

[creativebp8]

I am looking to make the color scheme 6 in my dawn theme a transparent color so the banner in the image banners is transparent, and it is just the text over the image. Then, how do I make the buttons so they are just an underlined link when you hover over them, instead of a square button? So the button is transparent too, but it is still an active hyper link.

Also, I would like the text to be centered on the image but at the bottom of the frame. This website is an example.

Is it easier to just have a custom code input that makes all banners and buttons transparent? I don’t want the buttons on my other pages to change, just on the homepage.

Here is my website: creativeblueprintbrand.com

[Alexanda]

How to make homepage banners transparent + buttons as links (Dawn theme)

1. Go to: Online Store → Themes → Dawn → Customize → Homepage → Theme settings → Custom CSS.
   (Or edit base.css if needed).

2. Add this CSS:

/* Homepage only */
.template-index .banner { background: transparent !important; }

/* Transparent link-style buttons */
.template-index .banner .button {
  background: none !important;
  border: none !important;
  text-decoration: underline;
  color: inherit;
  padding: 0 !important;
}
.template-index .banner .button:hover { text-decoration: underline; }

/* Center text at bottom of banner */
.template-index .banner__content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-bottom: 2rem;
}

---

This:

• Removes banner overlay

• Makes buttons look like underlined links

• Centers text horizontally & locks it at the bottom

[namphan]

Hi @creativebp8,

Please go to Customize > Sections > Image banner > Content > Container.

You just need to disable this option, it will display fine

[Samita-Danny]

Hello creativebp8, have a good day. I’m BrainLee From Samita team.

I have read your problem and have a solution for you as follows:

1. Go to your Shopify admin → Online Store → Customize.

2. Click on Theme setting → Color → Select your Schema Color

   

3. Change color to your style

   

4. The important thing you want is to make the button transparent, right?
   The simplest solution is to set the button color to match the background color and then add this code to remove the button border

   

/* Homepage only */

/* Transparent link-style buttons */
.template-index .banner .button {
  border: none !important;
}
.template-index .banner .button:hover { 
  text-decoration: underline; 
}

Now, let’s check the results.

“Want to create a stunning banner? We provide the perfect solution — just one click to install our app, and you’ll get access to one of the Top 5 Best Design Apps for Shopify. Install it here: https://apps.shopify.com/product-labels-badges-samita”

Best regards

BrainLee from Samita

[Bang_T]

Hi @creativebp8

Here is the custom CSS you can add to Theme customize > Sections > Image banner > Custom CSS

.banner__box {
  background: transparent;
  color: #fff;
}
.banner__box .banner__heading,
.banner__box .h1 {
  color: #fff;
}
.banner__box .banner__buttons .button {
  background: transparent;
  color: #fff;
}
.banner__box .banner__buttons .button:after,
.banner__box .banner__buttons .button:hover:after {
  box-shadow: none;
}
.banner__box .banner__buttons .button:hover {
  text-decoration: underline;
}

Or just disable the Show container on desktop setting and add this css

.banner__box .banner__buttons .button {
  background: transparent;
  color: #fff;
}
.banner__box .banner__buttons .button:after,
.banner__box .banner__buttons .button:hover:after {
  box-shadow: none;
}
.banner__box .banner__buttons .button:hover {
  text-decoration: underline;
}

Hope this help

[creativebp8]

this is great, but what code can I add to root the text at the bottom of the image?

[creativebp8]

this didnt effect anything! is there a way to change it?

[Bang_T]

Hi @creativebp8

you can change the content position here