Solved

Yuva Theme Header colour and Image sizing

Philip7644
Tourist
16 0 1

Hi All,

 

Hope you are well! I'm using yuva theme and a few things aren't working, but everytime I'm using help from the pages here, the custom css also doesn't work or change anything. Does anybody know how to move further?

 

The header colour doesn't change in the published store:

  • For the header background colour, I'd like to use #055146. In my customiser it shows the correct colour, but on the live website it stays white. How can I ensure that it is the right colour in the actual website?

 

Image banner doesn't resize correctly:

  • I'm using a media banner to show an image, and in the designer it looks great and resizes properly. Only on the live website, the resizing doesn't work and the image is cropped. How can I make it work?

 

Any custom css I've found hasn't changed/affected anything so far..

 

Thank you for your help.

 

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
1844 520 400

This is an accepted solution.

Hey @Philip7644,

 

Small error on the code, Just replace it with this one

 

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
1844 520 400

This is an accepted solution.

@Philip7644 

 

I don't know if your theme supports the <br> tag. 

 

You can try typing in the theme customizer, but some themes don't allow HTML tags in the content itself.

Minder schermtijd,<br>meer vrije tijd

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 15 (15)

ThePrimeWeb
Shopify Partner
1844 520 400

Hey @Philip7644,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

Oh apologies, sure @ThePrimeWeb !

 

It's not live yet, you can use the password "test" on www.schermuit.nl

ThePrimeWeb
Shopify Partner
1844 520 400

No worries!

 

Is this the Image banner you mentioned earlier?

ThePrimeWeb_0-1710070900746.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

Yes indeed! you can see it cuts off the top in your screengrab.

ThePrimeWeb
Shopify Partner
1844 520 400

Hey @Philip7644,

 

I also changed the header icons and text to white because black wasn't visible with the dark green header.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710071560346.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

Appreciate it a lot! The header has changed now indeed, it looks very nice!

 

However, the mediabanner is completely not showing anymore. Even in the editor it's present in the left overview but not showing. Please see screenshots attached for reference.

 

Halfway there! 

 

Screenshot 2024-03-10 at 12.59.21.png

Screenshot 2024-03-10 at 12.59.37.png

 

 

Philip7644
Tourist
16 0 1

 The media banner is supposed to be between the white and green block 🙂

Screenshot 2024-03-10 at 13.00.34.png

ThePrimeWeb
Shopify Partner
1844 520 400

This is an accepted solution.

Hey @Philip7644,

 

Small error on the code, Just replace it with this one

 

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

Wow @ThePrimeWeb , you are amazing, thank you so much!

 

One last check: does it matter where on the page I have that media banner or can I just freely place it in a different area of the page with this code?

 

Really cool, appreciate it!

ThePrimeWeb
Shopify Partner
1844 520 400

It shouldn't matter because it's targetting a media banner regardless of position. You should be able to place it anywhere you need. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

Super, have checked and it works in other places indeed. 

 

Thanks again, hope you enjoy the well earned coffee 😉 

ThePrimeWeb
Shopify Partner
1844 520 400

No worries, and thank you!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

@ThePrimeWeb could you help me with one more thing please?

 

In the header image that now says "Minder schermtijd, meer vrije tijd", how can I get "meer vrije tijd" on a new line?

And same for the body text below that heading?

 

Cheers,
Philip

Philip7644_1-1710075267468.png

 

 

ThePrimeWeb
Shopify Partner
1844 520 400

This is an accepted solution.

@Philip7644 

 

I don't know if your theme supports the <br> tag. 

 

You can try typing in the theme customizer, but some themes don't allow HTML tags in the content itself.

Minder schermtijd,<br>meer vrije tijd

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Philip7644
Tourist
16 0 1

You are a legend.

 

Thanks again.