OBBLM custom redesign
Moderator: TFF Mods
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
OBBLM custom redesign
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.
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.
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
-
- Rookie
- Posts: 12
- Joined: Sat Mar 23, 2013 6:41 pm
Re: OBBLM custom redesign
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 :/
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 :/
Reason: ''
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
Re: OBBLM custom redesign
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!
What's your site link? Would love to see how you've used the code!
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
-
- Rookie
- Posts: 12
- Joined: Sat Mar 23, 2013 6:41 pm
Re: OBBLM custom redesign
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
Reason: ''
-
- Emerging Star
- Posts: 418
- Joined: Tue Jul 14, 2009 8:41 pm
- Contact:
Re: OBBLM custom redesign
I'm stealing it.
Reason: ''
Webhosting with the latest version of OBBLM installed: OBBLM Web Hosting (be sure to choose the OBBLM tab)
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
Re: OBBLM custom redesign
You're very welcome to it, Will. Glad you like it
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
-
- Experienced
- Posts: 150
- Joined: Mon Jan 30, 2012 8:19 am
Re: OBBLM custom redesign
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 ?
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 ?
I found the mentioned li items, but don´t know how and where to add the onmouseover thingy...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.
Reason: ''
-
- Emerging Star
- Posts: 418
- Joined: Tue Jul 14, 2009 8:41 pm
- Contact:
Re: OBBLM custom redesign
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.
Regarding IOS, that is known. It may require a new menu system according to Nicholas.
Reason: ''
Webhosting with the latest version of OBBLM installed: OBBLM Web Hosting (be sure to choose the OBBLM tab)
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
Re: OBBLM custom redesign
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.Hegel wrote: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 !
Hint: you can also inspect element on my site if you want to nick the code directly
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.Hegel wrote: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 ?I found the mentioned li items, but don´t know how and where to add the onmouseover thingy...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.
http://talkfantasyfootball.org/viewtopi ... 29&t=38329
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
Re: OBBLM custom redesign
There's one built for phpBB by the phpBB slovenia gang I've seen. It should be easy enough to patch across.funnyfingers wrote: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.
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.
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
-
- Emerging Star
- Posts: 418
- Joined: Tue Jul 14, 2009 8:41 pm
- Contact:
Re: OBBLM custom redesign
You should see the ability to switch themes in the user profile and I think you configure the default theme in settings.php.
Reason: ''
Webhosting with the latest version of OBBLM installed: OBBLM Web Hosting (be sure to choose the OBBLM tab)
- Daht
- Emerging Star
- Posts: 353
- Joined: Fri Nov 05, 2010 3:31 am
- Location: Las Vegas
Re: OBBLM custom redesign
The links to the old forums no longer work, can you post the code/files and instructions?
Reason: ''
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
OBBLM custom redesign
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?
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?
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co
- Daht
- Emerging Star
- Posts: 353
- Joined: Fri Nov 05, 2010 3:31 am
- Location: Las Vegas
Re: OBBLM custom redesign
Reason: ''
- Shteve0
- Legend
- Posts: 2479
- Joined: Thu May 07, 2009 10:15 am
- Location: Wellington, New Zealand
Re: OBBLM custom redesign
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.
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
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}
Hope that helps
S
Reason: ''
League and tournament hosting, blogging and individual forums - all totally free. For the most immersive tabletop sports community experience around, check out theendzone.co