OBBLM custom banner

[Saebelsultan]

Hey!

For our OBBLM site we want to install a new banner up top. Where I know how to patch a few things up in Photoshop, we apparently didn't get the size right the first try (and it doesn't help. that I know completly nothing of code in any way...). I was now wondering, if OBBLM uses a fixed size for the banner anyway or if it rather adepts to the displaynig device. If it adapts, how do I need to configure my banner then?

Thanks a lot for helping!

[Shteve0]

It's fixed size, but you can trick it into repeating (check the first link in my signature). You need to get a very slim image and repeat it though. I'll dig out the code when I get a sec!

[Saebelsultan]

Thank you, Shteve0!
I am not quite sure, what you mean by repeating the image though.

Am I right about the fixed size being 1200 x 150 px?

[Shteve0]

I don't recall, sorry, but that sounds as though it could be right.

Here's the code from my wbbl site.

/* Banner */
div.banner {
width: 100%;
height: 104px;
margin-left:0px;
margin-bottom: 3px;
margin-top: 20px;
background: url(../images/logo.png) left 18px center no-repeat, url(../images/bg_header.png) left top repeat-x;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: black;
border-radius: 7px;
}

That lives in the (active) stylesheet under the css directory. To get it to work you need two image files instead of the banner: logo.png and bg_header.png. Essentially this code repeats the background image across the width of the window (within the main container boundaries set in the section before this one), and renders a logo on top. The background image should only be a few pixels wide though, it repeats anyway, there's no point feeding a massive image file into the repeat instruction.

You can of course just go to the image your default code renders, open it with something like paint.net or gimp, and click "resize image" - that'll give you the dimensions in pixels. Save your new image over the top with the same size and you'll be fine. It won't be dynamic, though.

[Saebelsultan]

Ah, I see. So, for instance, I have my logo (little picture and some writing) and my backgroundcolour design as two seperate file. They will be placed over each other. But where my logo remains static, my background will be repeated to fit the window size. Nice! I go try doing that.

Otherwise we go static with the whole thing...

Thank you very, very much, Shteve0!!!

[pauli42]

Ty Shteve0 i'll check our css file.

[Shteve0]

Youre very welcome. You might need to play around with some of the settings to get it to look the way you want it.

Here's a cool trick: if you're using Chrome on a desktop, right click somewhere on your obblm page and select "view source" and track down your stylesheet. It basically lets you make live changes to the page without saving them anywhere (as soon as you click a link or refresh the changes are lost). If you like what you end up with, it's as simple as copying and pasting the css code into your actual stylesheet!

[Vanguard]

Nice site Shteve0, have you made your modifications to OBBLM available anywhere? The new team wizard is particularly handy.

Also, I notice we're not the only WBBL. Oops.

[Shteve0]

Thanks man! I haven't yet shared the site code, but that particular module is actually the work of doubleskulls. You can find it here: https://code.google.com/p/obblm/source/ ... %2Fmodules

If you do add it to your site, make sure you bring the relevant section of the settings_modules.php file from the main trunk!

[ddancer]

Definitely a +1 on the site layout, Shteve0 - I like the Wizard as well as the Team in Focus. I saw you shared the Wizard code from DoubleSkulls, any place we can find that team in focus code?

[Shteve0]

Hi ddancer

That's included as standard - iirc in the localsettings file there's a 0/1 on/off toggle for "in focus" under the table section