Okay
  Public Ticket #1172781
Change colour of blog overlap
Closed

Comments

  •  1
    Simon started the conversation
    May 16, 2017 at 2:26pm

    Hi Theme Nectar

    Please could you let me know the CSS required to make the overlay on the blog selection page darker:

    http://kmibrandstaging.com/whats-new/

    My client has asked for the titles to be more legible so I think the background needs to go darker - perhaps the grad needs to be extended further up the image. So instead of finishing at say 50% up the image, it needs to finish 75% up the image.

    It would be good to know which bit of code to amend to alter the position of the grad fill as well as its opacity.

    Also it is possible to add a white border around each image so as to separate them slightly from each other?

    Thank you

    Simon

  •  3,034
    Andrew replied
    May 16, 2017 at 2:54pm

    Hi Simon,

    Thanks for contacting us regarding your query.

    You may use the following Custom CSS Code to accomplish this request. 

    /*Darkens Opacity and Adds Border Masonry Blog Items*/
body .masonry.meta_overlaid .masonry-blog-item .post-featured-img img{
  opacity: 0.4;
  border: solid 2px #fff;
}

    You may add this to the Custom CSS Code section located by navigating to Appearance>General Settings>CSS/Script Related>Custom CSS Code from your WordPress Dashboard.

    Please let me know if there are any more questions that I may answer for you.

    Cheers! 

  •  1
    Simon replied
    May 16, 2017 at 3:08pm

    Hi Andrew

    Thanks for the super quick response!

    That sort of works - however the borders are not quite correct - they are having their opacity reduced as well.

    Is it possible to have them 100% white?

    Also if we wanted to overlay a tint of a colour on the blog posts, is that possible? At the moment the images look quite dark.

    Best

    Simon

  •  3,034
    Andrew replied
    May 16, 2017 at 4:29pm

    Hi Simon,

    Thanks for your reply.

    Please remove the previous code provided and add the following below to correct the border issue.

    /*Darkens Opacity and Adds Border Masonry Blog Items*/
body.masonry.meta_overlaid .masonry-blog-item .post-featured-img img{
  opacity: 0.4; 
}
.posts-container article.animated-in .inner-wrap{
   border: solid 2px #fff;
}
span.post-featured-img {
    margin-top: 2px;
}

    Also if we wanted to overlay a tint of a colour on the blog posts, is that possible? At the moment the images look quite dark.

    Unfortunately, the overlay is controlled by JS and cannot be customized by CSS alone.

    Please let me know if there are any more questions that I can answer for you.  
     

  •  1
    Simon replied
    May 19, 2017 at 7:03am

    Hi Andrew

    Thanks for the new CSS - that works almost perfectly however there is now a slight image alignment issue with the first image: http://kmibrandstaging.com/whats-new/

    Please see screen grab.

    Best

    Simon

  •  9,011
    Tahir replied
    May 19, 2017 at 12:07pm

    Hey Again,

    Remove this CSS margin code and test : 

    Thanks 

    ThemeNectar Support Team 

  •  1
    Simon replied
    May 19, 2017 at 2:03pm

    Hi Tahir

    I removed that bit of code however the image is still offset (and the spacing between the images has become very tight - I preferred the spacing with the margin code in place).

    However when I right-click and "Inspect element" the page aligns itself perfectly.

    I have tried this with Safari and Firefox running on a Mac.

    Best

    Simon

  •  9,011
    Tahir replied
    May 20, 2017 at 1:28pm

    Remove the earlier provided css and use this instead: 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /*Darkens Opacity and Adds Border Masonry Blog Items*/
body.masonry.meta_overlaid .masonry-blog-item .post-featured-img img{
  opacity: 0.4; 
}
.posts-container article .inner-wrap{
   border: solid 2px #fff;
}

    Notice there is no animate-in class in the border css selector . 

    Thanks


    ThemeNectar Support Team 

  •  1
    Simon replied
    May 21, 2017 at 7:51pm

    Hi Tahir

    Brilliant - that has done it - thanks for your assistance!!!

    You can close this ticket now.

    Best

    Simon