Full width banner - automatically scales to any screen size

Started by Antechinus, June 18, 2014, 04:52:28 AM

Previous topic - Next topic

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
/* 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
/* 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
/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}


Code (Replace) Select
/* 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
/* 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
/* the upper_section, float the two each way */
#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}


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


And:

Code (Find) Select
#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}


Code (Replace) Select
#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
<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
<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
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
}


Code (Add after) Select
.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

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

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

Quote from: Antechinus on June 18, 2014, 07:23:01 PM
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
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
}


Code (Add after) Select
.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. :)


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 ?

<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


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

/* 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.
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

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?
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Advertisement: