Design options for blog with Edin theme

Hi Angel,

Edin doesn’t display a header image on the blog page by default and there isn’t a built in setting to add one, either.

You could, however, add an image via some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

.category-36 .hero.without-featured-image {
    background: url(https://example.jpg);
    color: #fff;
}

@media screen and (min-width: 1230px) {
    .category-36 .hero.without-featured-image {
        padding: 180px 0;
    }
}

Replace https://example.jpg in the above snippet with the URL to the image you wish to use.

If you’d rather completely remove the header area from that page then you can with the following:

.category-36 .hero.without-featured-image {
    display: none;
}

Hope that’s helpful! We’re right here if you have any extra questions, too.

Hi Siobhan,

Thanks a lot for your reply to my question. I tried both versions but somehow they are not working. I added the snippets to the child css, but nothing is changing.

Not if I maybe have to change something else…

Thanks,
Angel

Hi Angel,

I took a look over your child theme’s style.css file and it seems you may have copied/pasted the parent’s file in its entirety. Can you confirm whether I’m right on that?

It’s not necessary to copy/paste the parent’s style.css file in its entirety to your child theme’s directory, as that will actually cause the file to load twice and may also stop CSS you add to your child theme’s file from working.

Instead, you should only have the top header (outlined here) and any custom CSS you want to use in your child theme.

Can you double check your child theme’s file and then let me know when you’ve updated it? I can take another look from there.

Hey Siobhan,

…. hm, you might be right. However, I don’t quite know what to do now. I can also see that in that css file by now are additions, that have to do with multiple changes I performed on the site. I can see for instance data related to Jetpack. I assume that by now this file is a mixture of original Edin-style as well as my own changes and amendments.

Would you know a simple way out of that dilemma?

Sorry if this sounds like a bit of a mess, but I am indeed far from being a pro :-))

Thanks,
Angel

Hi Angel,

The most straightforward approach would be to keep your CSS in place but add the custom CSS I provided at the very bottom of your style.css file. Can you try that?

Oh, it actually worked wonderfully well now. Thank you very much for the help and the patience.
Cheers, Angel

That’s great to hear, Angel! We’re right here if extra questions come up.