CSS Classes on Event Information Shortcodes

  • Resolved ClaytonDaniels

    (@claytondaniels)


    9 years, 10 months ago

    So, when I select the Display Options checkbox to use the simple display options… the output is a nicely formatted <p> tag list of options to display:

    <p class="gce-list-event">x</p>
    <p class="gce-list-start">y</p>
    <p class="gce-list-loc">z</p>

    However, if I uncheck Display Options and build my own Event Display, I get a horridly formatted list with no specific classes:

    <div class="gce-list-event gce-tooltip-event">x</div>
    <div class="gce-list-event gce-tooltip-event">y</div>
    <div class="gce-list-event gce-tooltip-event">z</div>

    I can easily format the CSS when the Display Options box is checked, I cannot do that when I build my own event.

    I guess, is there a way to add custom css to the Event Build, Event Information Shortcodes so that I may customize them easily?

    https://www.ads-software.com/plugins/google-calendar-events/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Nick Young

    (@nickyoung87)

    Checkout the default event builder code here:

    <div class="gce-list-event gce-tooltip-event">[event-title]</div>
<div><span>Starts:</span> [start-time]</div>
<div><span>Ends:</span> [end-date] - [end-time]</div>
[if-location]<div><span>Location:</span> [location]</div>[/if-location]
[if-description]<div><span>Description:</span> [description]</div>[/if-description]
<div>[link newwindow="true"]More details...[/link]</div>

    Everything is wrapped with HTML so you can easily add your own classes for customization there or you can construct your own HTML to use – i.e. you want to use <p> tags to wrap instead of <div> tags, etc.

    Thread Starter ClaytonDaniels

    (@claytondaniels)

    Meant to respond to this and mark it as resolved. I noticed when I went into the the Text editor (instead of the visual editor) that the short-codes were wrapped in <div> tags with classes already set:

    <div class="gce-list-event gce-tooltip-event">x</div>
    <div class="gce-list-event gce-tooltip-event">y</div>
    <div class="gce-list-event gce-tooltip-event">z</div>

    It was simple enough to change these classes to what I needed.

    Thanks for the response!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Classes on Event Information Shortcodes’ is closed to new replies.