Support

Home Forums Event Espresso Premium Styling the event list

Styling the event list

Posted: May 24, 2020 at 6:05 pm


FAPAevents

May 24, 2020 at 6:05 pm

I’m getting closer. I found a post in your support forum about how to control the size of the featured image then the rest of it started looking better. Also, at first, the shortcode was pasted somehow in a grey box which made it all weird. I deleted that block, put the clean shortcode in a new block, styled the block and it looks much better now.

But what I’m stuck on is this: Since it’s a list of all the events in a category they are of course all in the same block. I can’t figure out how to separate the events in a nice visual way and give them a little breathing room. Like I’d like there to be an <hr> I can style between each event but not before the first and not after the last. I know I’ve seen that kind of code around but I’m not finding it. Can you help?

Also, if each event is actually a CPT, I saw somewhere you said you could display the events as post. I have some good post display grid blocks I could use but I’m not sure how to (1) tag the events so they (2) are all in a post category I can use one of the cool post display blocks to display them. Still not sure I’m getting the CPT aspect and how to control/display them as posts. That could solve the styling problem probably. Although I’d still like to know how to add the hr after div class event-content – but not before the first instance and not after the last.
Any help much appreciated!
Laura


FAPAevents

May 24, 2020 at 6:09 pm

Sorry I started a second thread…should have gone back to the first one. I meant to also mention I have CPT UI installed. I don’t really know how to use it but it is installed if that helps. I also have ACF. Not turned on but there if helps.


FAPAevents

May 24, 2020 at 6:24 pm

So, I tagged both events I have set up so far. I see I can call the Events Calendar Pro Events in as posts, so I get the theory about CPT being Events and select that Post Type in the Post Grid block. Only problem is, I don’t see the “Event” CPT for EE, only for Event Calendar Pro. If I can get this to work right, I’ll uninstall that one and use EE. How do I get the EE CPT to show up in the list of post types?
Thanks so much.


Tony

  • Support Staff

May 25, 2020 at 5:18 am

Hi there,

Like I’d like there to be an


I can style between each event but not before the first and not after the last. I know I’ve seen that kind of code around but I’m not finding it. Can you help?

Can you post a link to the page so I can take a look? (You can mark your reply private if you don’t want the links publically visible)

(1) tag the events so they (2) are all in a post category I can use one of the cool post display blocks to display them.

My apologies, but I don’t understand your question.

A tag and category are 2 different things, so are you asking how to set tags on an event and how to set categories?

How do I get the EE CPT to show up in the list of post types?

Which post grid plugin are you using?

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 4 months, 1 week ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/styling-the-event-list/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Name</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>
[i]
[i]