Horizontal events list

  • Resolved dohoekstra

    (@dohoekstra)


    7 years, 7 months ago

    Dear all,
    I am trying to position an events list horizontally instead of vertically with a maximum of three events.

    How do I get it with CSS?

    I use the shortcode for a vertical events list.

    Who can help me?

    Thanks a lot,
    Dennis

Viewing 5 replies - 1 through 5 (of 5 total)
  • Stonehenge Creations

    (@duisterdenhaag)

    7 years, 7 months ago

    Hi Dennis,

    It depends on your mark-up 🙂
    This would be a basic setup:

    Default event list format header:
    <div class="events-bar-all">

    Default event list format:
    <div class="events-bar-single">#_EVENTNAME</div>

    Default event list format footer:
    </div>

    Then your CSS would be something like:

    
.events-bar-all { display: block; width: 100%; padding: 5px;}
.events-bar-single { display: inline-block; width:30%;}
    Thread Starter dohoekstra

    (@dohoekstra)

    7 years, 7 months ago

    I use the following code on my homepage.
    [events_list limit=”3″]

    #_EVENTNAME
    #_EVENTDATES

    [/events_list]

    When I check the code in Firefox, I don’t see any divs belonging to the plugin.

    Stonehenge Creations

    (@duisterdenhaag)

    7 years, 7 months ago

    That’s because anything you pust between [events_list] and [/events_list] will override whatever is in your settings.
    Just use [events_list limit=”3]

    Thread Starter dohoekstra

    (@dohoekstra)

    7 years, 7 months ago

    I got this now:

    <div class=”css-events-list”><table class=”events-table”>
    <thead>
    <tr>
    <th class=”event-time” scope=”col”>Datum/Tijd</th>
    <th class=”event-description” scope=”col”>Evenement</th>
    </tr>
    </thead>
    <tbody><tr>
    <td>
    25/12/2018<br>
    Hele dag
    </td>
    <td>
    Eerste Kerstdag

    </td>
    </tr><tr>
    <td>
    25/12/2018<br>
    Hele dag
    </td>
    <td>
    Eerste Kerstdag

    </td>
    </tr><tr>
    <td>
    25/12/2018<br>
    Hele dag
    </td>
    <td>
    Eerste Kerstdag

    </td>
    </tr></tbody></table></div>

    See: http://dm.mediaans.nl/home/

    Stonehenge Creations

    (@duisterdenhaag)

    7 years, 7 months ago

    You didn’t remove the old markup in the settings!

    Default event list format header:
    <div class=”events-bar-all”>

    Default event list format:
    <div class=”events-bar-single”>#_EVENTNAME</div>

    Default event list format footer:
    </div>
    Nothing else

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Horizontal events list’ is closed to new replies.