Creating a franken-layout

[sally_maria]

I like the colours and images in Koi, the Wide Open layout, but I prefer to have my entries and sidebar modules more clearly defined. So I had the bright idea of trying to use them in an Abstractia layout (Au Lait, to be precise, as the colours seemed to match best.)

I can change the background easily enough - you can see it on sally_test but even though I have the file name for the header image, putting it into the header box on the Abstractia layout doesn't seem to do anything.

Am I attempting something beyond the powers of man? or is it just something obvious that I've missed.

Thank you for any help you can give me.

Comments

[sally_maria]

Ah, okay, that makes sense. Thanks for the quick response.

It's only something I was playing with, so I'll wait and see when it gets fixed.

[ninetydegrees]

You're most welcome!

Pasting the temporary fix via custom CSS (http://www.dreamwidth.org/customize/options?group=customcss) if you or someone else needs it:

#header {
background: url(http://yourimage) no-repeat top center;
padding-top: 100px;
}

'padding-top' being the height of your image.

And to make sure the image is centered in left or right sidebar mode:

.two-columns-right #header,
.two-columns-left #header {
margin-right: 5%;
margin-left: 5%;
width: 89%;
}

[sally_maria]

Thanks again, I'll have a play with it when I get a bit of spare brain space.

Ah, Glitch. :-( I didn't think to make an icon of my glitch, I'll have to see if I can do something with one of my screen shots.

[ninetydegrees]

:/ You can still access your personal archive (the link is in the closing message on the front page) and save all your different avatars there. Also you can still go to wardrobe and vanity and saving changes will create new pictures of your avatars for you to save.

[sally_maria]

Thank you, that's good to know. I walked away a couple of weeks before the end - I wanted to remember it still as a living world, but that sounds like that might be worth exploring.

[sally_maria]

Thanks for the CSS, which I've finally had chance to play with today.

As it is, there were gaps, both at the top and the sides, where the image only spread as far as the main column and sidebar, and didn't stretch all the way across the window.

I changed it to:
#header {
background: url(http://www.dreamwidth.org/img/styles/wideopen/koi_header_background.gif) no-repeat top center;
padding-top: 137px;
margin-top: -10px;
}

.two-columns-right #header,
.two-columns-left #header {
margin-right: 5%;
margin-left: 0%;
width: 100%;

Which makes the image look right, but then the title and page description also spread right to the sides of the window, when it would be better if they stayed above the columns. Is it possible to fix that?

[ninetydegrees]

Hmm. Would you try adding this too?

.two-columns-left #header .inner {
margin-left: 6% !important;
margin-right: 6% !important;
}

[sally_maria]

Thank you, that's pretty much exactly the effect I was looking for.

I put a margin-top as well in to move the title up a bit, and I'm very pleased with how it looks.

Thank you again for all your help with this.