[Theme: Pique] Grid template customizations

  • nrgondesigns

    (@nrgondesigns)


    8 years ago

    Hello, I’m looking at how to customize the grid template to be used somewhat as a gallery since it looks sleek and modern. I found this thread and found it to be very helpful.
    Here’s my temporary site. I still have to rename the titles and enter in the descriptions.

    My questions are:

    1. Can I vary the number of grid entries per row? For instance, if I want one row to be 3 pages/featured images and the next row to be 2 pages/featured images with those being centered, is that possible? Having them centered without three pages/images I think is the biggest question.

    2. I’m using a static fornt page. Since I’m using this as a pseudo gallery, is there any way I can click on the images to open up the pages or maybe a smaller popup to view a specific image? In some cases I want the user to be view a different image that is a before and after image that I’ve combined into one.

    3. Is there another easier solution for this instead?

    Thanks for your help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Kathryn Presner

    (@zoonini)

    8 years ago

    Hi there – I’ll answer your questions in batches.

    1. Can I vary the number of grid entries per row? For instance, if I want one row to be 3 pages/featured images and the next row to be 2 pages/featured images with those being centered, is that possible? Having them centered without three pages/images I think is the biggest question.

    Are you talking about centering two grid items on one of the front-page panels? If so, you could give this custom CSS a try, modifing the first element (pique-panel2) to your actual panel number, which you can find using a browser inspector.

    .pique-panel2 .pique-grid-three article {
  width: calc( (100% - 80px) / 2);
}

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Moderator Kathryn Presner

    (@zoonini)

    8 years ago

    2. I’m using a static fornt page. Since I’m using this as a pseudo gallery, is there any way I can click on the images to open up the pages or maybe a smaller popup to view a specific image? In some cases I want the user to be view a different image that is a before and after image that I’ve combined into one.

    You can put any type of gallery content into one of the Pique panels.

    The Jetpack Carousel module allows you to open regular WordPress gallery images in a carousel view.

    Opening a different image in a popup isn’t supported by standard WordPress galleries, but you might find a plugin that does it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme: Pique] Grid template customizations’ is closed to new replies.