Need help? Check out our Support site, then


Style Changes Specific to Certain Pages

  1. stocksandbonbons
    Member

    I am working on formatting the pages of my blog to display content in different ways, and am running into problems creating CSS that applies only to specific pages.

    Ultimately, the goal is to have the page "Tips from the 'Sue' Chefs" display as it currently does: a collection of recent posts, with the featured post displaying, then the title, then an excerpt following. The CSS that is making this happen is:

    /*Tips and Tricks- Make posts fill the width*/
    .display-posts-listing .listing-item {
    margin-bottom: 30px;
    width: 90%;
    }

    /*Tips and Tricks- Put title on own line*/
    .display-posts-listing .title {
    display: block;
    }

    /*Tips and Tricks- Hide hyphen for excerpts*/
    .display-posts-listing .excerpt-dash {
    display: none;
    }

    Simultaneously, I would like to have the pages accessed under the "Categories" drop down display essentially like this blog: http://sallysbakingaddiction.com/category/bread/ i.e., three columns of posts, with the featured image (of uniform size), and the post title underneath, with margins between images. I was working on that with the CSS below (spacing is working okay, but images aren't consistent), but the CSS appears to have been overridden by the changes to the Tips page above.

    .display-posts-listing .listing-item {
    display: inline-block;
    width: 33%;
    height: auto;
    text-align: center;
    vertical-align: center;
    }

    .display-posts-listing .listing-item {
    float: none;
    margin: 0 1px 1px 0;
    }

    Could you help me with the CSS to get the various pages displaying properly?

    The blog I need help with is stocksandbonbons.com.

  2. Hi

    Let me see if I understand your request correction:

    So, the site http://sallysbakingaddiction.com/category/bread/ (which is not on WordPress.com), is working correctly and you want to mirror that same treatment on your WordPress.com hosted site at https://stocksandbonbons.com/tips-from-the-sue-chefs/

    Right?

    They are two separate websites, so the CSS on one should not be overriding the other, but you may need to code them differently.

    One solution would be to choose a theme for your Stocks and Bonbons site that includes a page grid. Here's some themes and the grid templates that they have:

    https://gorandemo.wordpress.com/page-templates/grid-page/
    https://selademo.wordpress.com/page-templates/grid-page/
    https://venturedemo.wordpress.com/our-conferences/
    https://dididemo.wordpress.com/templates/grid-page/

    If you are not open to switching to a theme that supports grid pages, let me know and I'll see if we can accomplish what you are looking for with CSS.

    Hope this helps!

  3. stocksandbonbons
    Member

    Thanks for responding! I took your suggestion and changed themes- I found one that has a lot more of the functionality I was looking for. Thanks again!

  4. Great! Glad it all worked out.

Topic Closed

This topic has been closed to new replies.

About this Topic