Header image problems

[Ninja ZX-10RR]

Hi everyone I believe it's the very first time I am creating a new topic in this board so I hope this is not a duplicate of someone else's topic

So here is my problem I am running SMF 2.0.7 with the default theme, no mods modifying the header space or anything "strange" but I would like to set an image as header for my forum (admin-->current theme-->logo image URL) but the point is that it is always wrong due to the its resolution. Let me explain: I would like that image act as if it was a desktop image on Windows with adaptive dimensions, I mean that I would like to be able to place a very wide one (such as 1800px * 200px in height) and that one should be getting automatically resized according to the user's resolution according to the browser, instead mine always gets cut or it's too little >.< I tried to put it like 1800px but it was being badly cut  any ideas on how to do this? Researching mods didn't help 

Thanks in advance.

[Antechinus]

Yup. Been done heaps of times. Hang on a second while I grab some more coffee and check up on the CSS.

[Antechinus]

Here. Try this:

Code Select Expand

.forumtitle>a>img {
width: 100%;
height: auto;
border-radius: 6px 6px 0 0;
margin-top: 12px;
}

(Happened to have my local site running anyway)

[Ninja ZX-10RR]

Uhm before trying wouldn't it be "auto" for the width? it's that one that I need to adjust lol the height can be 100% instead

And thank you but a Google search couldn't find this, even if like I said I was pretty sure it had been done before, too simple question >.<

[Antechinus]

No. Trust me on this

[Antechinus]

If you want an explanation: you are setting the image size to 100% of the h1 width. That width changes according to res, so you want the height set to auto.

I just threw this on the default theme on my local site before posting the code. You may want to adjust paddings if you're fussy. For instance, you could get rid of the padding on the #header and .frame divs too,  to make the image really fill the upper section. That would mean you would then need to add side padding to the user and news divs. Easy enough if you want to do that.

[Ninja ZX-10RR]

But... Maybe it's because that here it's 1:33 am but which css? I tried in the index.css but there aren't those strings in there there are only these as regards forumtitle

Code Select Expand

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;

And thanks for the explanation I'm more into support usually, not into css coding, this field is usually taken care by my coder colleague

[Antechinus]

But... Maybe it's because that here it's 1:33 am but which css? I tried in the index.css but there aren't those strings in there there are only these as regards forumtitle

Code Select Expand

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;

Yes, so add the new CSS after that.


If you want to take it further an example of the padding tweaks would be this. 5px is the minimum padding you can go down to before the main_block.png starts getting misaligned up in the corners of the header (try it a 0 to see what I mean).

Code Select Expand

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 5px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 5px 1em 0;
}

And

Code Select Expand

.forumtitle>a>img {
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}

Then you'd just add 15px left padding to the user div, and 15px right padding to the news div, to put them back where they were relative to the sides of the header.

[Ninja ZX-10RR]

  ok let me try to screw my theme up with that xD seriously talking I dealt with css like twice and all the rest was done by my colleague so forgive me if I look like a total noob >.<
Hmm so add.. Add that there and try to.. Got it, at least I hope I got it. I'll update you meantime many thanks you are also really quick to answer, that lets me know you have a lot of experience dealing with this kind of things (22k posts are never random stuff indeed). Awesome

[Antechinus]

Actually this is still an incomplete solution, since if you're going with a full-width banner there are some other things I noticed on local.

1/ No point calling the main_block.png at all in the header, since all you really want is a narrow frame around the banner, which means you don't really see the default header graphics anyway.

2/ Also, if you have enough height in the header content, the image will run out of height and makes things looked slightly borked.

3/ Upshrink icon and SMF logo are pushed down beneath the banner, which isn't the best.

These are easy to fix, again just with a few more CSS tweaks. I'll whip up a complete solution tonight (stuff to do now).

[Ninja ZX-10RR]

Well ok meantime I did it. Sorry for the late reply I gave priority to the maintenance topic as the site has been down for 2 hours to me...
Anyway thanks so much (for right now) I did it but still yeah it's not really perfect exactly as you say another thing I didn't quite understand this:

Code Select Expand

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 5px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 5px 1em 0;
}
Tried to change some of those and didn't change anything O.o

And yeah I am pretty sure I will have to post at least 2 more topics to get where I want there are many more paddings that I don't know where they are and many little tweaks...

[Antechinus]

No worries about the late reply. I was off doing other stuff anyway (had to mow the jungle).

Changing those paddings should change something. If you're doing it on a live site (ie: online server, not local host test site) then you will probably need to force a reload before you can see CSS changes (CSS is cached in the browser, so hit it with Ctrl+F5).

[Antechinus]

Ok, I made a Tips and Tricks thread about this. Has all the goodies in it.

Full width banner - automatically scales to any screen size

It wont appear until one of the team gets around to approving it, so hassle them if you want it faster.

[kat]

Duly approved.

Nice one, Ant!

[Antechinus]

Now let's see if I copied the code edits correctly.

[kat]

They worked, on mine, otherwise I'd've hesitated from approving it.

[Ninja ZX-10RR]

No worries about the late reply. I was off doing other stuff anyway (had to mow the jungle).

Changing those paddings should change something. If you're doing it on a live site (ie: online server, not local host test site) then you will probably need to force a reload before you can see CSS changes (CSS is cached in the browser, so hit it with Ctrl+F5).

I might be a noob as regards css editing but I did it I cleared both the domain cache and the browser one, after that ctrl+f5 but nothing changed, LOL.

Ok, I made a Tips and Tricks thread about this. Has all the goodies in it.

Full width banner - automatically scales to any screen size

It wont appear until one of the team gets around to approving it, so hassle them if you want it faster.

Aw :3 well I'm glad I gave you the idea for it I'll "harrass" you there then 
And uhm I will post more in this board I need some other tips as regards my annoying css so..
And thank you very much as always