CSS changes

[Miller]

i am trying to change the white background in these places. But, I can’t seem to get it right…

class=”tribe-events-list-separator-month”

class=”tribe-events-event-meta”

class=”tribe-mobile-day-date”

class=”tribe-events-day-time-slot”

Also, I’d like to change the blue background that appears on the current day:

class=”tribe-events-thismonth tribe-events-present tribe-events-has-events mobile-trigger tribe-event-day-11 mobile-active”

I was hoping to add in custom CSS how i have done the padding, but nothing I do seems to work… here is what i used in custom css to get the padding how i wanted it (it works good):

.single-tribe_events #tribe-events-content {
padding: 5%;
}

.events-archive .hentry {
padding: 5%;
}

.single-tribe_events .tribe_events {
padding: 5%;
}

[Miller]

in google dev mode, i can see it and change it like this:

media=”only screen and (max-width: 768px)”
.tribe-events-loop .tribe-events-event-meta {
padding: 12px 0 15px;
margin-top: 12px;
background: none;
border: none;

but I do not know how to get that into my custom css.

[Miller]

I may have made this ticket too soon. Sorry.

I added the below to APPEARANCE > EDIT CSS

is this the best way to accomplish this? it fixed my problem and looks how i want it to, but i’m not familiar with doing it this way. normally i put the custom css in the customizer option. will this (below) stay during an update?

.tribe-events-loop .tribe-events-event-meta {
padding: 12px 0 15px;
margin-top: 12px;
background: none;
border: none;
}

.event-is-recurring {
color: white;
font-style: normal;
font-weight: 500;
position: relative;
}

.event-is-recurring:hover {
color: #eeeeee;
font-style: normal;
font-weight: 500;
position: relative;
}

.tribe-events-list-separator-month span {
background-color: #22a5a5;
padding: 0 7.5%;
}

#tribe-events-content .tribe-events-calendar td.tribe-events-present.mobile-active:hover, .tribe-events-calendar td.tribe-events-present.mobile-active, .tribe-events-calendar td.tribe-events-present.mobile-active div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-present.mobile-active div[id*=tribe-events-daynum-] a {
background-color: #22a5a5;
color: #fff;
}

#tribe-events-footer:after, #tribe-events-footer:before, #tribe-events-header:after, #tribe-events-header:before {
content: ”;
width: 1px;
height: 100%;
background-color: transparent;
position: absolute;
display: block;
top: 0;
z-index: 1;
}

.tribe-events-sub-nav li a {
display: block;
padding: 10px 20px 1000px;
color: #fff;
white-space: normal;
position: relative;
margin-bottom: -990px;
background: transparent;
}

.tribe-mobile-day-date {
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
margin: 5px 0 0;
padding: 6px 10px;
background: transparent;
color: #fff;
line-height: 1;
}

.tribe-events-day .tribe-events-day-time-slot h5 {
font-size: 21px;
margin: 1.5em 0 .25em;
padding: 6px 10px;
background: transparent;
color: #fff;
text-align: center;
line-height: 1;
}

[Josh]

Hey Travis,

Thanks for reaching out to us!

The CSS added to the Appearance > Edit CSS section should persist since it is most likely being saved to the database (particularly if this is the feature added via Jetpack plugin).

For CSS customizations within your theme, you could add a “tribe-events.css” file to a “tribe-events” folder within your theme and add the css there. It will load after the plugin styles and should take precedence over the plugin styles.

Let me know if this helps.

Thanks!

[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