Advertisement:

Author Topic: Full width banner - automatically scales to any screen size  (Read 48432 times)

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
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. :)
« Last Edit: June 18, 2014, 05:17:00 AM by Antechinus »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #1 on: June 18, 2014, 07:23:01 PM »
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. :)

Online br360

  • Lead Support Specialist
  • SMF Hero
  • *
  • Posts: 2,030
    • GenXcommunity
Re: Full width banner - automatically scales to any screen size
« Reply #2 on: June 19, 2014, 01:38:03 AM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #3 on: June 19, 2014, 01:52:45 AM »
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.

Online br360

  • Lead Support Specialist
  • SMF Hero
  • *
  • Posts: 2,030
    • GenXcommunity
Re: Full width banner - automatically scales to any screen size
« Reply #4 on: June 19, 2014, 02:01:56 AM »
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.


Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #5 on: June 19, 2014, 02:45:52 AM »
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/

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #6 on: June 21, 2014, 05:34:12 PM »
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. :)

Offline Topman

  • Full Member
  • ***
  • Posts: 484
  • Helping the UK new home buyer
    • newbuildhomes on Facebook
    • @@NewHomeExpert1 on Twitter
    • Brand New Homes
Re: Full width banner - automatically scales to any screen size
« Reply #7 on: June 16, 2015, 02:07:52 AM »
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?

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 55,115
  • Gender: Male
    • Kindred-999 on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #8 on: June 16, 2015, 06:23:12 AM »
index.css and index.template.php
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Topman

  • Full Member
  • ***
  • Posts: 484
  • Helping the UK new home buyer
    • newbuildhomes on Facebook
    • @@NewHomeExpert1 on Twitter
    • Brand New Homes
Re: Full width banner - automatically scales to any screen size
« Reply #9 on: June 26, 2015, 08:13:31 AM »
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!

Offline villasg

  • Full Member
  • ***
  • Posts: 481
Re: Full width banner - automatically scales to any screen size
« Reply #10 on: July 01, 2015, 03:50:33 AM »
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 ?

Offline villasg

  • Full Member
  • ***
  • Posts: 481
Re: Full width banner - automatically scales to any screen size
« Reply #11 on: July 02, 2015, 02:17:31 AM »
@Antechinus if you have time can you explain me how make my forum banner like yours [ Full_width_banner_with_name_POD_1280.jpg ]

Offline Niko_Bellic

  • Semi-Newbie
  • *
  • Posts: 40
  • Gender: Male
  • Forgive me! It's an ugly city!
Re: Full width banner - automatically scales to any screen size
« Reply #12 on: July 05, 2015, 12:45:26 PM »
villasg, the file to edit, is index.css in your theme's directory. :)

Offline sophia.liam

  • Newbie
  • *
  • Posts: 1
Re: Full width banner - automatically scales to any screen size
« Reply #13 on: July 07, 2015, 05:47:52 AM »
index.css & index.template.php

Offline villasg

  • Full Member
  • ***
  • Posts: 481
Re: Full width banner - automatically scales to any screen size
« Reply #14 on: July 07, 2015, 06:52:41 AM »
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]
<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>
« Last Edit: July 07, 2015, 07:03:55 AM by villasg »

Offline Topman

  • Full Member
  • ***
  • Posts: 484
  • Helping the UK new home buyer
    • newbuildhomes on Facebook
    • @@NewHomeExpert1 on Twitter
    • Brand New Homes
Re: Full width banner - automatically scales to any screen size
« Reply #15 on: July 09, 2015, 02:22:11 AM »
I used a mod for this:
Remove SMF Logo  1.4


Offline shadowcrew

  • Semi-Newbie
  • *
  • Posts: 35
  • Gender: Male
    • Shadow Crew
Re: Full width banner - automatically scales to any screen size
« Reply #16 on: June 17, 2016, 05:16:02 PM »
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]
/* 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.


Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #17 on: February 02, 2017, 10:28:48 PM »
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.
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #18 on: February 07, 2017, 03:20:06 AM »
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.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #19 on: February 07, 2017, 03:42:27 AM »

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

And does height matter?
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #20 on: February 07, 2017, 03:47:20 AM »
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.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #21 on: February 11, 2017, 07:18:36 AM »
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?
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #22 on: February 11, 2017, 04:31:27 PM »
Did you clear your browser cache?

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #23 on: February 11, 2017, 07:55:05 PM »
Yep
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #24 on: February 11, 2017, 09:02:16 PM »
Ok. Are you on the original stodgey default theme, or the newer responsive version? I haven't looked at the latter yet.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #25 on: February 12, 2017, 01:03:09 AM »
Responsive curve
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.

Offline lurkalot

  • Sr. Member
  • ****
  • Posts: 978
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Full width banner - automatically scales to any screen size
« Reply #26 on: February 12, 2017, 08:29:44 AM »
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. ;)

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #27 on: February 12, 2017, 07:37:28 PM »
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.

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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #28 on: February 12, 2017, 10:59:30 PM »
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.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #29 on: February 13, 2017, 01:45:25 AM »
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.... :)
 
« Last Edit: February 13, 2017, 02:31:21 AM by landyvlad »
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.

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 961
  • Gender: Male
Re: Full width banner - automatically scales to any screen size
« Reply #30 on: February 13, 2017, 02:24:19 AM »
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.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en ingl├ęs.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #31 on: February 13, 2017, 02:52:56 AM »
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.


Quote
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.


Quote
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.

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 48,069
Re: Full width banner - automatically scales to any screen size
« Reply #32 on: February 13, 2017, 05:10:16 AM »
Quote
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

Offline uzma

  • Newbie
  • *
  • Posts: 1
Re: Full width banner - automatically scales to any screen size
« Reply #33 on: February 13, 2017, 06:19:10 AM »
Add max-with and max-height to 100%

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #34 on: February 14, 2017, 07:41:00 PM »
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. :)
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #35 on: February 25, 2017, 10:45:02 PM »
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.


Quote
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #36 on: February 26, 2017, 09:53:45 PM »
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.

Offline shawnb61

  • Support Specialist
  • Full Member
  • *
  • Posts: 508
    • sbulen on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #37 on: February 26, 2017, 11:19:51 PM »
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]
#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]
/* 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]
/* 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.
« Last Edit: February 26, 2017, 11:40:41 PM by shawnb61 »
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #38 on: February 26, 2017, 11:51:05 PM »
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. :P

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

Offline shawnb61

  • Support Specialist
  • Full Member
  • *
  • Posts: 508
    • sbulen on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #39 on: February 27, 2017, 12:42:43 AM »
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. 
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 276
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #40 on: February 27, 2017, 08:22:58 AM »
Thanks I'll have a go.
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.

Offline jeannepatrickson

  • Newbie
  • *
  • Posts: 1
Re: Full width banner - automatically scales to any screen size
« Reply #41 on: March 13, 2017, 09:56:10 AM »
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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 55,115
  • Gender: Male
    • Kindred-999 on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #42 on: March 13, 2017, 09:58:36 AM »
no. background images do not have alt-text at all in HTML code
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,042
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #43 on: March 13, 2017, 10:08:13 AM »
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.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #44 on: March 13, 2017, 05:36:07 PM »
Oh? Do tell. :D

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,042
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #45 on: March 13, 2017, 05:47:19 PM »
text-indent: -9999em ;)
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #46 on: March 13, 2017, 11:52:44 PM »
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...

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,042
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #47 on: March 14, 2017, 01:38:33 AM »
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.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #48 on: March 14, 2017, 02:55:30 AM »
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.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,042
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #49 on: March 14, 2017, 03:37:33 AM »
I assumed it was for the infamous SEO purpose where it would actually work better than an alt tag.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #50 on: April 22, 2017, 06:21:14 AM »
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]

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #51 on: April 22, 2017, 05:56:27 PM »
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.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #52 on: April 23, 2017, 06:45:35 AM »
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]
.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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #53 on: April 23, 2017, 07:57:03 PM »
Code: [Select]
.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #54 on: April 24, 2017, 03:58:42 AM »
Code: [Select]
.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

tried but dont work :(

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #55 on: April 30, 2017, 04:06:51 AM »
Ok, use this:

Code: (Find) [Select]
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}

Code: (Replace) [Select]
.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%.