Full width banner - automatically scales to any screen size

[Antechinus]

This one gets asked about in the support boards every so often, and I couldn't find a topic about it in this board. So, I'm making one.

This is for the 2.0.x default theme only. The same principles will probably apply to many custom themes, but you will need to adapt the details.

Apart from the full width banner itself, there are a few other things that need to be dealt with.

1/ The default header graphics will be unnecessary if you are wanting a very narrow frame, or no frame at all, around your banner.

2/ If you are wanting a wider frame around your banner, the default header graphics will look wrong. Specifically, you will only see the ends of the second, inner, gradient and that will look weird.

3/ Also, if you have too much height in the header content, the default image will run out of height and makes things looked borked.

4/ Upshrink icon and SMF logo will be pushed down beneath the banner, which isn't the best. A solution that lets them sit on top of the banner at upper right would be good.

5/ Depending on how much frame width you want around your banner, you may have to adjust side paddings on the user area, search form, and main menu (since they are all wrapped inside the header divs).

To start with, I'll give an example that has a 20px wide frame around the banner, which will work just fine with default paddings on the user area, search form, and main menu.

Code (Find) Select Expand

/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 20px 1em 0;
}
/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}

/* 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;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}
h3, h4
{
padding-bottom: 3px;
}
/* the upshrink image needs some tweaking */
img#upshrink
{
float: right;
margin: 1em;
}
/* ..so does the SMF logo */
img#smflogo
{
margin-left: 1em;
}

Code (Replace) Select Expand

/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */

/* the framing graphics */
#header
{
padding: 3px 3px 1em 3px;
background: #fff;
border: 1px solid #b7b7b7;
border-bottom: none;
border-radius: 9px 9px 0 0;
}
#header .frame
{
padding: 12px 12px 0 12px;
background-image: linear-gradient(to bottom, #c9d7e7 0%, #fff 200px);
border-radius: 5px 5px 0 0;
}

/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}

/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
padding: 0 0 10px 0;
}
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}
/* the upshrink image needs some tweaking */
#upshrink
{
position: absolute;
right: 12px;
top: 8px;
padding: 0 2px;
border-radius: 3px;
background: #4269af;
border: 1px solid #777;
}
/* ..so does the SMF logo */
#smflogo
{
position: absolute;
right: 40px;
top: 0;
}
#siteslogan
{
position: absolute;
right: 45px;
top: 0;
color: #fff;
font-weight: bold;
line-height: 3em;
}

And this:

Code (Find) Select Expand

/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}

Code (Replace) Select Expand

/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
position: relative;
}

That will take care of everything, but you may want to adjust the background around the upshrink icon, depending on the colours of your banner.

If you want a no frame at all around your banner, use this for the replace instead:

Code (Replace) Select Expand

/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */

/* the framing graphics */
#header
{
padding: 0 0 1em 0;
background: #fff;
border: 1px solid #b7b7b7;
border-bottom: none;
border-radius: 9px 9px 0 0;
}

/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}

/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
padding: 0 0 10px 0;
}
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
}
/* the upshrink image needs some tweaking */
#upshrink
{
position: absolute;
right: 12px;
top: 8px;
padding: 0 2px;
border-radius: 3px;
background: #4269af;
border: 1px solid #777;
}
/* ..so does the SMF logo */
#smflogo
{
position: absolute;
right: 40px;
top: 0;
}
#siteslogan
{
position: absolute;
right: 45px;
top: 0;
color: #fff;
font-weight: bold;
line-height: 3em;
}

And also adjust the paddings for #upper_section and #main_menu:

Code (Find) Select Expand

/* the upper_section, float the two each way */
#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}

Code (Replace) Select Expand

/* the upper_section, float the two each way */
#upper_section
{
padding: 5px 25px;
margin-bottom: 1.5em;
}

And:

Code (Find) Select Expand

#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}

Code (Replace) Select Expand

#main_menu
{
padding: 0 25px;
float: left;
margin: 0;
width: 98%;
}

If you want an intermediate width frame, play with all of the above until you're happy.

[Antechinus]

Was just playing with stuff on local, and came up with an added trick here. This one requires a small edit to index.template.php, as well as the CSS tweaks. It allows you to have the full-width banner and the standard linked forum name sitting above the banner, just in case anyone wants a banner clear of text with the site name above it.

The whole thing is still wrapped in the same link, so clicking anywhere in the top bar, or on the banner, will take you to the home page.

Template hack is this:

Code (Find) Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>

Code (Replace) Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<span>'. $context['forum_name']. '</span><img src="' . $context['header_logo_url_html_safe'] . '" alt="" />', '</a>

And it needs one additional CSS tweak:

Code (Find) Select Expand

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

Code (Add after) Select Expand

.forumtitle>a>span
{
display: block;
margin: -5px 0 5px 10px;
}

Screenshot below.

[br360]

Very cool tip- works great. 

Sorry if this is a little off topic, but any tips on moving the "hello username", avatar, show unread/new replies, etc. into the image area as well? (see poorly edited attachment)

I found the code in index.template but keep on getting syntax errors when I move it around.

[Antechinus]

Umm, you can do it (you can do anything if you're crazy enough) but it wouldn't be a good idea to move that stuff onto the banner while the banner was stiil linked to the home page. Too much conflict of functionality. People are sure to click the wrong thing sometimes.

If you want that stuff moved up there, it would be best to just have the forum name at the top linked, with the banner just being a non-linked background.

[br360]

It's a test site I'm working with so I've gotten crazy enough to the point where I probably have to restore it at least once or twice a week.

I like the idea of keeping the forum name on top linked, and just having everything moved up to a non linked banner. Let me see if I can play around some more.

Thanks.

[Antechinus]

In that case, just set the banner as a background image in the CSS. That way you don't have to move any markup. You can use the CSS3 background-size attribute to make the image scale with res.

http://www.css3.info/preview/background-size/

[Antechinus]

Had another thought about this yesterday, while getting devious with my default theme's poor, innocent, long-suffering CSS.

Since the full-width banner with no frame relies on absolute positioning to place the smf log/site slogan and the upshrink icon over the banner, it's possible to take this a bit further.

What you can do is also apply absolute positioning to the standard linked text title for the forum, and then move that around to place that text on top of the banner too. This could be useful for people who have no experience using an image editor like GIMP or PS, because it effectively allows you to build a custom banner, with title included, by playing with the CSS.

All you have to do is pick the background image you want, crop it to suitable proportions (a little bit wider than what you will need, and whatever height works well) then load it online somewhere and link it in from the theme page in admin. Then you just pick a good font for the forum title (web fonts would be useful here, if you want something fancy) and color and position that text over the banner.

By being a bit cunning with your placements and paddings, it is even possible to have the site slogan as a subtitle under the main forum title, with the link for the title and banner covering the site slogan, so that the entire header area is still linked even though the default markup places the site slogan outside the linked area. Yes, this is possible. It's not even that difficult.

It works because absolute positioning allows you to specify stacking order. The small markup tweak mentioned earlier places the forum title above the banner area, but inside the same anchor (link). If you use absolute positioning to move that title over the banner, then move the site slogan to beneath the title, what you end up with is the site slogan behaving as a link, since it is effectively covered by the linked forum title. This means the entire banner area operates as a normal link.

Caveat: it gets slightly tricky with the responsive side of it. It's fine when your site is a constant width, but if you scale the width down to phone size the banner will scale with the page, while the positioning of forum title and site slogan will not. This means that to get it looking slick at all resolutions you will need some knowledge of how to use media queries, but media queries aren't hard to use for basic stuff like this.

I'm not going to provide code for doing this stuff, as it will vary depending on the desired result for the site in question. However, by looking at how the site slogan and upshrink are positioned in the previous examples, and applying the same idea to the forum title, you should be able to do whatever you want.

Example screenshot below.

[Topman]

What would be really helpful for everyone would be a MOD for this Antechinus

As it is I am not sure which files this edit should be applied to?

[Kindred]

index.css and index.template.php

[Topman]

It's all index.css in post 1 unless you want to mess about and have the Forum Name above your photo. Then you need to do the edits to index.template in post 2.

Still not entirely clear if the other hacks given to the index.css are an "instead of" the first changes listed  or an "as well as".

Anyhoo I've got main banner full width in every browser.
I just lost" the colour scheme in main_block.png for some reason.

Now if I could just get my "Donate" button advert on the rhs under the search bar!

[villasg]

Was just playing with stuff on local, and came up with an added trick here. ............
And it needs one additional CSS tweak:

Code (Find) Select Expand

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

Code (Add after) Select Expand

.forumtitle>a>span
{
display: block;
margin: -5px 0 5px 10px;
}

Screenshot below.

Hi sorry for my question .
in what file need this tweek ?

[villasg]

@Antechinus if you have time can you explain me how make my forum banner like yours [ Full_width_banner_with_name_POD_1280.jpg ]

[Niko_Bellic]

villasg, the file to edit, is index.css in your theme's directory.

[sophia.liam]

index.css & index.template.php

[villasg]

Thanks for all i did it .
One more question how can i remove the "forum logo" from left upper side ( look attachment ) from index.template.php ?

I make it with this edit its correct ?

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? empty($context['forum_name']) : '<span>'. empty($context['forum_name']). '</span><img src="' . $context['header_logo_url_html_safe'] . '" alt="" />', '</a>

[Topman]

I used a mod for this:
Remove SMF Logo  1.4

[shadowcrew]

Hi all,

First of all I am never sure with the older threads if I should reply or start a new one, in this case I thought this might be best option.

I am using 2.0.11 with the back n black theme for version 2.0.4 on my test site, below is the code from index.css I dont have the code mentioned above. A link to the theme should anyone need it is Back-n-Black

Code Select Expand

/* Styles for the general looks for the Core theme.
------------------------------------------------------- */

/* this is the main container surrounding everything, use this to set forum width, font-size  etc. */
#mainframe
{
font-size: 85%;
width: 95%;
margin: auto;
}
/* the forum name or logo */
h1#forum_name
{
padding: 0.6em 0 0.6em 0;
margin: 0;
font-family: Optima, Verdana, helvetica, sans-serif;
font-size: 145%;
color: #fff;
}

I have attached a couple of screenshots, one of the live site. Although this has the banner full width on the new theme I would only want it 90%

Thank you for your help.

[landyvlad]

Antechinus - great stuff mate. I've just come across this thread.  A quick question -

For context I use the Responsive Curve theme and maintaining the responsive nature is my main concern.

Would you recommend that I use a forum banner with the text overlayed (made in photoshop for example) and use your initial css code to replace the existing forum head text with the banner OR have a graphic only banner with the forum text stuff overlayed as per your reply #6.  My intuition says the former is the better approach - would you agree?

And what image resolution would you recommend for the banner image, so that it scales nicely.  Obviously not too small but some recommended dimensions would assist me.

Thank you.

[Antechinus]

Yup, go with the simple (former) option. The stacked elements trickery was more of a CSS tut. You can use it live, but it gets a bit verbose in terms of code if you want it responsive.

For the banner res, you're pretty much stuck with using something that looks reasonable on desktop. You can use media queries to show a smaller image on mobile, but I remember reading some claims that the bigger image was still processed by the browser anyway (even though it wasn't actually displayed). Offhand I can't remember if anyone found a way around that.

But TBH, it's probably not that big a deal as long as you're sensible about the banner. It'll be cached by the browser anyway, and you should be able to keep it under 100 kb if you're careful. As a one-off item that's not a huge deal in the scheme of things.

[landyvlad]

I'm wondering whether to do a 1024 with or 1080 or 2560 or.....

And does height matter?

[Antechinus]

Yes, it will resize. It just fits whatever space is available. No, height doesn't matter. It all scales automatically.

Personally I'd set a max-width on the wrapper so the forum doesn't get too wide. I know some people insist on filling the entire screen with the forum, but past a certain point it just makes things harder to read. IMO anything over about 1200 px is just a PITA. I don't like chasing sentences for five miles.

[landyvlad]

OK so following the css instructions in the OP I added a banner and ended up with (see attached)
It isn't full width? / as wide as you'd expect.
If I ctrl-scroll to change the zoom, it gets bigger than the available space. (attach 2)
(or do I need to chnage the reslution not zoom to see this work)

Thoughts?


Also is there a way to turn this banner off, and just have the default set up, when viewing from mobiles?

[Antechinus]

Did you clear your browser cache?

[landyvlad]

Yep

[Antechinus]

Ok. Are you on the original stodgey default theme, or the newer responsive version? I haven't looked at the latter yet.

[landyvlad]

Responsive curve

[lurkalot]

Yep

You sure it wasn't your browser playing up?  I only ask because I looked at your site yesterday, and the banner looked good at full width, I even checked zooming in to different sizes and refreshed the page each time, it resized accordingly,  looked fine to me.

[landyvlad]

Plays absolute havoc with mobiles though....
Took up chunks of screen real estate, doesn't scale on mobile size screens etc
Generated a huge number of complaints from in very short order... :lol:

Shame because if I could get this working (or have a  script where it only shows on desktop devices and not mobiles) then it'd be great.

[Antechinus]

I'll grab the responsive curve mod and play around with it over the weekend. It's probably something simple. I know I did test it with the original curve at a range of resolutions.

[landyvlad]

Cheers mate much appreciated.

The main issue is not so much on desktops, but rather the effect it has on mobiles. Doesn't scale, takes up a big chunk of screen real estate, and makes it harder to see / get to / scroll to the main menu items.  Kinda throws things outa whack.

Scaling a banner to suit (relatively) small smartphone screens may well be something between impossible and pointless.
I think the better option would be (if possible) to have it:
On desktops - display banner (perhaps an on/off option would be good here)
On mobiles - do not display banner, just header text as normal.

I think that would be the most practical solution.  Whether that's easy or even possible to implement? Haven't a clue. I'm sure you'll let me know... I just hope you haven't torn out all your hair by then.... LOL

edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously....
 

[Gluz]

For that you specify in CSS certain screen size and up to show your image, so in mobile doesn't shows.

In the responsive part of the CSS you should find some rule for "big screens" like for desktops.

[Antechinus]

Scaling a banner to suit (relatively) small smartphone screens may well be something between impossible and pointless.

It's easy to do. Whether it's pointless or not is subjective.

I think the better option would be (if possible) to have it:
On desktops - display banner (perhaps an on/off option would be good here)
On mobiles - do not display banner, just header text as normal.

Like Gluz says, that's easy too. You just use media queries. Check out the contents of responsive.css and see if any of it makes sense.

edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously....

That's easy too. Lotsa people (me included) have done that before.

[Illori]

edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously....

That's easy too. Lotsa people (me included) have done that before.

http://www.simplemachines.org/community/index.php?topic=532391.msg3783270#msg3783270

[uzma]

Add max-with and max-height to 100%

[landyvlad]

Thank you all.  I'll have a look but I'm not all that up with css and other coding... which is why I like 'mods' so much - does things forme I'm not capable of doing myself.

In an ideal world these functions would be included in the mod. Having said that I know there may be all sorts of technical reasons, as well as a lack of time on the mod owners part, as to why that doesn't happen so please don't take that as a criticism.

Cheers.

[Antechinus]

OK so following the css instructions in the OP I added a banner and ended up with (see attached)
It isn't full width? / as wide as you'd expect.

What size is the image in that shot? Is it actually big enough to fill the width of the header. If it aint, there's your problem.

Plays absolute havoc with mobiles though....
Took up chunks of screen real estate, doesn't scale on mobile size screens etc
Generated a huge number of complaints from in very short order... :lol:

Scales just fine on my test site. All the way down to 240px screen width.

[Antechinus]

landyvlad: if the banner isn't scaling on mobiles at your site, that indicates there is a problem with the coding. Maybe a mod is interfering, or maybe you didn't copy all the required code correctly.

[shawnb61]

I had three problems when I first tried to use this automatic scaling info shared by Antechinus & the responsive curve theme at the same time. 

It always properly scaled my forum logo .jpg, but a few things were whacked out of proportion, especially on mobile.   

First was that I hated the search box, as it took the whole width & made things very odd, so I made this change in responsive.css.  This basically got rid of the width & the padding, and replaced it with a much smaller padding:

Code Select Expand

#searchform .input_text, select
{
/* modified by sjrb to make searchbox work better responsive
width: 95%;
padding: 5px 0;   */
padding: 1px 0;
}

Second was too much padding around the title in index.css by reducing the padding from 10 px to 2 px:

Code Select Expand

/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
/* sjrb modification
padding: 0 0 10px 0;  */
padding: 0 0 2px 0;
}


Third was to make the header smaller & tidier in index.css by removing the margin-bottom:

Code Select Expand

/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
/* removed by sjrb to make header smaller & tidier on mobile
margin-bottom: 3px;   */
}


This might help others experiencing the same things...  These changes basically make the header use up less real estate on mobile devices in 2.0, allowing more content to be shown.

[Antechinus]

Yes I noticed the header area looked a bit messier than I would have liked, but I wasn't sure if that was due to the responsive Curve mod being very basic or not (IOW, I hadn't checked the mod by itself since I don't use it).

I suppose I should really try the basic mod+theme combo and see how that looks, then tweak the full width banner shiz on top of that. Only catch is I know what I'm like. I'll probably want to rewrite half of the mod too.

Edit: Just too a look on local. Yup, she's basic alright. Good thing I never try to use Curve on a phone.

[shawnb61]

I spend most of my time on mobile.  My users, too.  Responsive curve is a very helpful mod, and makes things much more readable and usable. 

Our biggest issue with Responsive Curve was that our banner became unwieldy. 

Your updates above, Antechinus, made it feasible for us to use Responsive Curve.  It's quite nice now.  Thank you. 

[landyvlad]

Thanks I'll have a go.

[jeannepatrickson]

Hi,

That's a great post.

I've a doubt. Is there any option for adding alt text for background images.

I know it's an off-topic. Can any one help me on this.

[Kindred]

no. background images do not have alt-text at all in HTML code

[Arantor]

You can do some voodoo to have text there and just pushed out of sight so screen readers can do it, but it's... not entirely straightforward.

[Antechinus]

Oh? Do tell.

[Arantor]

text-indent: -9999em

[Antechinus]

Yes I know that trick (and there are other ways of doing it too*) but the question was about CSS background images.

*visibility: hidden; or
position: absolute; z-index: -99; or
height: 0; overflow: hidden; or...

[Arantor]

Same deal. An element with a background image can still have textual content with its text shoved out of sight and get the benefits of both.

[Antechinus]

Well yes, although the question was strictly about having an alt tag on a background image. IOW, something that would be visible if the image 404'd, or if images were disabled in the browser, which is not possible AFAIK.

Having non-visible text in most HTML elements is easy enough. There are umpteen ways of doing that. You can even just use color: rgba(0,0,0,0); if you like. That'll work.

[Arantor]

I assumed it was for the infamous SEO purpose where it would actually work better than an alt tag.

[edi1967]

very nice tips thx but i have one little question, if i want my banner forum more little in size how i can edit your code?

i mean my banner begin very big using your code i want that will be more little in size, please let me know how i can edit code

here my site for view

http://ediboard.altervista.org/index.php [nofollow]

[Antechinus]

The short version is: instead of setting width to 100%, set it to something smaller.

Try playing around with that first. See how you go.

[edi1967]

The short version is: instead of setting width to 100%, set it to something smaller.

Try playing around with that first. See how you go.

thx you for your reply i tried to :

Code Select Expand

.forumtitle>a>img
{
width: 80%;


Edit width to 80% and logo begin more little but is not centered, you can suggest me how decrease width but mantain the logo centered?

thx you so much Antechinus

[Antechinus]

Code Select Expand

.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

[edi1967]

Code Select Expand

.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

tried but dont work

[Antechinus]

Ok, use this:

Code (Find) Select Expand

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

Code (Replace) Select Expand

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

That will give a banner that is half the width of the header. If you want it 80% the width of the header, change 50% to 80%.