How To Show As Grid?

  • This plugin is SUPER great! But, I have looked around the forum and the plugin info and I don’t see how to make this show up as a “grid”. I see mention of it, but nothing has worked. Right now, all info is stacked. Is there documentation (or just a shortcode you could provide) that shows how to have all staff show up as a grid? Or just other options than just stacked?
    Please advise, thanks!

Viewing 1 replies (of 1 total)

  • I solved this issue in a very inelegant manner. I did not want to mess with the delivered code so below is what I did.

    – In my web page I defined a flex-container.
    – In the staff settings, I created a custom template and in it coded in a flex-item ( <div class=”flex-item”>)
    – Finally, in the same custom template, I changed the CSS to include the flex-item attributes.

    Like I said, inelegant, but it works.

    My code is below.

    <html>
    <head>
    <style>
    .flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    width: 800px;
    height: 40000px;
    margin: 5px;
    background-color: transparent;
    }

    </style>
    </head>
    <body>

    — custom template —–

    [staff_loop]
    <div class=”flex-item”>
    <p style=”text-align: center;”> [photo]<BR> <b> [name] </b> <BR>
    [phone_number] <BR>[email] <BR> [mg_year] <BR></p>
    </div>
    [/staff_loop]

    — custom template CSS —-

    .staff-directory-divider{
    border-top: solid black thin;
    width: 90%;
    margin:40px 0;}
    .flex-item {
    background-color: transparent;
    width: 150px;
    height: 220px;
    margin: 5px;
    font: 11px arial, sans-serif;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘How To Show As Grid?’ is closed to new replies.