Add background color in blog page and its preview in the homepage

Solved
Highlighted
Explorer
84 1 18

Hi all,

I am designing the blog of my site and I would like that this part comes with a different background color. I would like to use this background in the blog page but also in its preview in the homepage. Here I upload it a screenshoot from both. My website is https://alblancatelier.com/

 

Thank you in advance for your help.

Captura de pantalla 2020-08-28 a las 18.49.53.pngCaptura de pantalla 2020-08-28 a las 18.56.08.png

 

 

1 Like
Highlighted
Excursionist
309 44 67

PLease place this code at the end of theme.scss

 

#section-1598278286459 {
background-color: #f2efef;
}

 

 

If you like my solution, then please accept it as solution and please like my post

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Shopify Partner
7507 1037 2600

@noemi2 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

/* Home page Blog Section */
div#shopify-section-1598278286459 {
    background: #f6f4f4; /* change color as you like */
}

/* Blog  page Section */
#shopify-section-blog-template {
    background: #f6f4f4; /* change color as you like */
}
/* Vertical Mode image */
.ArticleItem .AspectRatio--withFallback {
    padding-bottom: 100% !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
84 1 18

hi @KetanKumar thank you for your help. It is working but it has appeared a white line at the botton of the page. Here an screenshoot. Do you know what is going on? https://alblancatelier.com/blogs/journal

 

 

Captura de pantalla 2020-08-29 a las 18.28.31.png

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@noemi2 

#shopify-section-blog-template+#shopify-section-shop-now {
    margin-top: 0;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
84 1 18

Thank you for your help @KetanKumar The white line is smaller but is still there. Any cue?Captura de pantalla 2020-08-30 a las 17.31.56.png

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

This is an accepted solution.

@noemi2 

@media screen and (min-width: 1140px) {
.Footer--withMargin {
    margin-top: 100px;
}
}
@media screen and (min-width: 641px) {
.Footer--withMargin {
    margin-top: 60px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like