Dara Them Grid Page layout issues

  • Patrise Henkel

    (@patrisehenkel)


    6 years ago

    I have used Dara’s grid page option to showcase ‘products’ on a page called ‘store’ –
    We havent set up a real shopping site yet, so the idea is a gallery of products, events and services with links to pages with Paypal buttons to enable purchase.

    It works, but it doesnt look good without either a border or background color.

    Q1: can we add a border or better yet background color to these pages?
    Q2: or add a background color to the Store page?
    Q3: I used Pages, not Posts, so that it’s simpler for my client. Maybe Posts would work better?

    Q4: Is there another easier solution – maybe create an icon of the featured image by adding the product name in Photoshop, then make a photo gallery, linking the image to the product page?

    Your advice/suggestions appreciated.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • supernovia

    (@supernovia)

    Hi there, I’m not sure what you have in mind with the background color. Can you clarify?

    Also, are you planning on actually adding a cart plugin? It may have its own layout options as well.

    If you’re just hoping to make this page look a bit tidier though, I think you can achieve that by keeping the titles, excerpts, and featured images a more uniform size:

    – crop featured images so they have the same height to width ratio (or even make them all square if you’d like).

    – create excerpts for each page and make sure they’re all about the same length

    Titles can be a bit harder, but try to make it so each one takes up the same number of lines.

    You can see examples here:
    Same title heights, same image heights

    Noting too, you can add borders to your thumbnails by adding this CSS:

    .child-pages img {
    border-width: 1px;
    border-style: solid;
    border-color: #00000022;
    }

    Thread Starter Patrise Henkel

    (@patrisehenkel)

    wow, that does help alot, squaring up titles, image and blurb.

    I will get to work on that, and also try the border code.

    I was asking if there is a way to add background color to the grid items, or to the grid page itself, just to contrast. Like your black page makes the white items stand out dramatically.

    We’re not ready for a cart plug-in just yet. Next challenge is events and appointments.
    Thanks again!

    KokkieH

    (@kokkieh)

    Hi there,

    Do you mean something like this?

    /* Change background color of Store page */

.page-id-342 .site-content, .page-id-342 .content-wrapper, .page-id-342 .content-area {
  background-color: blue;
}

    Note that if you set a background color for that page, you’ll also need to adjust text color so it’s still legible. For example:

    /* Change text color of Store page */
.page-id-342 h1, .page-id-342 h2, .page-id-342 h3, .page-id-342 h4, .page-id-342 h5, .page-id-342 h6, p {
  color: yellow;
} 

.page-id-342 a {
  color: pink;
}

    Substitute for the colors you actually want – I just picked very contrasting colors so it’s easier to see which code changes what. The text in the top paragraph that you changed in the editor is not affected by this CSS, and has to be changed in the editor again to work against whichever background you choose.

    Let me know if I’m not understanding correctly what you’re after, or if you want some more tweaks to this ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Dara Them Grid Page layout issues’ is closed to new replies.