Shopify themes, liquid, logos, and UX
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
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!!
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
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
not familar at all,
so add above in theme.css.liquid?
You can add this to theme.css at the end of file.
Thanks
Hit Like and Accept as Solution
wanna double confirm, that the above will only edit the two sections in the about us page, right?
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
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024