Docs

[forsyth]

Hi,

I am experimenting with the Expanded Church Demo. I am using “category pages” – i.e. pages automatically generated from posts like this:

http://theme.co/x/demo/expanded/church/category/news/

I would like to be able to edit the appearance of the top of each of these pages (i.e., in the above link, the full width beige colour row with NEWS in it). The text that is displayed can be controlled from the category management tools, but I would like to be able to remove this “header/row” entirely or change the background colour. However, I can’t find anwhere to do this in Cornerstone or in the WP dashboard.

Any help would be much appareciated.

Thank you!

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

header.x-header-landmark {
    background-color: #252525;
    border-color: #252525;
}

h1.h-landmark {
    color: #ffffff;
}

.x-breadcrumbs {
    color: #ffffff;
}

.x-breadcrumbs a {
    color:#ffffff;
}

Note this will effect all header areas globally. If you want it just for category archives, then you can add a more specific selector.

For example if you want the effect on all archive pages add the “.arvhive” class to your selector.

This snippet of code

header.x-header-landmark {
    background-color: #252525;
    border-color: #252525;
}

will now become this:

.archive header.x-header-landmark {
    background-color: #252525;
    border-color: #252525;
}

If you want it to be more specific you can use the category name or number

.category-news .header.x-header-landmark { ... }

or

.category-2 .header.x-header-landmark { ... }

You can find these categories by inspecting the page with your browser’s dev tools and look under the body element classes.

Hope this helps – thanks!

[Author]

Posts