[Support request] Category Box and Background Color

[Rohith]

Hi there, how to add a box and background color to the entire category page’s heading and description?

[Ying]

Hi Rohith,

Try this CSS:

.archive.category header.page-header {
    background-color: blue;
    padding: 20px;
}

[Rohith]

Hi there, Is it possible to create something like this?

https://postimg.cc/rKBXV77n

[Ying]

Try change the CSS to:

.archive.category header.page-header .page-title {
    border-bottom: 5px solid grey;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}
.archive.category header.page-header {
    background-color: #ededed;
    padding: 20px;
    border-radius: 10px;
    border: 5px solid grey;
}

[Rohith]

It worked but how to change the Category heading size in mobile?

[Ying]

The setting is at customizer > typography > Heading 1 (H1), click the mobile icon, and you will be able to set its font size for mobile.

[Rohith]

1. If I Increase it then it is going to change every H1 Tag in the site. So, please provide some css only for H1 Size in Category and in mobile
2. Is it possible to change only the background color of the Category name (Check PVT)

[Rohith]

Hello Anyone please reply?

[David]

Hi there,

remove the CSS you have so far.
And add this:

.archive.category header.page-header .page-title {
    padding: 20px;
    border: 1px solid #222;
    background-color: #222;
    color: #fff;
    margin-bottom: 0;
}
.archive.category header.page-header .taxonomy-description {
    padding: 20px;
    border: 1px solid #222;
    background-color: #efefef;
}
@media(max-width: 768px) {
    .archive.category header.page-header .page-title {
        font-size: 27px
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts