[Resolved] styling category pages

Home Forums Support [Resolved] styling category pages

Home Forums Support styling category pages

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #246007
    John

    Hi,

    I’m interested in styling my category pages to look different from one another. What I want to be able to do is have a unique background for each category, as well as information about the category and perhaps a picture at the top of the page, followed by posts in the category.

    I’ve tried adding text, images and and html to the Category Description. Text shows up, but neither html nor images. This suggests I need to do something more drastic.

    WPCodex suggests its possible to define different category templates:
    https://codex.wordpress.org/Category_Templates

    Is this an option with GP?

    Here’s a quote from the webpage above:

    >>
    The Template Hierarchy specifies that WordPress will use the first Template file it finds in your current Theme’s directory from the following list:

    category-slug.php
    category-ID.php
    category.php
    archive.php
    index.php
    <<

    I can’t find any of the first three items among the GP files, so I’m looking in archive.php. Here I read:

    /* Include the Post-Format-specific template for the content.
    * If you want to override this in a child theme, then include a file
    * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    */

    So… CONTENT-slug/ID.php NOT CATEGORY-slug/ID.php?

    Does this mean I should create files in my child theme called (for example) content-category1.php ; content-category2.php ; content-category3.php?

    Is this all I need to do, or do I have to make changes to my child theme functions.php? (And if so, what changes?)

    Grateful – as ever – for any advice.

    John

    #246046
    Tom
    Lead Developer
    Lead Developer

    For the background images etc.. there’s a body class added by the category if you right click and inspect your page using your browser developer tools.

    Here’s an example from our development category: http://www.screencast.com/t/EjbMrhJGRxA

    So for that category I could do this:

    body.category-development {
        background-image: url( 'URL TO MY CATEGORY BACKGROUND' );
    }

    Or the header element:

    .category-development .site-header {
        background-image: url( 'URL TO MY HEADER BACKGROUND' );
    }

    And so on..

    As for the category description, this might be the easiest method: https://en-ca.wordpress.org/plugins/allow-html-in-category-descriptions/

    #246102
    John

    Thanks Tom!

    The plug-in works beautifully.

    I’m sure the code will help too – but where to put it? Should I create separate content-slug.php files for each of the categories and put the code in there?

    Or can I just put this code into the functions.php of the child theme?

    Cheers,

    John

    #246137
    Tom
    Lead Developer
    Lead Developer

    The code can be added in your style.css file in your child theme, or using a plugin: https://generatepress.com/knowledgebase/adding-css/

    #250179
    John

    Hi Tom,

    I’m still working to try to style my Category pages. Using the codes you sent me and after a bit of playing around I’m able to achieve some improvements, but there are still areas of the page I cannot figure out how to change. I’ve made a mock-up of the page I can get, contrasted with the sort of thing I’m trying to achieve. Can you look at it and tell me what I need to do?

    The link is: http://www.nixon-wit.com/difficulties-with-uniqe-backgrounds-in-category-pages/

    Many thanks,

    John

    #250262
    Tom
    Lead Developer
    Lead Developer

    You can remove the background color from the category heading like this:

    .separate-containers.category .page-header {
        background-color: transparent;
    }

    As for the title, try this:

    .page-header h1 {
        font-size: 40px;
    }
    #250763
    John

    Thanks Tom,

    Much appreciated.

    John

    #250824
    Tom
    Lead Developer
    Lead Developer
    #250923
    John

    Hello again,

    Sorry, I thought your last had fixed my problems with this, but I’m still unable to put the background I want into the category description box at the top of the category page. This isn’t the header. In the inspector it is called header.page-header.masonry-brick

    Neither this code

    .separate-containers.category .page-header {
        background-color: transparent;
    }

    nor this

    .separate-containers.category .inside-page-header {
        background-color: transparent;
    }

    seems to have any effect.

    I’ve also tried

    .separate-containers.category .page-header {
        background-image: url(http ETC);
    }

    Also without effect.

    So what I want to do is, for each category, to put a unique-to-category background image in the description box

    #251033
    Tom
    Lead Developer
    Lead Developer

    Each category will have a unique class in the <body> element. You’ll need to use a browser like Chrome, right click and click “Inspect” to inspect the body element for classes.

    For example, if your category has an ID of 20, your code would be:

    .category-20 .page-header {
        background-image: url( 'URL TO YOUR IMAGE' );
    }
    #251101
    John

    Many thanks for your patience and your help Tom.

    That worked!

    John

    #251144
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.