background color post

Could you please provide a link to your site so I can take a look? You’re correct that the colours should be alternating so I’ll need to take a peek directly. Thanks.

You can find the website here https://paulprevoo.nl
Thank you for helping.

regards Paul

Ah, I see you’re referring to the hover colour that you see when you mouse over a post with an image.

The colour that’s randomized is the background colour displayed on posts that do not have an image attached, as you can see in this demo:
https://wp-themes.com/boardwalk/

The hover colour on posts that do have an image – like on your site – is not randomized, it’s always the same shade of green, as you can see in the theme’s CSS here:

.filter-on .hentry.has-post-thumbnail:hover .entry-link {
	background: #06973b;
	opacity: 0.6;
}

Oh I see, thank you so much for explaining.
I think this theme is one of the best out there.
So nice to scroll a website horizontal instead of vertical like 99% do.
If the overlay colour could alternate on posts with an image as well then it would be even more perfect. I think it would look cool:)
Do you think this could be done?

You could try this in your child theme for the new hover colours:

.hentry.color-1.has-post-thumbnail:hover .entry-link {
    background-color: #xxxxxx;
}

.hentry.color-2.has-post-thumbnail:hover .entry-link {
    background-color: #xxxxxx;
}

.hentry.color-3.has-post-thumbnail:hover .entry-link {
    background-color: #xxxxxx;
}

.hentry.color-4.has-post-thumbnail:hover .entry-link {
    background-color: #xxxxxx;
}

.hentry.color-5.has-post-thumbnail:hover .entry-link {
     background-color: #xxxxxx;
}

Change the colour codes to anything you like.

I also noticed there is quite a bit of CSS in your child theme. Something to keep in mind is that you only need the styles you’re overriding in the parent theme, you don’t need to copy the entire stylesheet from the parent theme, as long as you’ve correctly enqueued or imported the parent’s styles.

If you’re new to child themes, you can explore these guides:

https://codex.www.ads-software.com/Child_Themes
https://op111.net/53/

Thank you Kathryn for your effort. It works! beautifully.
Also for the tip concerning the css in my child theme.
I’ve just started to use wordpress so all is new to me.
I always used concrete5 but the new concrete version is so buggy so I switched to wordpress and I like it verry much. Thank you so much.
I’m so pleased with the theme. wow it’s just awesome!

Wonderful! Glad to hear the CSS works as you like and very glad you’re liking Boardwalk and WordPress. ??

Dear Kathryn ??
I’m so pleased with the color effect, but I was thinking.
It’s another challenge. Tried to figure it out but it’s beyond my skills.
Is there a way to reverse the above color effect like seen here.
https://jsbin.com/igahay/3011/edit?html,output

I tried to use a pseudo element selector :before but wy is it not working?
example:
.hentry.color-1.has-post-thumbnail:hover:before .entry-link {
background-color: #xxxxxx;
}

.hentry.color-1.has-post-thumbnail:hover .entry-link {
background: none;
}

I had all these same questions, really love the theme, thanks Kathryn.

@moddersnuit, are you saying that you want the images to be black and white when not hovered, and then have the color overlay when hovered?

Yes that is the idee But my images are original b/w so no need for filter grayscale.
I kept trying until 30 minutes ago and got it to work now.
The code I used is maybe a bit ” frankenstein” but it works ??
This is what I did:
What do you think? is this overkill ?

.hentry.color-1.has-post-thumbnail .entry-link {
background-color: #B40404;
opacity: 0.6;
}

.hentry.color-2.has-post-thumbnail .entry-link {
background-color: #0B610B;
opacity: 0.6;
}

.hentry.color-3.has-post-thumbnail .entry-link {
background-color: #2E64FE;
opacity: 0.6;
}

.hentry.color-4.has-post-thumbnail .entry-link {
background-color: #BF00FF;
opacity: 0.6;
}

.hentry.color-5.has-post-thumbnail .entry-link {
background-color: #FF8000;
opacity: 0.6;
}

.entry-link:hover{
opacity: 0!important;
background-color: transparent!important;
}

.hentry.has-post-thumbnail:hover .attachment-boardwalk-featured-image{
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}

@moddersnuit, the code you have above looks like what I was thinking, so if it is Frankenstein, we are both creating monsters. ??

Glad to hear you were thinking similarly! I could probably do without the !important rules, but is this really a bad thing?

It is best not to use !important unless you absolutely have to. Generally if you need to use it, it is an indication that perhaps the CSS selectors are not specific enough. In some instances it can cause issues with other customizations later on. I don’t think that will be the case in your situation though.