Small issues with Monet theme

peterburt4 · Member · May 18, 2017 at 9:32 pm
Copy link

Add topic to favorites
Hi all,

I’ve selected the Monet theme for my blog but I have two changes I’d like to make. I’ve given it my best efforts with youtube tutorials etc but getting nowhere fast!

The theme displays a dark grey box over each post when you hover over, which is fine on the desktop, but when viewed on mobile which doesn’t recognise a hover, it just displays every post on the homepage with a dark grey box over it. I’d like to change the colour of the box to white with a lighter transparency maybe, but don’t know the code to do so.

The other small issue is the text in said box, it automatically defaults to to a lighter shade of whatever the ‘link’ text colour is set to, as if it has a transparency. I’d like it to be the exact same as the rest of the text and not lighter.

Hopefully someone can help with this! Any help is much appreciated.

Peter

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 19, 2017 at 4:54 am
Copy link
Hi Peter, this is a bit of a complex thing. First off, you have to use this to set the background color.
```
.main .post-archive article.post-has-thumbnail .entry {
	background: rgba(58,58,58,.8)
}
```
This is RGBA (RGB color with an alpha transparency). The first three numbers are the RGB color code, and the last is the base transparency. The closer to 1, the more opaque, the closer to 0, the more transparent.

This second bit controls the overall darkness (opacity) of the overlay on touch devices.
```
@media screen and (max-width: 782px) {
	.device-touch .main .post-archive article.post-has-thumbnail .entry {
		opacity: 0.8;
	}
}
```
Since the text (title and date) are with the div controlled by the opacity the opacity and the transparent background color have an affect on the color of the text within. The actual color of the title and date is the same color as the other links. Opacity will affect all elements in child divs within the div the opacity is set on, so there isn’t much we can do with it. You might try adding the following and play with the color codes and see if you can find some other color that looks better to you.
```
.main .post-archive article .post-meta-data a {
    color: #00354c;
}
```
peterburt4 · Member · May 19, 2017 at 5:09 pm
Copy link
Hi,

Thanks very much for your reply, the changing of the background worked really well, and I’m happy with how it’s turned out! The text I can live with, tried adding that line however it only seemed to affect the date of the post and not the title, also it only seemed to work before hovering over. But it is fine as it is actually.

The opacity also worked on the touch screen device which is brilliant, the only thing is that the background colour hasn’t changed on the mobile device. I tried adding a ‘color’ line in below the line setting the opacity, but it didn’t seem to make a difference (probably doing it wrong)!
```
@media screen and (max-width: 782px) {
	.device-touch .main .post-archive article.post-has-thumbnail .entry {
		opacity: 0.8;
                color: rgb(255,255,255);
	}
}
```
Again your help is much appreciated!

Peter
thesacredpath · Member · May 19, 2017 at 10:02 pm
Copy link
Color sets a text color. If you wish to change the color of the background on mobile, you would do something like this.
```
@media screen and (max-width: 782px) {
	.device-touch .main .post-archive article.post-has-thumbnail .entry {
		opacity: 0.8;
		background: rgba(255, 255, 255,.8);
	}
}
```

No items found.