Where are the Post Grids?

I want to use the POSTS Element from Upfront/Spirit to show a small Posts grid on the front page. While there are many options to choose what to show, there seems to be no option to do a grid from the POSTS Element settings.

I found this post from about a year and a half ago https://premium.wpmudev.org/forums/topic/how-to-get-a-post-grid-view-using-upfront-theme that says it's in Painino but not in Spirit or Upfront.

So, how can I do it from within Spirit? Is it part of Builder?

  • Nithin

    Hi VC Nickels

    So, how can I do it from within Spirit? Is it part of Builder?

    You can implement it in either way using Custom CSS via Upfront Editor, or Upfront Builder. However, there isn't any predefined preset as shown in Panion for Spirit theme.

    You'll have to create a new preset, under Post Settings > Appearance as shown in the screensht. In the above screenshot, the name of the preset is "My Grid", you can then paste the following CSS by clicking the Edit Preset CSS button:

    .upfront_posts-list > ul, .uf-posts {
        overflow: hidden;
    }
    li.uf-post {
        background: #ufc5;
        border: 1px solid #ufc3;
        display: block;
        float: left;
        height: 280px;
        margin: 0 14px 30px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 240px;
    }
    li.uf-post > article {
        display: block;
        height: 100%;
    }
    .uposts-part.thumbnail {
        height: 208px;
        margin: 0;
        overflow: hidden;
        width: 238px;
    }
    .uposts-part.title {
        display: block;
        height: 70px;
        margin: 0;
        padding: 15px;
        width: 100%;
    }
    .uposts-part.title h3 {
        background-color: transparent;
        font-family: "Special Elite", Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        margin: 0;
        padding: 0;
        text-align: center;
        word-break: break-word;
    }
    .uposts-part.title h3 a {
        color: #ufc1;
        text-decoration: none;
    }
    li.uf-post.noFeature {
        background: #ufc0;
    }
    li.uf-post.noFeature .uposts-part.title {
        height: 100%;
        padding: 0;
    }
    li.uf-post.noFeature .uposts-part.title h3 {
        display: block;
        height: 100%;
    }
    li.uf-post.noFeature .uposts-part.title h3 a {
        display: block;
        height: 100%;
        padding: 120px 0;
        -webkit-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
        width: 100%;
    }
    li.uf-post.noFeature .uposts-part.title h3 a:hover {
        background-color: #ufc1;
        color: #ufc5;
    }
    .uf-pagination.numeric {
        text-align: center;
    }
    .uf-pagination.numeric .page-numbers {
        border: 3px solid transparent;
        color: #acbeba;
        display: inline-block;
        font-family: "Lato", Arial, sans-serif;
        height: 37px;
        margin-right: 15px;
        padding: 5px;
        text-decoration: none;
        width: 37px;
    }
    .uf-pagination.numeric .page-numbers.current, .uf-pagination.numeric .page-numbers:hover {
        border-color: #ufc0;
        border-radius: 50%;
        color: #ufc0;
    }
    .uf-pagination.numeric .page-numbers.next, .uf-pagination.numeric .page-numbers.prev {
        border: none;
        border-radius: 0;
        font-size: 0;
        height: 24px;
        position: relative;
        line-height: 24px;
        width: 14px;
    }
    .uf-pagination.numeric .page-numbers.next {
        background-position: -233px -229px;
    }
    .uf-pagination.numeric .page-numbers.prev {
        background-position: -233px -69px;
    }

    The above CSS is from Panino theme, so you'll have to tweak it according to your themes look. Please do let us know how that goes, or if you need any further tweaks for the above CSS. We would be glad to assist you further. Have a nice day. :slight_smile:

    Best Regards,
    Nithin

  • Kasia Swiderska

    Hello VC Nickels,

    It was not implemented because presets for elements are part of the design of each child themes - designers made project that had some predefined presets for each theme, with layout that was suitable for particular design.
    Upfront as framework handles how Editor and Builder works - all the drag and drop experience, global options for all them Upfront themes. But it does not handle "looks" - that is why presets are different in themes. But because html output is the same, they can be moved between the themes.

    But I send to developers your comment about lack of presets for the grid view in some themes - so there is chance that those presets will be added in future release of themes.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.