Customising Hermes CSS

staygypsy · Member · May 18, 2015 at 7:25 pm
Copy link

Add topic to favorites
Hi,

We’re trying to customise our blog. We use Hermes theme. It shows a body in the main page with image rectangles for each post.
It darkens all images as default, both in the main page feed and in each post header. Besides that, the “container” where all posts are shown has a black background.

We would like to remove the darken effect on the images and change the dark background for the image “holder” into white.

Another thing in which we need help is that whenever we hover over a picture in the main page a dark gradient overlay is shown. We would also like to change the intensity of the gradient.

We tried the inspect but it seems I’m not looking at the right place. We got a div class=”hentry-overlay” but I’m not sure it’s this one?
I would like to see the hentry-overlay because I might want to keep some of the effects?

Thank you for your time,

The blog I need help with is: (visible only to logged in users)
staygypsy · Member · May 18, 2015 at 8:59 pm
Copy link
I’ve found how to change the main “box” where the posts are shown.
I’ve used the following CSS

#blog-grid, .content-area {
background-color: #ffffff;
}

Now I would like to control the way each thumbnail is shown as the current CSS darkens all images even without hover-ing.
I also don’t know how to make all the “thumbnail” clickable instead of just the Title/Headline

If anyone could help it would be great,
thx
staff-jeanpierreac · Staff · May 19, 2015 at 7:47 am
Copy link
Hi!

We would like to remove the darken effect on the images and change the dark background for the image “holder” into white. Another thing in which we need help is that whenever we hover over a picture in the main page a dark gradient overlay is shown. We would also like to change the intensity of the gradient.

Let me explain how this darken effect and dark gradient on hover works. Imagine you have a background image for each post and over it a layer that could be transparent… but it is black with an opacity level (the opacity level goes from 0: transparent to 1: opaque).

Rigth now your color definition for the background is: rgba(0, 0, 0, 0.3) which means rgb(0,0,0), so black and with opacity=0.3
What if you want to remove this opacity? You should make it 0.
What if you want to have a little bit of opacity ‘effect’? You could try with 0.1, for instance:
```
.hentry-grid .hentry-col .hentry.has-post-thumbnail .hentry-overlay {
    background: rgba(0, 0, 0, 0.1);
}
```
To change the intensity of gradient on hover, you have the same logics, but changing the selector. For instance (Rigth now opacity is 0.8):
```
.hentry-grid .hentry-col .hentry.has-post-thumbnail:hover .hentry-overlay {
    background: rgba(0, 0, 0, 0.3);
}
```
I also don’t know how to make all the “thumbnail” clickable instead of just the Title/Headline

Sorry about that you, but you cannot do it simply using CSS.

I can suggest you a trick in any case (Trick means side effects I explain later!) You can add a clickable padding to the top to the first line in each article (category). You can calculate how much padding you need to reach the top of the image.

The problem: if a visitor resizes screen making a title (for instance “André Nussbaumer talks about freelancing and working abroad”) to need two lines the effect will be this article will need more height to be displayed as the padding is already here. And this will affect the positioning of all your articles/pics. Take into account this will be the case with mobile devices.

You could choose a padding-top not so accurate to the top, but making your clickable area bigger. For instance 150px, works nice even with three lines titles. Just try different padding sizes and decide by your own if it is worth to use this trick or not and how much padding do you like.
```
.entry-cats.primary-font a
{
    width: 100%;
    padding-top: 150px;
}
```
I hope that helps you. Enjoy blogging!

No items found.