Header banner/text issues

[sharpiefan]

Hi there! I've recently switched to Practicality and have again encountered Dreamwidth's love of putting text over a header banner, as shown here, top right: (click the thumbnail for a bigger view).

I'm not fantastic with HTML and CSS, but I know it's there somewhere, where I can put the header banner as a background image and move everything down, but I can't remember where to find that bit of code or how to alter it.

This isn't just an issue with Practicality, it occurs in every DW layout I've used: the Customize area allow for a link to a banner, but the text in that box won't move down, despite the user filling in the height of the banner, so the end result is a clash of text and banner that is frankly ugly. Would it be possible for someone to look into this and change the behaviour of text in the topbox? Or is that too big an ask, as it affects pretty much all DW layouts? I wouldn't know where to post such a suggestion, myself, and as I've said, I know next to nothing about coding.

Thanks for your help!

Comments

[ninetydegrees]

This isn't just an issue with Practicality, it occurs in every DW layout I've used: the Customize area allow for a link to a banner, but the text in that box won't move down, despite the user filling in the height of the banner, so the end result is a clash of text and banner that is frankly ugly.

The header image is meant to insert a background image not a true banner hence the fact that text is not pushed down (the height setting is there ensure that the header is high enough for your image). I've just realized the text is misleading so I'll open a bug to fix that. There's also a bug open to create a new option for a true banner (I think I was the one who suggested it actually) but until it's implemented you'll have to use custom CSS to do this or insert your image differently, which I'm going to tell you about ASAP.

[sharpiefan]

Ah. Thanks!

That's what I love about this place: people know what you mean, and even folks you don't know help out above and beyond! :D

[ninetydegrees]

Ok so instead of using the Image settings like you've done, I think using Custom CSS for everything works better and is easier to manage:


#canvas {
background-image: url(http://i26.photobucket.com/albums/c139/Sharpiefan/Sharpebanner1.jpg);
background-repeat: no-repeat;
nackground-position: top center;
padding-top: 250px;
}

This goes into http://www.dreamwidth.org/customize/options?group=customcss.

[sharpiefan]

That's perfect! Thank you! :D

[ninetydegrees]

You're most welcome!

[storyfan]

That coding works beautifully in that my header image doesn't have words running through it anymore. But now the red banner is just as deep as the header image. Is there anything I can do about that?

Here's what it looks like:

http://sebastian-spence.dreamwidth.org/

If I can't change it, no problem.

[ninetydegrees]

Can you check your settings at Customize and make sure you haven't changed the height of your header? It should be blank by default. Yours is set to 438 hence the huge space.

[storyfan]

Wow, you're fast!

I clicked on images and removed the 438. But doing that means the header image disappears, too, even if it remains 438 on the CSS customizing page. Or should both of them be blank?

here's what I have on the CSS page:

#canvas {
background-image: url(http://i794.photobucket.com/albums/yy221/storyfan/spence.jpg);
background-repeat: no-repeat;
nackground-position: top center;
padding-top: 438 px;
}

[sharpiefan]

The CSS ought to remain at 438, and the Customize page ought to be set at 0.

You've put the image in above the header box, using CSS, so that's where you need to tell it the height of the image, which you've done with the code given above. By taking the pic out of the header box, that setting needs to revert to 0 and then the banner with the text will revert to its default height. You've not got the URL in the box on the Customize Image page any more, after all.

[ninetydegrees]

You have two typos in your code:

nackground-position instead of background-position

and 438 px instead of 438px

I think that should fix it. :)

[sharpiefan]

(And I didn't spot that! Clever me.)

[storyfan]

Thank you so much, both of you! Everyone at DW is just amazing. I love it here.

My header image looks great! Now I can fix it on my own journal, too.

[sharpiefan]

You're welcome! DW's a great place to be!

[sharpiefan]

Did you enter the height of the banner when you had it in the header box, before putting it above the header box? Because if so, you'll need to go into this page http://www.dreamwidth.org/customize/options?group=images and set the height of the header image back to 0.