Please Help: How can I change the back ground color on the slider text

[JohnSmith2]

Hi Everyone!

Can someone please help me figure out the code and where to put it to change my sliders in my Venture theme with the following revisions?

• Heading to have a transparent background
• Subheading to be white text and bold font (with the current green color background)
• The box next to the Subheading needs to be black, and the left and right arrows need to be black with the arrow color to be white.

My website: 

https://www.axladvanced.com

Thank you!

Sample of a similar Slider I want it to look like (except I need the "Shop Now" button to be Green with Bold text):

My current Slider (needs the arrow buttons to be black with white arrows, transparent heading background, and the "Shop Now" Button to stay green with the Text revised to Bold font).

[mageplaza-cs]

Hi @JohnSmith2 

I am from Mageplaza - Shopify solution expert.

Please open the theme.scss.css file located in the assets folder, and add the following CSS code:

h1.hero__title.hero__title--has-link {
    background: transparent;
}
.hero__subtitle.hero__link{
    font-weight: bold;
}

*Result:

lease let me know if it works as expected

Best regards!

[JohnSmith2]

That Worked, Thank You!  Is there is way to put a black outline on the letters for the header text so they don't disappear into a white background and change the arrow box to a black background with white arrows?

[mageplaza-cs · Accepted solution]

Hi @JohnSmith2 ,

I see that you've correctly used the text-shadow property to improve text visibility on a white background.

In addition, please add the following CSS code to the theme.scss.css file to customize the arrow box as desired

a.hero__arrow{
    background: #000;
}

.hero__arrow .icon {fill: #fff;}

.hero__arrow:hover , .hero__arrow:focus {
    color: #000;
    background-color: #9b9b9b;
}

* Result:

[JohnSmith2]

What code can I add to change the Green Shop Now button to have a darker shade for the hovers and to change the shop now text to white? And how do I do the carosel button transparent instead of black background with black arrows?

Thank you for your help!!

[mageplaza-cs]

Hi @JohnSmith2 

Please add the following CSS code to the theme.scss.css file to customize the 'Shop Now' button as desired:

a.hero__subtitle.hero__link {
    color: #fff;
}

a.hero__subtitle.hero__link:hover{
    color: #fff;
    background-color: #388E3C;
}

You can change the background color code in the CSS I provided above, instead of using my sample color code

Result:

Hover:

[JohnSmith2]

Thank you! That Worked Great!

[mageplaza-cs]

Hi @JohnSmith2 

Thanks for getting back to me.

If our suggestion works for you, please give it a Like or mark it as a Solution! 😊