Reduce width of Single Event Container

[lghadmin]

I’ve done a tone of searching on the forums but I’m still not sure if this is a CSS thing or a container thing. For some reason, the Event Calendar “post” container is too wide for the center of my theme. See page example: http://loring-greenough.org/publicevent/women-of-jamaica-plain/ How do I get the sidebar to show up in the correct place again?

[Barry]

Hi lghadmin, I think you are going to have to do one or both of these things:

* Add new CSS rules for div#container … you may for instance wish to apply float:left
* Add new CSS rules for div#sidebar … you might for instance wish to apply either a right or left float and also specify a width, such as width:210px

Does that help here?

[lghadmin]

It kind of helps. I’ll try adding the CSS to the theme and get back to you if that doesn’t work.

[lghadmin]

After a little closer inspection and one moment of trying this solution out, – it looks like the The Events Calendar CSS you indicated here would inherit from the overall site Container (which uses div#container) so the result would be to reduce the entire site’s width.

[Barry]

What is your Events > Settings > Template > Events Template setting currently set to – and have you tried experimenting with this?

[lghadmin]

I had the ‘Default Events’ template selected which gave me the full page calendar that looks good but the wonky post. I have now selected the ‘default page’ template which gives me a better looking single event post but gets rid of the full width calendar page. There is a template choice from the the them creator but that negates the calendar page entirely. I guess what I have to figure out is how to get rid of the sidebars from the calendar page. Unless you can tell me how to find the page id # for the calendar page then I have to go to the theme creator and post something there as well.

[Barry]

Yep unfortunately there is no page ID for items such as the gridview or upcoming events list, they are what some people describe as “virtual pages”.

If the default events template gets you most of the way there (I’m not quite sure what you mean by wonky post but it can probably be fixed) then it may be worth sticking with that and either changing the IDs and classes so they can be targeted by CSS rules without impacting on other pages or else looking at different CSS tweaks.

[lghadmin]

I have it set to default page now live (which gets me almost there). The wonky page shows up when I switched to the default events template. Here’s a screenshot: http://screencast.com/t/bqavyGr5dCgf. What I really like is that full page calendar page but I can’t seem to get that using the default page template. The sidebars show up. I can remove the sidebars if I have a page ID but if there is no page ID then I’m stuck with the default page.

[lghadmin]

I was able to locate the Page ID but using the Chrome Inspector tool to remove the sidebars. This is a good clue for other people out there trying to do the same thing.

[Barry]

OK – so you’re all sorted here?

[lghadmin]

Sort of – When I removed the sidebars, it also removed the sidebars from the post page too so that was full width. I’ll figure things out.

[Barry]

Great. If you think we can offer up any pointers just post back and we’ll try to help. You might also be interested in:

* Themer’s Guide
* Template Overrides Tutorial

Thanks 🙂

[Author]

Posts