Imuplse Theme: Large image text box transparent

Solved
Gratinsta
Tourist
11 0 1

Hi,

I want to change the large image text box color to transparent and get its alignment to center of the image. I am not able to do this in admin section. Please help

My store: https://gratinsta.com/

Password: gratinsta1

 

For reference I want make it look like this (https://jnitin.com/) and my store currently looks like last image

Capture.JPGCapture1.JPG

0 Likes
HardikDavra
Shopify Partner
2410 373 1023

This is an accepted solution.

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper {
position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
    border-color: transparent;
    text-align: center;
}

 

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Gratinsta
Tourist
11 0 1

Hi,

 

Thank your for response! It has been of great help! I was able to get transparent background and alignment at center 

1. How can I change color of HOME DECOR and Border color to white?

2. I want to edit same settings for another section - Jewelry, Can you please guide what to do ?

3. I am facing issues on mobile for these images as attached - the alignment is not proper for HOME DECOR and image is getting cropped with gray background for JEWELRY

Can you please advise on how do it make these changes?

 

1.JPG

 

2.JPGunnamed.jpg

 

 

 

0 Likes
HardikDavra
Shopify Partner
2410 373 1023

@Gratinsta  Please remove my old code and put my below code

.background-media-text__inner .animation-cropper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.background-media-text__inner .animation-cropper .background-media-text__text {
    text-align: center;
}

@media only screen and (max-width: 768px) {
.background-media-text__inner {
    position: unset;
}
}
For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Gratinsta
Tourist
11 0 1

Thank you for this! I am able to the alignment to center om destop as well as mobile but background color is white again. How can I make this transparent?

Capture.JPG

 

0 Likes
HardikDavra
Shopify Partner
2410 373 1023

This is an accepted solution.

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
}
For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Gratinsta
Tourist
11 0 1

Thanks a ton! You are awesome

0 Likes
Gratinsta
Tourist
11 0 1

Is it possible to change color of only large box text headings to white? and keep rest of the store's text in black?

I couldn't find such a setting in theme color 

Capture.JPG

 

0 Likes
HardikDavra
Shopify Partner
2410 373 1023

This is an accepted solution.

@Gratinsta 

.animation-contents .background-media-text__text p.h3 {
color: #ffffff !important;
}
For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Gratinsta
Tourist
11 0 1

@HardikDavra 

When accessing the website on mobile, the texts and button label HOME DECOR / EXPLORE and JEWELRY/ EXPLORE fades away and is not visible anymore.

Any suggestions if this can be fixed? The website is working fine on desktop.

 
 

unnamed.jpg

 

 

 

0 Likes