Archived topic
Change brand images section to all same colour
5 replies · Started by CRAIG on July 5, 2021
I have added links to:
1) My site
2) Another site with the effect I am looking for
Under the hero section on my site I have a selection of brand logos. Currently they are full colour. I would like to change this so that they are all the same shade of grey.
Is there any easy way to do this from the page? I would prefer not to go away and get new images made up if this could be tackled via CSS or some setting I haven't managed to find.
Thanks in advance for any help offered.
Hi there,
add this CSS to your site:
.logo-row img {
filter: grayscale(1);
opacity: 0.5;
}Then edit the page, and select the Container Block containing the Grid Block of image, and in Advanced > Additional CSS Class(es) add: logo-row
Hi David,
I have done this but it doesn't seem to have worked
I selected the image, then the grid, then the container which contains the parent grid
Also, I have a different row which shows only on mobile - would there be any issue with adding logo-row into the Additional CSS Class(es) field for that container too? Strangley it seems to have worked for the mobile and tablet logo row but not the desktop one
You have a missing } in your CSS - see below i have marked where the bracket needs to be added. Without it ALL CSS below is only being applied within the 768px media query.
@media (max-width: 768px) {
.generate-columns-container .post.generate-columns {
margin-left: 20px;
margin-right: 20px;
}
.wp-show-posts-image img {
width: 100%;
}
.wpsp-card .wpsp-content-wrap {
padding: 20px 0 !important;
}
} <----- MISSING BRACKET GOES HERE
@font-face {Ah, well spotted! Thanks David
You're welcome
