OBBLM custom redesign

[Shteve0]

Hi all

Have done a bit of an obblm redesign over the last weekend. See the results here:
http://nzcbbl.obblm.com/index.php?section=main

It's based on the stylesheet used in the standard phpbb forum template, which you can see here:
http://nzcbbl.forumatic.com/index.php

if anyone's interested in making the same change to their own site, it requires two new fade images and changes to two stylesheets only. Let me know if interested and I'll post the code and image files along with install instructions here.

[Minnels]

I really like it and I'll borrow some code from you or well... make my own changes in your design if that's okay

edit:
Tried your code and switched some colors and made a logo for our own. I can't figure out how to get that meny bar in any different colors or even any color at all. Otherwise I am kind of satisfied. Yellow is not an easy color to work with :/

[Shteve0]

There are two stylesheets; you need to find the other one, it's buried somewhere in the folder for the dropdown menu options (I'm away from my computer atm, so don't have the access to check).

What's your site link? Would love to see how you've used the code!

[Minnels]

Ah. I was messing around with that one too actually. Guess I did something wrong somewhere. I actually posted a link in my first text but cut it out since the users started to complain about the colors. I'll mess around a bit more and see if I can get something they are willing to use and then I post a link

[funnyfingers]

I'm stealing it.

[Shteve0]

You're very welcome to it, Will. Glad you like it

[Hegel]

Very nice one ! I´m currently seeting up OBBLM for our league, but the only customization I did so far is another background and banner. I´d be very interested on how to do more like that !

One specific question - are you aware that the dropdowm menus don´t work for iOS ? This is mentioned on the homepage of the coder of the menu subroutine (http://www.lwis.net/free-css-drop-down-menu/). There´s also a note how to fix it below, but I haven´t got a clue how to add this to the code... any ideas ?

Does this menu work on iPhone OS or other mobile OS with no mouseover event?
Yes, it does work on such OSes. In the advanced or ultimate versions of the menu the point is to leverage a hyperlink trigger inside a li item to make it open its child menu. In simple version you will need to use a workaround and add onmouseover="" to each li item containing a drop down menu in order to trigger and toggle its visibility.

I found the mentioned li items, but don´t know how and where to add the onmouseover thingy...

[funnyfingers]

I would recommend you try to add this design into the source code as you can already switch themes now. It shouldn't be hard at all to properly integrate.

Regarding IOS, that is known. It may require a new menu system according to Nicholas.

[Shteve0]

Very nice one ! I´m currently seeting up OBBLM for our league, but the only customization I did so far is another background and banner. I´d be very interested on how to do more like that !

If you use google chrome as your browser, when looking at your site, you can right click on the body of the pacge and hit "inspect element". Navigate to Sources > stylesheet.css. If you play around in the settings there it's only temporary, so you don't need to worry about screwing it up! Then if you find a combination of settings tweaks that work for you, edit the source stylesheet.css in your core panel and save to replicate the effect.

Hint: you can also inspect element on my site if you want to nick the code directly

One specific question - are you aware that the dropdowm menus don´t work for iOS ? This is mentioned on the homepage of the coder of the menu subroutine (http://www.lwis.net/free-css-drop-down-menu/). There´s also a note how to fix it below, but I haven´t got a clue how to add this to the code... any ideas ?

Does this menu work on iPhone OS or other mobile OS with no mouseover event?
Yes, it does work on such OSes. In the advanced or ultimate versions of the menu the point is to leverage a hyperlink trigger inside a li item to make it open its child menu. In simple version you will need to use a workaround and add onmouseover="" to each li item containing a drop down menu in order to trigger and toggle its visibility.

I found the mentioned li items, but don´t know how and where to add the onmouseover thingy...

Yes, we have a thread open on that. I've not been able to solve it with the advanced and ultimate menus yet, so will try the coding solution this weekend. I've been hesitant to muck around with it too much at once as I'm working on a live site... I don't have a test environment to play with, unfortunately.
http://talkfantasyfootball.org/viewtopi ... 29&t=38329

[Shteve0]

I would recommend you try to add this design into the source code as you can already switch themes now. It shouldn't be hard at all to properly integrate.

Regarding IOS, that is known. It may require a new menu system according to Nicholas.

There's one built for phpBB by the phpBB slovenia gang I've seen. It should be easy enough to patch across.

Incidentally, how do you switch themes now? the lwis.net faq suggests that I should be able to address the iphone dropdown thing with advanced or ultimate menu editions, but the only way I've been able to activate one is by overwriting default menu files.

I'd be very happy to chip in with developing some new skins if we found an easy way to switch them, though! I'm happy enough with the existing one we use, though I'd like to break up the banner and insert it as a handful of repeating columns with a text overwrite before anything got rolled into the source code.

[funnyfingers]

You should see the ability to switch themes in the user profile and I think you configure the default theme in settings.php.

[Daht]

The links to the old forums no longer work, can you post the code/files and instructions?

[Shteve0]

Hi Daht!

Sorry mate, not ignoring you, I'll post some of the fixes up here soon for your consumption.

What link isn't working for you?

[Daht]

http://nzcbbl.forumatic.com/index.php

says the forums have moved.

[Shteve0]

Aha! Gotcha. Thanks

This is the new colour scheme match I've used for our obblm site http://nzbbn.com/index.php?style=2

This has (so far) meant a number of changes.

1) An overhaul of the menu system. I used a tool downloaded for free from http://css3menu.com/. Implementing the changes was harder... it takes a fair bit of messing around in anything that's called ..._htmlout.php in the /lib/ directory. I'll set up a trunk to share the other code changes, since they're a bit tricky.
2) integration of doubleskulls' team creator module, from https://obblm.googlecode.com/svn/branch ... lls/trunk/. You need to create the files listed in /modules/teamcreator/ to the same location on your site, then make some tweaks to the /modules/modsheader.php, root/handler.php and root/settings_modules.php.
3) the easy bit - changing the stylesheet. Here's my sheet, but note that I reference some images that aren't included in the the core obblm (logo.png, bg_header.png and bg_list3.gif). This stylesheet also creates its own banner rather than loading a fixed size image, partly to reduce bandwidth use and partly because I found it hard to get an image the right width for all viewers.

Code: Select all

/*************************
 * General
 *************************/

html {overflow-y: scroll;} /* Keep page alignment uniform. */

a {
color: #f1f354;
}
a:link, a:visited {text-decoration: none;}

a:hover { color:yellow;
text-decoration: underline;
}

body 
{
   
    background-color: #161616;
    font: 12px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

f1 {
	/* Forum name */
	font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #201d0e;
	margin-top: 15px;
	font-weight: bold;
	font-size: 1.7em;
	padding-top: 0px;
	padding-left: 100px;
}

f2 {
	/* Forum header titles */
	font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #201d0e;
	font-size: 1em;
	margin: 0.8em 0 0.2em 0;
	padding-left: 102px;
}

f0 {
	/* Forum header: wait */
	font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: black;
	font-size: 0.3em;
	margin: 0.4em 0 0.1em 0;
	padding-left: 100px;
}

h3 {margin:0} /* Reset browser default margin */

/* Title for sections */
h2
{
    clear: both;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 20px;
    width: inherit;
    font-size: 18px;
    font-weight: bold;
	margin:0 auto;
}

/* Container for rows */
div.row {width: inherit; clear: both; background-color: inherit;}

/* MAIN container */
div.everything {
    width: 84%; 
    margin: auto; 
    background-color: inherit;
    
	border-radius: px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;


} /* Top level container */

/*
 *   The following three containers are the subsequent main containers within "div.everything".
 */

/* 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;
}

/* Menu */
div.menu {
    width: 100%;
    height: auto;
    margin-left: 0px;
}
/* Section code container */
div.section {
    padding-top: 15px;
    width: 100%;
    margin: 0px;
    padding-bottom: 0px; 
    background-color: inherit;
    color: #e1e5c4;
}

/*
 *   Box (inner) stylings.
 */
div.boxCommon,div.boxWide,div.boxCoachPage,div.boxTeamPage,div.boxPlayerPageInfo {
    margin: 0px; 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	
}
div.boxWide             {clear:both;}
div.boxCoachPage        {float: left; width: 270px; margin: 15px; margin-bottom: 0px;}
div.boxTeamPage         {float: left; width: 270px; margin: 15px; margin-bottom: 0px;}
div.boxPlayerPageInfo   {float: left; width: 325px; margin-left: 30px;}

.boxTitle1,.boxTitle2,.boxTitle3,.boxTitle4,.boxTitle5 {
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	
	-moz-border-top-right-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	
	margin-top: 0px;
    background-image: url(../images/bg_list3.gif);
    background-repeat: repeat-x;
    background-color: #262626; 
    padding: 5px;
    color: #e1e5c4;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;}
.boxBody   { background-color: #262626; padding: 5px;
    background-repeat: repeat-x;

    -moz-border-bottom-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	
	-moz-border-bottom-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	margin-bottom:18px;
	
	border-style: solid;
	border-left-width: 6px;
	border-top-width: 0px;
	border-right-width: 6px;
	border-bottom-width: 6px;
	border-color: #262626;

}
table.boxTable {border-spacing: 5px; width: 100%;}

/* Other types of boxes. */
.helpBox {
        color: #e1e5c4;
        border: 2px solid #CC6633;
        background-color: #4C6260;
        padding:10px;
        line-height:1.4em;
}

/* Other types of boxes. */
.errorBox {
        color: #e1e5c4;
        border: 2px solid #000000;
        background-color: #800000;
        padding:10px;
        line-height:1.4em;
}

/*
.assistantBox {
        color: #000000;
        border: 2px solid #3D3D3D;
        background-color: #FFCCFF;
        padding:10px;
        line-height:1.4em;
}
*/

/* 
 *   Tables, TRs and TDs 
 */

/* Used almost everywhere */
table.common  {border: none; width: 100%; background-color: inherit;}
tr.commonhead {background-image: url(../images/bg_list3.gif);
    background-repeat: repeat-x; 
    color: #e1e5c4;
    text-transform: uppercase;
    font-weight: bold;}

/* For the tours list */
table.tours {
    border: none; 
    width: 100%; 
    background-color: inherit; 
    padding-left: 5px;
    padding-right: 5px;
}

/* tour lists: title boxes */
.leagues     {background-image: url(../images/bg_list3.gif);
    background-repeat: repeat-x;
    background-color: #262626;}
.divisions   {    background-image: url(../images/bg_list3.gif);
    background-repeat: repeat-x;
    background-color: #262626;
    height:19px;}
.tours       {background-color: inherit;}
td.round     {background-color: inherit;}
td.match     {background-color: inherit;}
td.seperator {height:15px;}

/* tour lists: node containers */
div.leaguesNCont     {margin-top:15px; margin-left:10px;}
div.divisionsNCont   {margin-top:5px;  margin-left:25px;}
div.toursNCont       {margin-top:0px;  margin-left:10px;}

/* 
 *   Section specific 
 */

/* Main page */
div.main_head       {clear: both; padding-left: 0px; padding-top: 0px; padding-bottom: 5px; font-size: 18px; background-color: inherit;}
div.main_foot       {clear: both; font-size: 11px; padding: 30px; padding-top: 20px; background-color: inherit;}
div.main_rightColumn {float: right; width: 49.5%; background-color: inherit;}
div.main_leftColumn {float: left; width: 49.5%; background-color: inherit;}
    div.main_leftColumn_head     {clear: both; text-align: right; padding-right: 20px; background-color: inherit;} /* Padding should be the same as lcolBox padding. */
        div.main_leftColumn_welcome  {clear: both; padding-left: 20px; padding-top: 3px; padding-bottom: 3px; background-color: inherit; text-align: left;}
        div.main_leftColumn_left  {padding-left: 20px; padding-top: 10px; padding-bottom: 10px; background-color: inherit; text-align: left; float:left;}
        div.main_leftColumn_right {padding-left: 20px; padding-top: 3px;  padding-bottom: 3px;  background-color: inherit; text-align: right; float:right;}

/* 
 *  Other
 */

/* Status bar */
div.messageContainer    {width:100%;padding:6px 0px 6px 0px;color:#fff;font-weight:bold;}
div.green               {clear:both;background-color:#390;border:1px solid #298000;}
div.red                 {clear:both;background-color:#F20000;border:1px solid #c00;}

/* Game result icon*/
.match_icon     {background:transparent url(../images/result_icon.gif) no-repeat 0 0;width:12px;height:12px}
.won            {background-position:-14px 0}
.draw           {background-position:-28px 0}
.lost           {background-position:-42px 0}

4. Is changing the team roster tables to stop the yellow hyperlinks clashing with the while cells. Once that's done, I'll tidy up and post my trunk (oo er) for anyone who wants to cannibalise it.

Hope that helps

S