[Resolved] sidebar expand height

[elguavas]

hi there, great theme, just what i was looking for! AFter trying the free version i opted for gp premium becuse i wanted a few of the addons. 😉

i have my them set up with separate containers for content, with a sidebar on the left, and i’m using the background color showing through the space between content containers as a pleasant visual divider.

what i’d like to do is have the sidebar expand it’s height so that it’s always the same height as the content (with the widgets aligned at the top), even if the sidebar widgets are few.

i’m happy tp achieve this via a child theme if required. is it possible? can you tell me what css changes to make to get this outcome?

thanks.

[Tom]

Hi there,

Glad you’re enjoying the theme!

This thread should be useful to you: http://generatepress.com/forums/topic/equal-length-columns/page/2/?view=all#post-38550

Let me know 🙂

[elguavas]

thanks tom.

if i post that code in the wp_footer hook then the sidebar is indeed kept the same length as the content, however, the ‘padding’ in the sidebar shows as plain white not as my (dark) sidebar background color.

also, i’d like the content to always stay the same height as the sidebar, so they’re always the same height (if the sidebar is taller), so can i somehow apply the auto expanding change to the content area as well? ie. the side bar and content will always be the same height, whichever is taller.

cheer.

[Tom]

In that code you’ll see I set the color as white (#FFFFFF) – you’ll have to modify this to your desired color.

Either element will automatically fit to the tallest element – so if the sidebar is taller, the content will match the height, and if the content is taller the sidebar will match the height.

Hope this helps 🙂

[elguavas]

thanks again tom, your timely replies have made me even happier that i chose the theme!

[quote=”Tom”]in that code you’ll see I set the color as white (#FFFFFF) – you’ll have to modify this to your desired color.[/quote]

yep, found this after looking at the pasted code, works fine.

[quote=”Tom”]Either element will automatically fit to the tallest element – so
if the sidebar is taller, the content will match the height, and if the content is taller the sidebar will match the height.[/quote]

my problem here was i forgot to tick “Execute PHP” in the gp hooks area. having done that it works as expected. 😉

now another small question, but i’ll start another thread to keep things organised.

cheers.

[elguavas]

hmm, apologies for the wierd quoting above where is syays i said what you actually said… :\

i tried editing my bbcodes to [[quote=”Tom”]], but from here at least it still says “elguavas wrote”, *shrug*

[elguavas]

uhh, spoke too soon, it doesn’t matter what the setting of “Execute PHP” is, the sidebar will expand in height, but the content area will not. :\

am i inserting the right piece of code in the right place?

[Tom]

Can you link me to your site so I can take a look?

[elguavas]

it’s still under development, so on my intranet only.

there doesn’t see to be a way to attach a file in this forum?

[elguavas]

so, to clarify i’ve made no mistake:

1. can you give me the definitive link to the final version of that code?

2. i’m meant to paste it in the wp-footer hook?

3. does it matter if “Execute php” is checked?

thanks.

[Tom]

1. This should be it: http://generatepress.com/forums/topic/equal-length-columns/page/2/?view=all#post-38550

Look through the rest of the posts in that topic, as you may find a solution that works.

2. Correct.

3. No need – there’s no PHP in there.

You may need to add a color to .site-main as well:

.site-main {
      background: #whatever;
}

[elguavas]

[quote]1. This should be it: http://generatepress.com/forums/topic/equal-length-columns/page/2/?view=all#post-38550

Look through the rest of the posts in that topic, as you may find a solution that works.[/quote]

yeah, that’s the code i used. i re cut and re pasted it just to make sure.

[quote]2. Correct.[/quote]

that’s where it is.

[quote]3. No need – there’s no PHP in there.[/quote]

thought so.

[quote]You may need to add a color to .site-main as well:

.site-main {
background: #whatever;
}[/quote]

just changing the color in the pasted code seems to work fine for the sidebar at least.

but, with all those thigs checked, i still have only the sidebar growing if the content is taller. if the sidebar is taller the content doesn’t grow. :\

[Tom]

The issue is probably .site-main not having a background color, as that’s the element the height gets applied to.

If that doesn’t work, I’m afraid I would have to actually see the website in action to debug further – maybe throw something up on a temporary URL?

[elguavas]

yup, that was it. i was stoopidly thinkin that i only needed that .site-main css if the expanded background colour fix in the inserted code didn’t work.

i’ve added a .site-main css stanza to my custom css and now it’s working fine.

sorry for the static. 😉

[Tom]

Awesome! Glad that did the trick 🙂

[Author]

Posts