[Jonah]

Hey Mike,

.single-tribe_events is the body class present when on a single event and .events-archive when on the calendar grid or events list. I forgot to include the ‘a’ selector in there. Try this:


.single-tribe_events .page-item-17 a,

.events-archive .page-item-17 a {

color: #EF3E53;

}


[Jonah]

Glad to hear that worked Sheila. I’ll keep an eye out for your other questions 🙂

[Jonah]

Hey Mike, thanks for the link. Ok, you’re going to have to add some custom CSS to highlight the Events menu item. You can add this to events.css (make a duplicate copy of /wp-content/plugins/the-events-calendar/resources/events.css and place in an ‘events’ folder in your theme) or add to your themes CSS:


.single-tribe_events .page-item-17,
.events-archive .page-item-17 {
color: #EF3E53;
}


You could even make this more specific by adding a specific class to your Events menu item in the WordPress menu editor if you are working with WordPress custom menus.

I hope that helps,
Jonah

[Jonah]

Hi Timothy, this would involve a fair amount of custom coding and we cannot provide a full solution for you. What you would need to do is first get a popup script you can use (Fancybox, Colorbox, etc.) and then create a custom calendar to appear inside the code for the popup on any given page. You can use the tribe_calendar_grid() template function to display the grid in that popup. Good luck!

[Jonah]

Hi Mike, got an example URL I can look at?

[Jonah]

Hey Marc, glad we could help! If you feel up to it, please make mention of us on Twitter, your blog, Facebook, etc. to let other’s know. We would really appreciate it!

Thanks,
Jonah

[Jonah]

Hi guys,

You’re right, the out of the box code does not work. We will file an issue and get this fixed ASAP. Thanks for the report!

[Jonah]

Hey Robert, a good rule of thumb when coding CSS is to never use the !important rule unless you absolutely need which in this case I don’t think you do. A much better approach is to utilize our CSS friend, specificity. Read up briefly on it here if you want: http://css-tricks.com/specifics-on-css-specificity/

Basically CSS specificity is a scoring system for CSS declarations that weighs rules by the selectors used in the definition. So, a plain class declaration (.my-div) will score lower than an ID declaration (#my-div) and you can modify styles much more effectively by overriding an existing style by applying a higher specificity.

For example, say you have this style in place:

.my-div {
width: 100%;
}


You could simply override it by finding a ID selector before .my-div (maybe another wrapper div or something that contains it) and using:

#wrapper .my-div {
width: 500px;
}


You’re still targeting .my-div but by prefixing it with an ID selector the second declaration gets a higher score and that style will be applied. This is how I would suggest styling what you need to. Now, we do have a number of !important rules in our own stylesheet which we will be removing in the near future. So in cases where you want to override these styles you will need to always include the !important rule after your CSS.

I hope that all makes sense. If you can give me a specific example or two you’re still having trouble with I’ll see if I can get you some more relevant examples. Happy CSS’ing!

Regards,
Jonah

[Jonah]

Hi Ruben,

The solution for this is dependent on your theme and it is kind of complex. First off you’re going to want to modify your body classes so you can specifically target certain pages. You can try something along these lines but your theme might have a different body class filter in which case you’ll need to adjust. Try adding this to your themes functions.php file:


/*-----------------------------------------------------------------------------------*/
/* Adds new body classes for events pages
/*-----------------------------------------------------------------------------------*/
add_filter('body_class', 'add_browser_classes');
function add_browser_classes($classes){
if(tribe_is_event() && !tribe_is_day() && !is_single()) {
$classes[] = 'events-list';
}
if(tribe_is_month()) {
$classes[] = 'events-grid';
}
if(tribe_is_event() && !tribe_is_day() && is_single()) {
$classes[] = 'single-event';
}

return $classes;
}


Once you’ve got that in place and working our task becomes much easier because then you can define specific CSS for each type of events page and modify the width of your main content area, hide the sidebar, etc…

So for instance on the calendar grid view you would use something like this in your CSS to change the layout:


.events-grid #content {
width: 770px;
}

.events-grid #sidebar {
display: none;
}


Does that help?

[Jonah]

Hi Christopher,

Samuel is right the solution is to remove that global 100% width declaration on select tags from your stylesheet and make it more specific so it doesn’t affect The Events Calendar.

I don’t see any other select tags on your website so the impact shouldn’t be too bad. If you tell me where another select tag is on the site I can tell you how to target it and we can avoid that conflict.

Regards,
Jonah

[Jonah]

Hey 3dgraphics,

There’s a lot of ways you could do this…

For the main events page try editing events.css (make a duplicate copy and place in an ‘events’ folder in your theme) – find line 184 and change the declaration to:


.events-archive .hentry {
padding: 15px;
}


For the single events try something like:


.single-tribe_events .tribe_events {
padding: 15px;
}


You’ll have to probably play around with things some more to get it just right in your theme. I hope this helps get you pointed in the right direction though.

[Jonah]

Hi Marc,

On #3, you have some CSS in your main.css file that is center aligning the organizer name. This is the code on line 317:


.fn {
font-style: normal;
text-align: center;
font-size: 90%;
margin: 10px 0 0 0;
display: block;
}


You can either change this or you can override it by using something like this:


#tribe-events-event-meta .fn {
text-align: left;
}


Hope that helps, let me know if you need anything else.

[Jonah]

Code got removed… argh… you began your html comments with the “tribe-events-calendar-header” div so make sure to close the html comment after that div ends.

[Jonah]

Hi Sheila, I think the problem may be that you began your open commenting out with “” but then ended it after the closing span tag when you actually would want to close the comment after the closing tag for the div you began the comment on. Otherwise, you’re going to end up with and unclosed tag and this will mess things up. Make sense?

If you wanted to use CSS that is the correct route but you may need to apply some other CSS to get everything else in line…

Let me know whether or not that helps.

– Jonah

[Jonah]

Ahh I see what’s going on. Those two plugins, the Facebook Comments and Shareoholic place their code right below the content before the map. You’ll need to somehow change this via those plugins. You might try manually inserting their code after the map code in the events single.php file.

[Author]

Posts