How to modify video background, font, and button attributes in Dawn theme?

Store Design
1

Hello,

I would like to add a video banner with text and headline and I am following this instruction I found here: https://alanryan.dev/tips/video-background-dawn-theme/

However,

  1. How can I erase the big white translucent overlay?

  2. How can I change the color of the font, button font, and button background?

  3. How can I change the font size of the headline text?

Thank you!

*Dear Shopify Experts:

Please do not use this post to advertise your coding service.

2

Hi @Logius ,

Are you able to provide your website so we can take a look. Thank you

1 Like
3

@made4Uo

Hello,

Thank you so much for replying. Here is the page with the video banner section.

https://kitchenequipped.com/pages/test

I am really looking forward to hearing from you.

Thank you!

1 Like
4

Hi @Logius ,

Please refer to answers below

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code

  2. In the Asset folder, open the base.css

  3. Paste the codes below at the very bottom of the file.

  4. How can I erase the big white translucent overlay?

div.hero > div {
    background: transparent;
    backdrop-filter: unset;
}
  1. How can I change the color of the font, button font, and button background?
.hero a.button {
    background: #fff;
    color: #000;
}
  1. How can I change the color of the font and font size of the headline text?
div.hero h1 {
    color: #fff;
    font-size: 50px;
}
1 Like
5

@made4Uo It works! Thank you but I am wondering if it would be possible to set the font size for mobile and desktop separately.

1 Like
6

@Logius ,

Yes, you can use the following codes instead

For desktop:

@media only screen and (min-width: 751px) {
div.hero h1 {
    color: #fff;
    font-size: 50px;
}
}

For mobile:

@media only screen and (max-width: 750px) {
div.hero h1 {
    color: #fff;
    font-size: 20px;
}
}
1 Like
7

I used the original code in this post and it worked, however any video I upload has a small white square in the middle of the video…any ideas how to get rid of it?

8

Hi, how to change the color of button outline, and add text (below headline text)?

Thank you

9

Hi

Is there any way to make the video smaller on mobile? Thank you!

10

how to show video banner at only home page only ,

how can I do it .

Please reply me soon.