"Previous events" link on list page is not showing theme changes

[wesleyanhq]

Hi, I’m on the Events Category archive page named “Training.” https://wesleyanit.wpengine.com/event/category/training

When I scroll to the bottom, and click “<< Previous Events” it does not show my theme changes. When I refresh, then it does.

How can I have it go to my theme changes right away? No one would ever think to refresh the page.

[wesleyanhq]

Here’s a better way to say it: List View Navigation (prev/next) doesn’t show the child-theme template changes. If I refresh then it does.

[Shelby]

Hi There,

I’m happy to help out with this here. 🙂

I think this may have to do with the minification of CSS you have enabled. Could you try disabling it, and let me know if that resolves this issue?

Please let me know if you have any follow up questions or need any clarification!

Best,

Shelby 🙂

[wesleyanhq]

Thanks for your reply. Where would the CSS minification setting be? I’m looking under Events > Settings, and not seeing anything.

[Shelby]

Hi again,

Sorry for the confusion, I’ll clarify:

Our plugin doesn’t have a minification setting, this would be something within your theme, or possibly a caching plugin if you have one installed. Something in your site is set to minify the CSS, as I can see minified files when I inspect the source code. It could be a Divi setting? Poke around and let me know what you find out. 🙂

You can also use this conflict testing process to narrow down the culprit in a bit more methodical way if you’d like. 🙂

Best,

Shelby

[wesleyanhq]

Hmm, my theme CSS is not minified. I can view it in Chrome inspector with all the spaces and line breaks that I see in the stylesheet. What do you see minified?

[wesleyanhq]

Hi Shelby, Thanks for the link for testing. So, I have the site switched to Twentyseventeen theme, and no other plugins (besides TEC and ECP). Issue remains: https://wesleyanit.wpengine.com/event/category/livestream/list/?tribe_paged=1&tribe_event_display=list. If you refresh, you’ll see the css changes I added to the default theme.

CSS code I added to the theme (I skipped the child theme part since this is a test):

.single.single-tribe_events.et_full_width_page #main-content .container {
width: 100%;
max-width: 100%;
padding-top: 0;
}

.single.single-tribe_events.et_full_width_page .entry-title {
padding: 0;
margin: 0;
}

.et_pb_pagebuilder_layout.single-tribe_events #page-container .et_pb_row {
width: 100%;
}

.et_pb_pagebuilder_layout.single-tribe_events #page-container .et_pb_with_background .et_pb_row {
width: 80%;
}

/* The Events Calendar plugin – on CPT archive page */

.post-type-archive-tribe_events #et-main-area {
background: transparent;
}

div#tribe-events-content table.tribe-events-calendar {
background: #f3f3f3;
}

table.tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-],
table.tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-]> a,
table.tribe-events-calendar div[id*=tribe-events-daynum-],
table.tribe-events-calendar div[id*=tribe-events-daynum-] a,
table.tribe-events-calendar td.tribe-events-past div[id*=tribe-events-daynum-],
table.tribe-events-calendar td.tribe-events-past div[id*=tribe-events-daynum-]>a {
background-color: transparent;
color: #41464a;
font-size: 20px;
}

div#tribe-events .tribe-events-button,
div#tribe_events_filters_wrapper input[type=submit],
div.tribe-events-button,
div.tribe-events-button.tribe-active:hover,
div.tribe-events-button.tribe-inactive,
table.tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-],
table.tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-]>a {
background-color: #fe8163;
}

div#tribe-events .tribe-events-button:hover,
a.tribe-events-button:hover {
background-color: transparent;
color: #404040;
}

.tribe-events-sub-nav a {
color: #fe8163;
}

div a.tribe-events-gcal,
div a.tribe-events-ical,
div#tribe-events .tribe-events-button,
div.tribe-events-button {
background: transparent;
color: #aaa;
display: block;
font-family: /* ‘Archivo Narrow’, */ ‘Source Sans Pro’, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
float: none;
letter-spacing: -.03em;
margin: 0 auto;
padding: 0;
width: 150px;
}

#tribe-events-content-wrapper h2 {
color: #3e454d;
}

#tribe-events-content .tribe-events-calendar td {
border: 1px dotted #e2e2e2;
}

table.tribe-events-calendar thead th {
background-color: #3e454d;
color: white;
border: none;
font-size: 19px;
}

form#tribe-bar-form .tribe-bar-submit input[type=submit] {
background: #3e454d;
color: #fc7e67;
font-size: 16px;
letter-spacing: normal;
padding: 12px 15px;
}

div.tribe-bar-views-inner {
padding: 19px 0 42px;
background: #3e454d;
}

div#tribe-bar-views .tribe-bar-views-list .tribe-bar-views-option.tribe-bar-active a:hover {
background: #ddd;
color: #3e454d;
}

.tribe-bar-geoloc-filter,
.tribe-events-uses-geolocation .tribe-bar-date-filter,
.tribe-events-uses-geolocation .tribe-bar-search-filter,
.tribe-events-uses-geolocation .tribe-bar-submit {
padding: 10px;
}

/* The Events Calendar plugin – mini-calendar shortcode on events landing page */

div.tribe-mini-calendar-grid-wrapper {
background: #f3f3f3;
padding: 28px 2%;
border-radius: 7px 7px 0 0;
margin: 0;
}

div.tribe-mini-calendar-list-wrapper {
background: #3e454d;
border-radius: 0 0 7px 7px;
color: #adb8c2;
padding: 28px 4%;
}

thead.tribe-mini-calendar-nav td {
background: #f3f3f3;
border-color: #f3f3f3;
}

thead.tribe-mini-calendar-nav span {
color: #6b7984;
}

#tribe-events-content h3 {
font-family: ‘Lora’, Georgia, “Times New Roman”, serif;
}

.tribe-mini-calendar-nav .tribe-mini-calendar-nav-link {
font-size: 28px;
}

/*
thead.tribe-mini-calendar-nav .prev-month span,
thead.tribe-mini-calendar-nav .next-month span {
color: #fd8169;
}
*/

.tribe-events-calendar div[id*=tribe-events-event-] {
margin: 0 5%;
padding: 6px 8px;
}

table.tribe-mini-calendar tr th,
table.tribe-mini-calendar thead th {
color: #3b454e;
}

table.tribe-mini-calendar th {
background: #f3f3f3;
border-color: #f3f3f3;
}

span.tribe-mini-calendar-no-event {
color: #3d444c;
}

table.tribe-mini-calendar .tribe-events-othermonth,
table.tribe-mini-calendar td {
background: #f3f3f3;
border-color: #f3f3f3;
}

table.tribe-mini-calendar td.tribe-events-has-events,
table.tribe-mini-calendar .tribe-events-has-events:hover {
background-color: #f3f3f3 !important;
}

table.tribe-mini-calendar div[id*=’daynum-‘] a {
background: #ff7d67;
border-radius: 50%;
color: white;
padding: 5px;
width: 40px;
margin: 0 auto;
height: 40px;
}

table.tribe-mini-calendar .tribe-events-has-events div[id*=’daynum-‘] a:before {
content: none;
}

table.tribe-mini-calendar .tribe-events-present,
table.tribe-mini-calendar .tribe-mini-calendar-today {
background-color: #f3f3f3;
}

div.tribe-mini-calendar-event .list-date {
text-transform: uppercase;
font-size: 15px;
line-height: 1.5;
}

div.tribe-events-duration {
display: none;
}

div.tribe-mini-calendar-event .list-info h2 {
color: #adb8c2;
font-family: ‘Source Sans Pro’;
font-size: 18px;
font-weight: bold;
line-height: 20px;
margin: 0;
padding: 0;
}

div.tribe-mini-calendar-event {
border-bottom: 2px solid rgba(255,255,255,0.04);
margin-bottom: 15px;
padding-bottom: 15px;
}

.tribe-mini-calendar .tribe-events-past {
opacity: 1;
}

.tribe-mini-calendar .tribe-events-othermonth.tribe-events-past {
opacity: 0;
}

table.tribe-mini-calendar .tribe-events-has-events a:hover,
table.tribe-mini-calendar .tribe-events-has-events.tribe-events-present a:hover,
table.tribe-mini-calendar td.tribe-events-has-events.tribe-mini-calendar-today a,
table.tribe-mini-calendar td.tribe-events-has-events.tribe-mini-calendar-today a:hover {
background-color: #3e454d;
}

table.tribe-mini-calendar .tribe-events-has-events.tribe-mini-calendar-today:hover,
table.tribe-mini-calendar td.tribe-events-has-events.tribe-mini-calendar-today {
background-color: #d6d6d6;
}

.twc-event-list-title {
color: #adb8c2;
text-transform: uppercase;
}

@media (min-width: 850px) {

div.tribe-mini-calendar-wrapper {
display: flex;
justify-content: space-between;
}

div.tribe-mini-calendar-grid-wrapper {
padding: 48px 4%;
border-radius: 7px 0 0 7px;
flex: 3;
}

div.tribe-mini-calendar-list-wrapper {
border-radius: 0 7px 7px 0;
padding: 30px 4%;
flex: 1;
}
}

@media (max-width: 766px) {

table.tribe-mini-calendar div[id*=’daynum-‘] a {
width: 32px;
height: 32px;
}
}

@media (max-width: 1100px) {

.entry-content tr td,
body.et-pb-preview #main-content .container tr td {
padding: 0;
}

table.tribe-mini-calendar div[id*=’daynum-‘] a {
margin: 1px auto;
}
}

/* The Events Calendary plugin – Shortcode 2 on events landing page */

div#tribe-bar-views .tribe-bar-views-list .tribe-bar-views-option a {
background: #f5f5f5;
color: #3e454d;
width: 80%;
margin: 0 auto;
padding: 7px 15px 5px;
border-radius: 2px;
}

div #tribe-bar-views .tribe-bar-views-list .tribe-bar-views-option a:hover {
background: #dddddd;
}

form#tribe-bar-form .tribe-bar-submit input[type=submit] {
background: transparent;
color: #fc7e67;
font-size: 16px;
letter-spacing: normal;
padding: 10px 12px;
border: 2px solid #ccc;
}

/* The Events Calendar plugin – taxonomy archive for “Events Category” */

div#tribe-events-content-wrapper {
margin: 0 auto;
max-width: 1080px;
width: 80%;
}

.tribe-events-notices {
background: #edf8fd;
border: 1px solid #cae7f5;
color: #38abe1;
}

.tribe-events-list-separator-month {
clear: both;
display: block;
margin: 28px 0;
}

.tribe-events-list-separator-month:after {
border-bottom: 1px dashed #404040;
content: ” “;
display: block;
margin: -11px 0 0;
}

.tribe-events-list-separator-month span {
background: white;
display: inline-block;
font-family: ‘ff-market-web’, Helvetica, Arial, sans-serif !important;
font-size: 40px;
font-weight: 400;
line-height: 1em;
padding-right: 20px;
padding-bottom: 0;
margin-top: 10px;
}

.tribe-events-list-separator-month:first-child span {
margin-top: 0;
}

/* Styled Events Posts */

.styled-events .type-tribe_events {
margin-bottom: 100px;
text-align: center;
}

.tribe-events-loop .tribe-events-event-meta {
padding: 0;
}

.type-tribe_events .event-meta,
.type-tribe_events .event-meta a {
padding: 10px 0 0 !important;
}

.styled-events .type-tribe_events h2 {
margin: 19px 0;
font-size: 18px;
}

.tribe-events-content p {
font-size: 14px !important;
line-height: 1.5;
}

/* Footer */

#tribe-events-footer {
clear: both;
}

#tribe-events-content ul.tribe-events-sub-nav {
text-align: left;
}

#tribe-events-content.tribe-events-list {
margin: 60px 0;
}

@media (min-width: 981px) {

.twc_column_1_2 {
float: left;
margin-right: 5.5%;
width: 47.25%;
}

.twc_column_1_2:nth-child(even) {
margin-right: 0;
}

.twc_column_1_3 {
float: left;
margin-right: 3%;
width: 31%;
}

.twc_column_1_3:nth-child(3n + 3) {
margin-right: 0;
}
}

/* Custom Divi Module Events – Custom for TWC
————————————————— */

.event-posts {
text-align: center;
}

.event-posts .et_pb_post h2 {
margin-top: 20px;
}

.event-meta,
.event-meta a {
color: #404040 !important;
text-transform: uppercase;
font-weight: bold;
font-size: 17px !important;
padding: 20px 0 0 !important;
}

[wesleyanhq]

Oh, I also copied the /tribe-events/ folder from old theme to default theme. Then I deleted that and tested only with css making a title blue. that worked. when I added the /tribe-events/ folder back to the default theme, it did not work. So maybe it is not css. maybe it is the overrides. How do I test that?

[wesleyanhq]

Okay, I figured it out. It’s not the css, it’s the theme override, specifically, my-theme/tribe-events/list.php. When I have that file in, then it won’t show until refresh

[wesleyanhq]

Hello? How can I get my theme override at [your-theme]/tribe-events/list.php to execute on page load rather than page refresh?

I would appreciate any assistance.

[Shelby]

Hi Again,

Apologies on my delayed response here. I appreciate your patience, as I’ve had some unexpected road blocks over the last several days!

I will be doing some more extensive testing on this issue with Divi on my testing environment tomorrow and I will update you once I’ve had a chance to try everything out myself. 🙂

Cheers,

Shelby 🙂

[Shelby]

Hey there,

So I just read back through your messages and looked at the site again, and, if I understand correctly, it seems like you’ve resolved this? Is that accurate? 🙂

If not, I’m happy to keep helping you work on it!

Let me know. 🙂

Best,

Shelby 🙂

[wesleyanhq]

Hi Shelby,

Well, it had not been resolved, no.

However, I just now looked again, and tried taking out the

do_action( 'tribe_events_before_template' );

before my custom code in my-theme/tribe-events/list.php and that seemed to resolve it. I guess it didn’t go back to the rest of the code on page when it had that in there.

It’s good for now I guess.

[Shelby]

That’s great to hear! Thanks for sticking with it!

Please feel free to reach out in the future with your questions about our plugins and their functionality. 🙂

Best,

Shelby 🙂

[Author]

Posts