I have a specific webpage of my online store that has a dark background, making it difficult to see the black text of the sidebar, footer, header, and page title. I would like to change the text color to white ONLY for this page titled “weddings”. Here is the url for the page in question: https://www.libertyfireworks.us/pages/weddings
The goal I am trying to accomplish is to make all text readable for this specific page only since the background is very dark compared to my other pages. How can I change the black text to white text without it affecting other pages? Here is a screenshot below of the page:
Hi @libertyworks ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
{% if canonical_url contains 'weddings' %}
{% endif %}
Hope my answer will help you.
Best regards,
Victor | PageFly
Hi @libertyworks ,
you can achieve that by adding the below code just at the bottom of the theme.liquid file just before the closing body tag () in the shopify theme code editor.
{% if template contains 'page' and handle == 'weddings' %}
{% endif %}
Once you have successfully added the code, this weddings page would look something like this as shown in the images below:
Please do let me know if you need more help.
Thanks & regards
KaalTechGeeks
Or just add id #weddings
example
#weddings a.site-nav__link, #weddings .site-nav__link, #weddings h1, #weddings .sub-footer, #weddings .site-footer, #weddings .sub-footer a, #weddings .site- footer a, #weddings h3.site-footer__section-title, #weddings .text-link, #weddings .breadcrumb-nav a{ color: #fff !important; }a.site-nav__link, #weddings .site-nav__link, #weddings h1, #weddings .sub-footer, #weddings .site-footer, #weddings .sub-footer a, #weddings .site- footer a, #weddings h3.site-footer__section-title, #weddings .text-link, .breadcrumb-nav a{ color: #fff !important; }
This worked! Thanks! There are many great answers here, but I tried your method first and it worked.
@PageFly-Victor This works fantastic! I have another question. What if I also wanted to add a transparent block or background to the body text? For example, let’s say I wanted a layer of gray background between the text and the background of my page? I want to do this to make my body more readable.
@kaalTechGeeks Thank you! This worked perfectly! I have another question. How can I add a transparent block between the body text and the background of my page? I want to do this to make my body text more readable.
@libertyworks Its great you liked the solution and it helped you!
also just replace the code you added earlier with the code given below and this would fix your problem of making the text more readable.
{% if template contains ‘page’ and handle == ‘weddings’ %}
body#weddings {
position: relative;
z-index: 2;
}
body#weddings::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: -1;
}
a.site-nav__link, .site-nav__link, h1, .sub-footer, .site-footer, .sub-footer a, .site-
footer a, h3.site-footer__section-title, .text-link, .breadcrumb-nav a{
color: #fff !important;
font-weight: 600;
}
{% endif %}
this would make your webpage as shown in the images above.
Thanks & regards
KaalTechGeeks
@kaalTechGeeks This works! Thanks so much! I have another question:
How can I change the Logo of the Header for this specific page only? I would like to change to this:
