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

Store Design
1

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
meanmeme_0-1657011409096.png1000×790 458 KB

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!!

2

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

3

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

4

not familar at all,

so add above in theme.css.liquid?

5

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

Thanks

Hit Like and Accept as Solution

6

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

7

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

8

this changes the background and heading text, but how do i change the body and link text? I want the backgrounds black and all the text white thanks