[Megan Sukys]

That worked great – thanks!

[Megan Sukys]

Hmm – well strangely now everything is working. I am able to add rules in a media query and they override the mobile stylesheet. This did not work for me previously. I realized one thing – that some of the rules (for related events) are in a separate stylesheet for the pro calendar, which has to be overridden separately. That may be part of what threw me off.

I appreciate you making the video, which made me realize that !important was not required, and I apologize for being snippy. Just frustrated that things were not doing what I was asking them to do.

Oh and by the way I’m not Ryan, I’m the developer working on the project for Ryan, who is our client and who purchased the plugins. Ryan is nicer than me. I’m nice sometimes though. Most of the time.

[Megan Sukys]

Maybe I need to explain to you how your software works (sigh).

To allow theming you instruct the user to create files within a tribe-events folder in the theme with the same name as your default files. Those files allow modifying the base styles without having to use the hack of !important to force an override.

This works where I made these changes (which, if you read my post above you will see are at /my-theme/tribe-events/tribe-events.css), but again, does not fit the model established since I must forcibly override the mobile stylesheet. Based on your theming guide I should be able to just create a mobile CSS file and have that override the default mobile CSS file. It is frankly half-assed to provide a whole process for theming the desktop version without extending that same functionality to overriding the mobile styles.

Can you please pass this task to someone more senior? I need to communicate with someone who understands all this.

[Megan Sukys]

Sure.
Link: http://gtcf.metricmedia.com/event/test-event/all/
Login: gtcf/staging

Note the changes have already been applied so the above URL represents the “after” state. The “before” state is in the screenshot attached, with markup as to what we’re trying to fix.

You can look at the CSS applied to the page above to see the !important rules added to override the styles from your mobile CSS file that we can’t seem to override.

[Megan Sukys]

Just override a few things. Here’s the CSS I currently have in /my-theme/tribe-events/tribe-events.css. I just prefer not to use “!important” when there is architecture in place to allow overriding, as there is with the above stylesheet. Is this not possible with the mobile stylesheet?

I also definitely do not want to modify the core plugin, so we are able to update in the future.

@media all and (max-width: 768px) {
#tribe-events-pg-template {
padding: 0 !important;
}

.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
width: auto !important;
}

.tribe-events-loop .tribe-events-event-meta {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}

.tribe-events-list .tribe-events-venue-details {
padding-left: 0 !important;
}

.tribe-events-single ul.tribe-related-events li .tribe-related-event-info {
padding-top: 10px !important;
padding-left: 10px !important;
}
}

[Megan Sukys]

Perfect. I added the HTML back within the function to keep it all in one place, and specified the Font Awesome characters I wanted to use:

function tribe_events_the_mini_calendar_next_link_url() {
$tribe_ecp = Tribe__Events__Main::instance();
$args = tribe_events_get_mini_calendar_args();
$url = $tribe_ecp->nextMonth( $args[‘eventDate’] );
$html = ‘<i class=”fa fa-caret-right”></i>‘;

return $html;
}

add_filter( ‘tribe_events_the_mini_calendar_next_link’, ‘tribe_events_the_mini_calendar_next_link_url’ );

[Author]

Posts