Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 3, 2022 at 8:24 pm #1343052
    GWS

    Hi,
    We are using The Event Calendar with the Enfold theme. The calendar display setting is set to the Tribe Event Styles and we are happy with it, except we want the page title headings to be wide width like the other pages. We added the current heading in the Tribe html before calendar event content as follows:

    <div style=”background-color: #0355a1!important; color: #ffffff!important; text-align: left; height: 100px; padding-left: 20px; margin-bottom: 40px;”>
    <h2 style=”padding-top: 30px; color: #ffffff!important;”>Upcoming Events</h2>
    </div>

    Is there a better way to do this using the functions file or customizing the Event Calendar template? I realize you don’t offer customization advice, but just wondering if you could offer advice on getting the heading to go full width. Website link is below. Thank you.

    March 5, 2022 at 9:45 pm #1343292
    Mike

    Hey GWS,
    Thank you for your patience and the link to your pages, it looks like what you have done is good, the only other alternative I can think of is to create a script to inject the same div you have, but since you already have it that wouldn’t make sense to do.
    Is there something that you don’t like about your solution?

    Best regards,
    Mike

    March 6, 2022 at 9:34 pm #1343385
    GWS

    Mike,
    Thanks for taking a look. We’d like the page title with blue background to go full width instead of fixed width. Is that possible to do within the Event Calendar html setting, or would the template need to be copied over and altered to include the Enfold full width?

    March 6, 2022 at 9:59 pm #1343389
    Mike

    Hi,
    To have the blue heading full-width for the calendar page please try this css, it should work for all archive-tribe_events pages, so check for this and conflicts and let us know if it needs adjusting.

    #top.post-type-archive-tribe_events .tribe-events-before-html {
  width: 100vw !important; 
  position: relative !important; 
  left: calc(-50vw + 50%) !important; 
}
#top.post-type-archive-tribe_events .tribe-events-before-html > div > h2 {
	max-width:1160px;
	margin: auto;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 6, 2022 at 10:37 pm #1343392
    GWS

    Perfect! Thank you for your guidance. We love Enfold!

    March 7, 2022 at 12:00 am #1343399
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Add Enfold Page Headings to The Events Calendar pages’ is closed to new replies.