FROM CACHE - en_header

[ATLANTIC] image with text section - custom font color and text section bg color

meanmeme
New Member
7 0 0

hi

 

i have two [image with text] section here in about us page

page link: https://facialapps.net/pages/about-facial-apps-brand-story 

password for access: aloha

meanmeme_0-1657011409096.png

 

 i wanna custom the background color and font color for each TEXT section

saying the "top-left-text section": background in dark pink and font color in white

 the lower "right-text" section: only needs to change background color to a light pink color

 

 

and only to custom  these 2 "image with text section" only

 

anyone can advise? thanks!!

 

Replies 6 (6)
Shop_Lovers
Shopify Partner
252 37 58

Hi,

 

If you are familiar with the code you can add settings for each section or block where you can target specific section to add background color or text color

Having 7+ years of experience
★★★ Shopify | Shopify Speed Optimization ★★★
Do not hesitate to contact me via Message
Hit Like and Accept as Solution
Free Website Audit
Drop Email in Comment to get in Touch
Shop_Lovers
Shopify Partner
252 37 58

You can add below css if you want to make it hard coded

.picture-block-left {
    background: red !important;
}

.picture-block-right{
    background: green !important;
}

.picture-block-left h2{
    color: #fff !important;
}

.picture-block-right h2{
    color: #fff !important;
}

.picture-block-left .picture-block-body{
    color: #fff !important;
}

.picture-block-right .picture-block-body{
    color: #fff !important;
}

 

Hit Like and Accept as Solution

Having 7+ years of experience
★★★ Shopify | Shopify Speed Optimization ★★★
Do not hesitate to contact me via Message
Hit Like and Accept as Solution
Free Website Audit
Drop Email in Comment to get in Touch
meanmeme
New Member
7 0 0

not familar at all,

so add above in theme.css.liquid?

Shop_Lovers
Shopify Partner
252 37 58

You can add this to theme.css at the end of file.

 

Thanks

 

Hit Like and Accept as Solution

Having 7+ years of experience
★★★ Shopify | Shopify Speed Optimization ★★★
Do not hesitate to contact me via Message
Hit Like and Accept as Solution
Free Website Audit
Drop Email in Comment to get in Touch
meanmeme
New Member
7 0 0

wanna double confirm, that the above will only edit the two sections in the about us page, right?

Shop_Lovers
Shopify Partner
252 37 58

Then Add the Below CSS

#shopify-section-template--16104683471082__16558703506eb9514d .picture-block-left {
    background: red !important;
}

#shopify-section-template--16104683471082__165467934260945c31 .picture-block-right{
    background: green !important;
}

#shopify-section-template--16104683471082__16558703506eb9514d .picture-block-left h2{
    color: #fff !important;
}

#shopify-section-template--16104683471082__165467934260945c31 .picture-block-right h2{
    color: #fff !important;
}

#shopify-section-template--16104683471082__16558703506eb9514d .picture-block-left .picture-block-body{
    color: #fff !important;
}

#shopify-section-template--16104683471082__165467934260945c31 .picture-block-right .picture-block-body{
    color: #fff !important;
}

 

Hit Like and Accept as Solution

Having 7+ years of experience
★★★ Shopify | Shopify Speed Optimization ★★★
Do not hesitate to contact me via Message
Hit Like and Accept as Solution
Free Website Audit
Drop Email in Comment to get in Touch