genesis sidebar under map

[designagency]

hi there—
im waiting for the fix for the filter bar full width glitch and trying to get a sidebar to appear under the map, next to the event listings (where the filter bar was appearing). the site in question is launching on monday and i’ve had to disable the filter bar in the meantime— however i still need to get some content in that sidebar that is relevant to the calendar.

i’ve followed the themers guide to get a sidebar to appear on the page, however i cant figure out how to get it to show underneath the map (full width map, sidebar-content below the map).

i am using genesis, so i know that effects some of this. the attached photo shows the layout im looking for… what im hoping to do is simply add some HTML in place of the filter bar for the time being.

would love some help figuring this out until the filter bar works properly.

thanks so much,
emily

[George]

Hi @designagency,

Thanks for reaching out. We unfortunately cannot help with custom design/layout questions, so you will mostly have to take the reins here.

With that being said, I took a look at your site and tried to come up with the sort of layout you describe wanting here. I was not able to use CSS to do this because the Map and Events List are in one main div container, and the sidebar content is unfortunately a whole other div. So you could, for example, make the sidebar a bit lower — but you could not then make the map wider without making the events equally as wide.

So it’s a bit of a tricky layout to work with — you may actually find it easier by not putting the temporary sidebar content truly in the sidebar, but instead echoing it directly above the list of events below the map. Then you can keep the map full width, but then style the events list and “sidebar” content separately and have them take up different widths of the page.

If you are able to get your site in this state, where the custom “sidebar” content displays above the events list and below the map, let me know — I will take a closer look and try to recommend CSS to make the layout you describe a reality!

— George

[designagency]

hay george—
thanks so much for this nudge in the right direction. i had been playing around with something similar but your advice gave me the push i needed. that said, i would love any additional recommendations you could offer for my css. below is what im currently using, however i’m unsure if it’s the right approach (i know enough css to get things to look ok, but not always best practices).

additionally, im bumping into an issue with responsive resizing. do you know how i could make the “sidebar” info appear below the event listings once the layout goes full width?

div#temp-sb {
    width: 25%;
    float: left;
    clear: right;
    position: absolute;
}

div#tribe-geo-results {
    float: right;
    clear: both;
}

all the best,
emily

[George]

This reply is private.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts