faux columns Highwind theme

  • mirandajayde · Member ·

    Hi all,

    I am trying to get the sidebar to sit flush with the footer. Apparently the only way to do this using CSS is to create faux columns??

    I have created an image file that is a slice of the colours and proportions of the inner-wrap content of the blog. But I’m having trouble getting the coding to work.

    Also the inner wrap also seems to include the footer – not sure how to isolate this.

    Any help is greatly appreciated.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    The content and sidebar are in the parent div with a CSS class of .content-wrap, which is a child of .inner-wrap. The content is a child with #primary CSS ID, and the sidebar is a child of .content-wrap with an CSS ID of #secondary. The background for the right sidebar is declared in #secondary in the CSS.

    I see an image in your media library called fauxcolumn. Here is the CSS to add that to .content-wrap. I’ve used the background size attribute of “contain” so that it should flow properly when the browser window is narrowed, but at 768px in width, the sidebar moves down below the content, so at that point you want the image to go away. I’ve used an @media rule to limit the background image to 769px and wider.

    @media screen and (min-width: 769px) {
    .content-wrapper {
    background: url("http://destinationlyon.files.wordpress.com/2014/03/fauxcolumn.png") repeat-y scroll 0 0 / contain rgba(0, 0, 0, 0);
}
}

    See if this is what you are looking for. I’m not entirely sure I understand exactly what you are wanting.

  • mirandajayde · Member ·

    Thanks you for your reply and your suggestions.

    Sorry I’m not very clear. I would like the sidebar to extend until the end of the primary content (which is variable depending on the size of the posts) continuing all the way until the footer.

    I have been told that the way to do this is to use the faux column method. As this is beyond me – I simply extended the padding of the side-bar to 3300px – which at the moment covers the length of the longest series of posts displayed. However – this also means that for other shorter posts there is quite a bit of gap between the end of the content and the bottom of the page/footer.

    However, I’m thinking what I’m trying to achieve may not be possible using the sites CSS. So I may just leave the padding how it is.

  • mirandajayde · Member ·

    Or just go with the flow and be happy that for a pretty much free blog I can’t expect to customise it 100% how I want. A shorter sidebar is not so visually unattractive.

  • thesacredpath · Member ·

    Try the code I have above. I tested it on this page on your site, http://destinationlyon.com/category/things-to-do/ , where the content area extends below the length of the sidebar, and with the code I gave, the grey area extends down to the top of the footer area.

  • mirandajayde · Member ·

    I tried it but it also made the header/banner white??

    Perhaps I entered it wrong? I’l try it again. Thanks

  • mirandajayde · Member ·

    Hello – I have used the code and the effect in terms of the length is 100% what I was after.

    The only problem is that I think it has replaced the background colour of the header and the footer? Is there anyway to exclude these?

    Also – there is a little white strip – i’m not sure how to make the grey part of the background reach the right-margin?

    Thanks for your help.

  • designsimply · Member ·

    I tried it but it also made the header/banner white??

    That’s probably happening because there are multiple “.content-width” elements on the page. You could avoid that by changing “.content-wrapper” to “.inner-wrap”

    @media screen and (min-width: 769px) {
	.inner-wrap {
		background: url("http://destinationlyon.files.wordpress.com/2014/03/fauxcolumn.png") repeat-y scroll 0 0 / contain rgba(0, 0, 0, 0);
	}
}

    Also – there is a little white strip – i’m not sure how to make the grey part of the background reach the right-margin?

    I tested with Chrome, Firefox, and Safari on a Mac but couldn’t see a white strip on the right.

  • mirandajayde · Member ·

    Hi – I have added the code but it doesn’t seem to have made any difference? Perhaps I did it wrong? If you take a look at the Metro Boulot Dodo page, the sidebar does not continue all the way to the footer?

  • designsimply · Member ·

    I checked your custom css and I didn’t see this saved there:

    @media screen and (min-width: 769px) {
	.inner-wrap {
		background: url("http://destinationlyon.files.wordpress.com/2014/03/fauxcolumn.png") repeat-y scroll 0 0 / contain rgba(0, 0, 0, 0);
	}
}

    Are you sure you saved it? Can you try again?

    Once it has been saved, I’ll take another look. It’s possible there could be some interference from your other custom CSS that I didn’t notice the first time through, or it’s possible you’re seeing a cross-browser difference and I need to check another browser (I tested in Chrome), or it’s possible that I’m just not understanding the exact change you’re trying to make.

    Try saving the CSS example I provided first, and then we’ll go from there.

  • mirandajayde · Member ·

    yep – i’ll pop it in again. thanks

  • designsimply · Member ·

    I checked http://destinationlyon.com just now, and I see that the custom CSS was saved, but now I’m really not sure what your end goal is because the sidebar seems to sit flush with the footer like you described with or without that example. I had been looking at the syntax only before when I should have stepped back further and asked about your end goal.

    I tested with Safari on a Mac and here is what I see for where the sidebar meets the footer on http://destinationlyon.com right now: https://cloudup.com/cWpD09GcutC

    Am I looking at the same thing you are? When you view, are you seeing a gap there where the sidebar meets the footer?

  • mirandajayde · Member ·

    Thats exactly what I want – but it’s only like that because its the homepage, not because the faux columns worked. I think if you go to the Metro. Boulot. Dodo page there is a gap??

  • designsimply · Member ·

    Aha! It *always* helps to include a link. I didn’t even think to check the other pages!

    Here’s the page I’m looking at now:
    http://destinationlyon.com/category/metro-boulot-dodo/

    I noticed http://destinationlyon.files.wordpress.com/2014/03/fauxcolumn.png is a broken image link now. It must be the wrong URL, can you reply with one that is working?

  • mirandajayde · Member ·

    if it’s a broken image link that might be why – let me check and i’ll get back to you

  • mirandajayde · Member ·

  • mirandajayde · Member ·

    It’s almost perfect now – but there is a strip on the side and it goes a little too far beyond the footer. I’m going to try and include some of the limiting codes that sacred path suggested

  • mirandajayde · Member ·

    wow – even if I can’t stop the faux column before the footer it doesn’t matter. It looks much better :-)

  • mirandajayde · Member ·

    For the moment what I will do is shift the footer message over so that it looks like the overlap is part of the design – and if there is no solution then I like it like that anyway :-) Thanks for your help

  • designsimply · Member ·

    We’re getting in to tweaks on top of tweaks here :) but try this:

    #secondary {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.outer-wrap {
	background: #f1f1f2;
}

.inner-wrap {
	margin-left: 0;
}

    It will remove the box-shadow from the right of the sidebar—I noticed it was adding extra gray to the right of the sidebar at screen sizes wider than 2000px. The .outer-wrap rule sets the middle part of the theme to a light gray background and then the .inner-wrap left margin moves the main container element just inside .outer-wrap to the left so there won’t be a gray strip that appears on the left side.

1 2
  • The topic ‘faux columns Highwind theme’ is closed to new replies.