Support » Plugin: Events Manager - Calendar, Bookings, Tickets, and more! » Display the events list in Grid View

  • Resolved kabengwa

    (@kabengwa)


    How can i display the events list in a grid view with the date and time below the thumbnails. More like thumbnail for an event the description and then the dates in that order from up to bottom.

Viewing 6 replies - 16 through 21 (of 21 total)
  • I don’t think the col width 85% is the problem.
    I looked at your page… it looks nice except it is not doing what it is supposed to be doing.

    The problem is this, and I apologize because I did not explain to you exactly what you need to do, EXACTLY (not shouting here !)

    For You, and everybody else trying to do this…
    The CODE I provided will and should work in a generic post.

    BUT what YOU and others need to do… is go back into
    In Settings -> Events
    Events Manager Options
    –> Formating
    click ->Events (it expands to “Events Page”)

    “Default event list format header”

    <div class="row">
        <div class="col-3ex exmenu" >
          <ul>

    Then below that…
    “Default event list format”

    <li>
    	<div align="center" style="margin-right:5px;text-align: center;">#_EVENTIMAGE{125,69}<br />
    		<span style="font-size: 12pt;font-weight:bold;">#_EVENTNAME</span><br>
    		<span style="padding:2px;text-align: center;border:solid black 1px;border-radius:4px;background-color:#e6e6e6;font-color:#000000;font-size:16px;font-weight:bold;">#_EVENTDATES</span>
    	</div>
    		  </li>

    and Below that… the “footer”
    “Default event list format footer”

    </ul>
         </div>
    </div>

    The exact problem you are having is that
    in the Settings we are talking about… it doesn’t need the short codes…
    [events_list limit=3]
    and
    [/events_list]

    It is doing that automatically.
    So in my code I provided… the info between those shortcodes is the “body”..
    Above the shortcodes is the “header”
    And below the shortcodes is the “footer”

    This procedure I have just explained is how it it done for your Default Events Page…
    ie: yourwebsite/events

    My apologies for not specifically showing you this… but I think along the way you learned some things.

    Keep the 85% width as before.. but change it after you do what I just described to meet your needs.

    I’ve been following your progress… you are getting there…
    But either you didn’t past the code exactly as I just showed you..
    Or your theme is inserting

      and

    This results in the single column of events.. in place of the grid you want.

    Make sure you don’t have

      and

    in the…
    “Default event list format”

    <li>
    	<div align="center" style="margin-right:5px;text-align: center;">#_EVENTIMAGE{125,69}<br />
    		<span style="font-size: 12pt;font-weight:bold;">#_EVENTNAME</span><br>
    		<span style="padding:2px;text-align: center;border:solid black 1px;border-radius:4px;background-color:#e6e6e6;font-color:#000000;font-size:16px;font-weight:bold;">#_EVENTDATES</span>
    	</div>
    		  </li>

    Whoops.. the editor here didn’t allow me to put the html statements with out pushing the “code” buttons….

    I’ve been following your progress… you are getting there…
    But either you didn’t past the code exactly as I just showed you..
    Or your theme is inserting
    <ul> and </ul>
    This results in the single column of events.. in place of the grid you want.
    Make sure you don’t have
    <ul> and </ul>
    in the…
    “Default event list format”

    <li>
    	<div align="center" style="margin-right:5px;text-align: center;">#_EVENTIMAGE{125,69}<br />
    		<span style="font-size: 12pt;font-weight:bold;">#_EVENTNAME</span><br>
    		<span style="padding:2px;text-align: center;border:solid black 1px;border-radius:4px;background-color:#e6e6e6;font-color:#000000;font-size:16px;font-weight:bold;">#_EVENTDATES</span>
    	</div>
    		  </li>

    We really need to be able to see the page to help further. The link you gave is password protected.

    He mentioned earlier
    user is a
    password is z

    While it looks “better” something is still screwy…

    In place of one “loop” through the Event List…

    <div class="row">
    all the normal stuff
     with each individual event
    </div>

    It loops through the event list… with four events all the same..
    and then repeats for the next event…
    where it should be as I just put in above…

    it looks like this below.. sort of..

    <div class="row">Event 1 Repeated four times</div>
    <div class="row">Event 2 Repeated four times</div>
    <div class="row">Event 3 Repeated four times</div>
    <div class="row">Event 4 Repeated four times</div>

    You’ll see what I mean when you use the inspector on the page.
    He had something similar to this “repeat” before…

    He actually had the “list” with individual events correct earlier today…
    It just didn’t make the grid we have been trying to achieve.

    Thread Starter kabengwa

    (@kabengwa)

    I have done what you told me and i think it is working out great. thank you so much. the problem was with the header part and footer. let me do some styling to make it look like what we designed . thank you very much for the help. @robswaimea and @caimin_nwl

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘Display the events list in Grid View’ is closed to new replies.