Okay
  Public Ticket #2978531
Category page styling
Closed

Comments

  •  4
    fixthisbuildthat started the conversation

    Where can we edit the styling for blog category pages?  We've looked through all the support documentation and can't seem to find it.  Want to be able to change the grid type, styling,  meta data, etc.

    Not interested in the portfolio aspect, just standard Wordpress blog categories.

    thanks

  •  8,839
    Tahir replied

    Hey fixthisbuildthat ,

    Try adjusting the Blog Stying in here: 

    4563790210.pngClick on Image to View Larger

    Thanks 


    ThemeNectar Support Team 

  •  4
    fixthisbuildthat replied

    Yes, we saw that, but the options are so limited. Few things we want to do:

    -eliminate excerpt (auto excerpt is turned off but excerpt still shows) 

    -eliminate category labels

    -change spacing between masonry material grid

    -change size of thumbnails

    How can we best achieve this globally? 

  •  4
    fixthisbuildthat replied

    Sorry, when I said globally I meant on all category pages. Not throughout whole site

  •  1,877
    Judith replied

    Hi There,

    Please send in your website url so that we can provide css for this.

    Thanks.

  •  4
    fixthisbuildthat replied

    This is the page I'd like to make changes on:

    https://fixthisbuildthatcom.bigscoots-staging.com/category/projects/shop-projects/

    I'd also like to reduce the spacing between "category" and the header and under "Shop Projects" and the separator.

    And on a related question, why aren't some of these stylistic changes available to change in the theme?  Most themes I've used in the past have inputs or toggles for these things.  Asking you guys for CSS seems like a hassle for both of us.  For such a big theme I'm just a little surprised.  Is this to keep the load weight of the theme down or something else?

    thanks!

  •  1,877
    Judith replied

    Hi There,

    1. Please try this css:

    .excerpt {
        display: none;
    }

    2. 

    .masonry.material .masonry-blog-item .meta-category {
        display: none;
    }

    3. 

    .masonry-blog-item {
        width: 52.1% !important;
        height: 435px;
    }

    Thanks.

  •  4
    fixthisbuildthat replied

    Thank you, that helped some of our issues.  Can you also please tell us how to:

    • Reduce the padding above and below the category headings
    • Reduce padding below post title
    • Force a center crop on thumbnails at a specific ratio (i.e. 16:9)
    • Force fill / zoom sidebar widget thumbnails

    Thank you!

  •  8,839
    Tahir replied

    Hey Again,

    Regarding the Image Aspect Ratio, Try adjusting the image sizes in here: https://themenectar.com/docs/salient/modify-image-sizes/

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .row .col.section-title {
        padding-bottom: 10px;
    }
    body.material .page-header-no-bg {
        padding-top: 10px;
    }
    .masonry.material .masonry-blog-item .article-content-wrap, .related-posts[data-style=material] .article-content-wrap {
        padding: 10px 30px!important;
    }
    .widget .nectar_widget[class*=nectar_blog_posts_][data-style=featured-image-left]>li a .popular-featured-img img {
        margin-bottom: 0px !important;
        min-height: 65px;
        object-fit: cover;
    }

    Thanks


    ThemeNectar Support Team