Adjustable Banner Size?

[kzweyr]

When I switched our new forum over to v5, I switched the forum width from a fixed pixel width to a fixed percent width, as we have members who are on older computers with smaller resolutions.  In doing so, the issue of having a scroll bar for the forum seems to have been fixed, however the banner size doesn't seem to adjust (see the screen shot for an example).  I would like to be able to make it so that everyone can see the full banner and, for those people with larger resolutions, there isn't a banner repeat.  Any help with this would be appreciated.



Edit:  Another question.  Is there a way to add the "participated button" to the main navigation bar at the top and get rid of the navigation tree below it?  If not, is there a way to simply get rid of the navigation tree?

Attachments:

[Brian]

Hi, kzweyr.

Can you provide a link to the forum in question? I can sort out the banner issue from your images, but I don't see the participated button anywhere there so I'm not sure what to do about that.


Anyways, for the banner issue, add this to the bottom of your style sheet in Themes > Advanced Styles & CSS > Style Sheet:

/* Logo scales with Forum Width */
#banner { height: 100%; padding: 0px; }
#banner-container, #banner { display: block; }
a#logo img { max-width: 100%; }
a#logo { font: inherit; }
#banner { margin-bottom: -3px; }

Now go to Themes > Theme Manager and click on the Images tab. Change the image for Logo to your banner image. Go back to the Settings tab and change Forum Title to Display Logo.

Finally, go to Themes > Colors & Theme Creator and remove your logo from the Banner Image field and save.

Your banner should now resize with the forum.

[kzweyr]

Oh yes. I wasn't logged into that browser at the time, thus the lack of participated button.

URL: newcaledoniaweyr.proboards.com

I'll wait to attempt the banner fix until this coding/theme issue thing is resolved.

[kzweyr]

Ok. I'm not entirely certain if I've done everything right. I put in the code, switched the logo area, etc. I had to switch the banner height to 0 and make it none in the theme template, because it was doing some sort of funky tiling thing, but that got rid of it. The only main difference now is that there's a space between the logo and the navigation menu that wasn't there before.

Url should show you what I mean.


Also, is there a way to tweak this code/set up so that the background image does the same thing?  Like the screenshots show, what's visible of the background is different passed on resolution/size.  I'd like for the full background image to be visible, though if it can't be, that's fine.

[Maiden]

I'd be interested in there being a way to do this with my banner as well but I have mine uploaded as the background image so I can display the forum name over it.

Colours and Style > Visual Editor > Header (Top) > Forum Banner > Banner Image > Background Image

solariaweyr.proboards.com/

[Brian]

Jan 29, 2013 17:18:25 GMT -8 kzweyr said:

Ok. I'm not entirely certain if I've done everything right. I put in the code, switched the logo area, etc. I had to switch the banner height to 0 and make it none in the theme template, because it was doing some sort of funky tiling thing, but that got rid of it. The only main difference now is that there's a space between the logo and the navigation menu that wasn't there before.

Url should show you what I mean.


Also, is there a way to tweak this code/set up so that the background image does the same thing?  Like the screenshots show, what's visible of the background is different passed on resolution/size.  I'd like for the full background image to be visible, though if it can't be, that's fine.

Backgrounds can't be resized, as they're attributes of elements, not elements in and of themselves.

To fix the spacing issue, try adding this below the code I gave you.

a#logo { font: inherit; }
#banner { margin-bottom: -3px; }

Jan 30, 2013 5:25:51 GMT -8 Maiden said:

I'd be interested in there being a way to do this with my banner as well but I have mine uploaded as the background image so I can display the forum name over it.

Colours and Style > Visual Editor > Header (Top) > Forum Banner > Banner Image > Background Image

solariaweyr.proboards.com/

This can only be done if the banner is an actual image rather than a background image.

[Maiden]

Cool thanks.

[h4mmy]

Jan 29, 2013 16:44:53 GMT -8 Brian said:

Hi, kzweyr.

Can you provide a link to the forum in question? I can sort out the banner issue from your images, but I don't see the participated button anywhere there so I'm not sure what to do about that.


Anyways, for the banner issue, add this to the bottom of your style sheet in Themes > Colors & Styles > Style Sheet:

/* Logo scales with Forum Width */
#banner { height: 100%; padding: 0px; }
#banner-container, #banner { display: block; }
a#logo img { max-width: 100%; }

Now go to Themes > Theme Manager and click on the Images tab. Change the image for Logo to your banner image. Go back to the Settings tab and change Forum Title to Display Logo.

Finally, go to Themes > Easy Theme Creator and remove your logo from the Banner Image field and save.

Your banner should now resize with the forum.

BRILLIANT.

Fixed a question I was just going to ask This is a goot change as it sizes the image correctly from smartphones to huge desktop screens. thankyou Brian

[Glass Owl]

Thank you so much for this information! I have a large banner on my forum and members weren't able to see the left and right sides of it when viewing it on phones or smaller monitors. Now everyone can see it full size.  

[Entris]

Hiya Brian

I am creating a new theme on our board and since our banner aint fitting the board figured that doing the settings would solve our banner problem too but nothing happend.
Don't want to mess anything else up with the theme that is on the board now and am only trying to find fixes for it atm to develop it more later so created the Testing2 theme to mess around with without disturbing those that are on the board.

I copied the code and added it to the bottom of the style sheets so it has this there:
/* Logo scales with Forum Width */
#banner { height: 100%; padding: 0px; }
#banner-container, #banner { display: block; }
a#logo img { max-width: 100%; }

I then went to the Image tab and made sure the banner link was there (it was and now have resaved it just to be sure).
After that I went to the Settings tab again and made sure that it was set to Display Logo (it was but changed it and changed back just to be sure again)
And after that one i went to the Easy Theme Creator and made sure that there was no link there in the Banner settings (it aint - None)

So what did i do wrong?
Board: Here
Not sure if it does you any good since this is a theme that is not active on the board and restricted to Staff only to see it, if you want me to change it lemme know and I will do it asap and get back to you.

[kzweyr]

Thank you very much! I do appreciate it.

[Brian]

Feb 1, 2013 13:10:45 GMT -8 Entris said:

Hiya Brian

I am creating a new theme on our board and since our banner aint fitting the board figured that doing the settings would solve our banner problem too but nothing happend.
Don't want to mess anything else up with the theme that is on the board now and am only trying to find fixes for it atm to develop it more later so created the Testing2 theme to mess around with without disturbing those that are on the board.

I copied the code and added it to the bottom of the style sheets so it has this there:
/* Logo scales with Forum Width */
#banner { height: 100%; padding: 0px; }
#banner-container, #banner { display: block; }
a#logo img { max-width: 100%; }

I then went to the Image tab and made sure the banner link was there (it was and now have resaved it just to be sure).
After that I went to the Settings tab again and made sure that it was set to Display Logo (it was but changed it and changed back just to be sure again)
And after that one i went to the Easy Theme Creator and made sure that there was no link there in the Banner settings (it aint - None)

So what did i do wrong?
Board: Here
Not sure if it does you any good since this is a theme that is not active on the board and restricted to Staff only to see it, if you want me to change it lemme know and I will do it asap and get back to you.

I made another post in this thread explaining how to fix that, although yours might need the margin to be -2px based on what I tested.

[Entris]

Feb 3, 2013 18:20:28 GMT -8 Brian said:

Feb 1, 2013 13:10:45 GMT -8 Entris said:

Hiya Brian

I am creating a new theme on our board and since our banner aint fitting the board figured that doing the settings would solve our banner problem too but nothing happend.
Don't want to mess anything else up with the theme that is on the board now and am only trying to find fixes for it atm to develop it more later so created the Testing2 theme to mess around with without disturbing those that are on the board.

I copied the code and added it to the bottom of the style sheets so it has this there:
/* Logo scales with Forum Width */
#banner { height: 100%; padding: 0px; }
#banner-container, #banner { display: block; }
a#logo img { max-width: 100%; }

I then went to the Image tab and made sure the banner link was there (it was and now have resaved it just to be sure).
After that I went to the Settings tab again and made sure that it was set to Display Logo (it was but changed it and changed back just to be sure again)
And after that one i went to the Easy Theme Creator and made sure that there was no link there in the Banner settings (it aint - None)

So what did i do wrong?
Board: Here
Not sure if it does you any good since this is a theme that is not active on the board and restricted to Staff only to see it, if you want me to change it lemme know and I will do it asap and get back to you.

I made another post in this thread explaining how to fix that, although yours might need the margin to be -2px based on what I tested.

If you mean this code:
a#logo { font: inherit; }
#banner { margin-bottom: -3px; }
I tried that but it didn't work, added it again and altered the 3 -> 2 but that didn't change anything either, the image is still not filling out to be the same size as the board.
Re-read this thread over and over to see if i missed something but not found anything yet but will do it again just to be sure i've seen all the codes

[Brian]

Feb 4, 2013 12:04:59 GMT -8 Entris said:

Feb 3, 2013 18:20:28 GMT -8 Brian said:

I made another post in this thread explaining how to fix that, although yours might need the margin to be -2px based on what I tested.

If you mean this code:
a#logo { font: inherit; }
#banner { margin-bottom: -3px; }
I tried that but it didn't work, added it again and altered the 3 -> 2 but that didn't change anything either, the image is still not filling out to be the same size as the board.
Re-read this thread over and over to see if i missed something but not found anything yet but will do it again just to be sure i've seen all the codes

Your forum's banner needs to be set as the logo for this to work. Right now you have it set as the banner, which makes it the background image for your welcome table.

Upload it as the logo instead in Themes > Theme Manager > Images.

[Entris]

Feb 4, 2013 12:12:13 GMT -8 Brian said:

Feb 4, 2013 12:04:59 GMT -8 Entris said:

If you mean this code:
a#logo { font: inherit; }
#banner { margin-bottom: -3px; }
I tried that but it didn't work, added it again and altered the 3 -> 2 but that didn't change anything either, the image is still not filling out to be the same size as the board.
Re-read this thread over and over to see if i missed something but not found anything yet but will do it again just to be sure i've seen all the codes

Your forum's banner needs to be set as the logo for this to work. Right now you have it set as the banner, which makes it the background image for your welcome table.

Upload it as the logo instead in Themes > Theme Manager > Images.

Im working on a new theme (testing2) that I added the code to that didn't work, didn't want to mess with things and disturb the members incase i would screw up.
I now added it to the theme that is active on the board and it did resize the image but only to the left not to the right.