How do I edit the CSS of the "processing" wheel overlay?

[fifteen15studios]

I’m trying to find where I can edit the CSS for that overlay which comes up after you make a selection. It has that spinning wheel graphic on it and it covers the page in a white transparent overlay while processing the function. Where is this CSS and where is the spinning wheel graphic? I can’t run a check on it using my usual tools because it comes and goes so quickly. 🙂

Thanks!
Brendan

[Geoff]

Hey Brenden–nice to see you here!

This is an excellent question. In fact, I’m surprised I haven’t seen it pop up until now because–you’re right–trying to inspect those styles would be rather hard to do. 🙂

The loading graphic itself is located in the plugin files at: [your-site]/wp-content/plugins/the-events-calendar/src/resources/images/tribe-loading.gif

…and the styles in the stylesheet for the AJAX loading states are currently:

/* Tribe Spinner */
.tribe-events-spinner {
width: 32px;
height: 32px;
margin-left: -16px;
}
.tribe-events-spinner-medium {
width: 24px;
height: 24px;
}
.tribe-events-spinner-small {
width: 16px;
height: 16px;
margin-left: -8px;
}

.tribe-events-ajax-loading {
display: none;
position: absolute;
left: 50%;
margin-left: -27px;
top: 150px;
padding: 15px;
background: #666666;
z-index: 10;
border-radius: 5px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
}

.tribe-events-loading .tribe-events-ajax-loading {
display: block;
}

.tribe-events-ajax-loading.tribe-events-active-spinner,
.tribe-events-ajax-loading.tribe-events-active-spinner img {
display: block;
}

Does this help get you started? Please let me know if any other questions pop up and I’d be happy to help as best I can. 🙂

Cheers!
Geoff

[fifteen15studios]

Ok, great! That gets me off to a great start! How about the overlay, though? That white-ish filter which covers the page when you change it?

Thanks,
Brendan

[Geoff]

Great, I’m glad that helps!

I believe that is the .tribe-events-ajax-loading class. It’s current set to a light gray (#666666) and can be changed to another color in the CSS. 🙂

Thanks!
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts