[Resolved] How to Create Custom PHP Category Template?

Home Forums Support How to Create Custom PHP Category Template?

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #1342871
    Tom
    Lead Developer
    Lead Developer

    So right now I’m seeing this: https://www.screencast.com/t/45UsajEm

    You can reduce it more like this:

    .category header.page-header {
        max-width: 750px;
        margin: 40px auto 40px;
    }
    #1342974
    Andres

    Hi Tom,

    Thank you!! That did the trick.

    This will apply to all custom PHP category pages, right?

    Oddly, for some reason, if I input that CSS in Simple CSS, it has no effect. However, if I input it in Customizer –> Additional CSS, it works. There is other CSS uses in Simple CSS, and it works.

    I don’t know if it has to do with using a child theme.

    Thank you Tom, and have a good one.

    Sincerely,

    Andrés

    #1343105
    Tom
    Lead Developer
    Lead Developer

    The above CSS will apply on all categories. If you want to apply it to weddings only, you can do this:

    .category-weddings header.page-header {
        max-width: 750px;
        margin: 40px auto 40px;
    }

    If it didn’t work in Simple CSS, it likely means there’s a CSS error in the CSS somewhere above it. You can run your CSS through a validator to check: https://jigsaw.w3.org/css-validator/

    #1343174
    Andres

    Hi Tom,

    I ran the CSS test with all the additional CSS inserted in Simple CSS, and there were 6 errors.

    I removed all the CSS, reran the test, and there were 4 errors

    Screenshot of the CSS errors are below for reference.

    6 Errors: https://prnt.sc/t78lif

    4 Errors: https://prnt.sc/t78lti

    This is all the CSS there is. It’s all that you’ve sent (thank you!!).

    .full-width-content .entry-header {
        text-align: center;
    }
    .contained-content .entry-header {
        text-align: center;
    }
    .entry-header {
        text-align: center;
    }
    .page-header h1 {
        text-align: center;
    }
    body .wpsp-card.wpsp-overlay .wpsp-content-wrap {
        grid-column: 1 / 6;
        grid-row: 3 / 6;
        text-align: center;
    }
    body #wpsp-568 .wp-show-posts-inner:hover .wp-show-posts-image .wp-show-posts-image-overlay {
        background-color: rgba(0,0,0,0.4) !important;
    }
    body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
        -webkit-transform: translateY(0;
        transform: translateY(0);
    }

    .category header.page-header {
    max-width: 1200px;
    margin: 25px auto 30px;
    }`

    If I remove body .wpsp-overlay.wpsp-ov-style-two (…), the CSS for the header on the category page works (the last CSS item). It looks like the issue might be with: body .wpsp-overlay.wpsp-ov-style-two (…),

    After rerunning the CSS test, 2 of the 6 errors are resolved. Here’s a screenshot with the problematic CSS removed:

    CSS Item Removed: https://prnt.sc/t78oq1

    I confirmed CSS body .wpsp-overlay.wpsp-ov-style-two (…), was the same as the CSS provided.

    If I remove all the CSS and insert only body .wpsp-overlay.wpsp-ov-style-two (…), there are still the 2 more errors than when running the CSS test with no additional CSS inserted.

    Sorry for the trouble.

    Thanks and have a good night.

    Cheers!

    Andrés

    #1343819
    Tom
    Lead Developer
    Lead Developer

    I think it’s this: -webkit-transform: translateY(0;

    Can you try adding the closing ) before the ;?

    #1343832
    Andres

    Hi Tom,

    That did it.

    Thanks. I’m going to mark this topic as resolved and write about how I created a custom category PHP template for other to follow who want to do the same and who don’t know how.

    I’ll post it the support forum for you to review at your leisure to make sure there are no issues.

    Thank you and have a good day.

    Cheers!

    Andrés

    #1344024
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.