Docs

[alanjonesonline]

Hi There,

I would like to make 3 changes to the blog’s masonry view in the Ethos stack. I’m hoping these changes are possible with some custom CSS? Any help would be greatly appreciated.

1) I would like it if the images were not cropped so the image then appear with their different heights (similar to the masonry view in the other stacks).
2) I would like the title text appear as heading 6 font. At the moment the font is all capitals letter and looks like heading 5?
3) The black band across the bottom of each image that changes opacity on hover – I would like to change the colour black to white and have the text in black.

I’m super happy with the Ethos stack! Just need to tweak it a little.

Cheers
Alan

[Rupok]

Hi Alan,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[alanjonesonline]

Awesome thanks.

http://Www.alanjonesonline.com

[Rupok]

Hi Alan,

Thanks for the URL.

#1. The image is actually displayed as background image. So it’s not really possible without custom development with Child Theme

#2. You can’t change the markup but certainly you could manage those things.
You can add this under Custom > CSS in the Customizer.

.h-entry-cover {
  font-size: 14px;
  text-transform: none;
}

#3. You can add this under Custom > CSS in the Customizer.

.entry-cover:hover .h-entry-cover::before {
  background-color: #fff;
}

.entry-cover:hover .h-entry-cover {
  color: #000;
}

Hope this helps.

Cheers!

[alanjonesonline]

Hi There

Thanks for getting back to me so quickly.

We’re definitely getting closer.

Regarding #1, no worries, I’ll ask the developer to look into it.

Regarding #2, that is exactly what I was after. Thanks you. However, the text seems to lose the bottom parts of all the letters that hang down i.e. y,g,j,p and q. No big deal if I can’t avoid this but if the solution is something simple that would be awesome.

Regarding #3, I don’t think I explained what I’m hoping to achieve very well. When you are looking at the category archive in masonry view, I would like for each image to have a band of white along the bottom with only 10% opacity and black text. When the mouse hovers over the image the white band turns to 90% opacity and the text remains black. So pretty much exactly as it is now only the colour scheme reversed.

I hope this makes sense. Let me know.

Thanks again for your help.

Cheers
Alan

[Paul R]

Hi Alan,

2. Kindly change the code to this

.h-entry-cover {
    line-height: 16px;
    font-size: 14px;
    text-transform: none;
}

3. You can add this under Custom > CSS in the Customizer.

.h-entry-cover {
    color: #000;
}

.h-entry-cover:before {
        background-color: rgba(255,255,255,0.1);
}

.entry-cover:hover .h-entry-cover:before {
    background-color: rgba(255,255,255,0.9);
}

Hope that helps.

[alanjonesonline]

Perfect! Just what I was after. Thank you so much.

Cheers,
Alan

[Paul R]

You’re welcome! 🙂

[alanjonesonline]

Hey there,

I have another question. Is it possible to change the background image on only one page?

Thanks again for all your help.

Cheers
Alan

[Nico]

Hi There,

Yes it is possible.

Add the class of the page in the custom css so that it will specified to the page.

For example:

.page-id-no .site {
    background: URL(urloftheimage.jpg)
}

Hope it helps.

Thanks.

[alanjonesonline]

Great thank you.

[Paul R]

You’re welcome! 🙂

[alanjonesonline]

Hi there again,

I hope you don’t mind but I have another question regarding my point #1 in my original question (sent March 24, 2016 at 6:23pm).

You mentioned that removing the crop from images in the blog archive page would be tricky because they are in fact background images and therefore require custom development would be required. Would it be possible to keep the crop but just change the proportions? Currently the images that appear in the blog masonry view and archive are a slightly landscape proportion. Is it possible to change these proportions to portrait e.g. (w)1:(h)1.1 using custom CSS?

Or is there anyway I can select where the cropping will occur? Just trying to avoid to many of these situations (see attachment).

Appreciate all the help you’ve given me.

http://www.alanjonesonline.com

Cheers,
Alan

[Rupok]

Hi Alan,

Thanks for writing back! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[alanjonesonline]

No worries. I get that. Thanks for writing back to let me know.

Cheers
Alan

[Author]

Posts