Change the Background Box Color of the Blog Preview

Can you tell me how to change the background colour of the latest blog preview box on the homepage or the blog section

Cheers 

Gehric

Comments

  • Hi gehric

    Use this given css code snippet in your theme custom css box.

    Appearance >> customize >> Header settings >> custom css   

    .home-blog-section .home-blog-area {
        background-color: #5072e2;
    }

    .home-blog-section .home-blog-area:hover {
        background-color: #829cfb;
    }

    Change color code as your need

    Thanks
    A
  • Thank you, I've done that and you are on the right lines, but it doesn't change like the services section. 

    For example the text goes to white and the Read More box goes grey, below is the code i used 

    .home-blog-section .home-blog-area {
        background-color: #FFFFFF;
    }

    .home-blog-section .home-blog-area:hover {
        background-color: #008EEC;
    }

    Gehric
  • Hi 

    Above given css code is only for home page blog section as you asked in your first comment. let me confirm did you want to change service section color or blog section. So after that we help you to better.

    Have a look in attached screenshot http://prntscr.com/eeld4a

    Thanks
    A
  • I Opologise for not explaining properly, that's the sections on the blog i would like to change to react the same as the services section


    Regards 

    Gehric

  • Hi gehric

    Ok no problem. If you want service section color hover effect on blog section use this given CSS snippet in theme custom CSS box 

    .home-blog-section .home-blog-area {background-color: #FFFFFF;}
    .home-blog-section .home-blog-area:hover {background-color: #008EEC;}
    .home-blog-area:hover .home-blog-info h2 > a{color: #ffffff !important;}
    .home-blog-area:hover .home-blog-description p {color: #ffffff !important;}
    .home-blog-area:hover .home-blog-post-detail > .comment > a{color: #ffffff;}
    .home-blog-area:hover .home-blog-post-detail > .date{color: #ffffff;}
    .home-blog-area:hover .home-blog-post-detail > .comment > a > i {color: #ffffff;}
    .home-blog-area:hover .home-blog-info .home-blog-btn a{background-color: #1e1c1c;}

    Change color code as your need.

    Let me know did it work.

    Thanks
    A
  • edited March 2017
    Absolutely fantastic :) 

    Thanks 

    Gehric 
  • Hi gehric

    If you’re enjoying your theme can you please review us on WordPress.org to help others connect easier into your and our product? Review form can be found here: https://wordpress.org/support/theme/wallstreet/reviews/?filter=5

    Thank you for your time. We appreciate it!

    My pleasure
    A
This discussion has been closed.