Archive for May, 2009

12
May
09

Changing colour in Multibox layout

The multibox layout is always the black and white.I came up with an idea to change the colours in multibox layout.so here it goes and it looks good,

in ‘overlay.js’

change,

var Overlay = new Class({

getOptions: function(){
return {
colour: ‘#000’,
opacity: 0.7,
zIndex: 1,
container: document.body,
onClick: Class.empty
};
},

to

var Overlay = new Class({

getOptions: function(){
return {
colour: ‘#fff’,
opacity: 0.7,
zIndex: 1,
container: document.body,
onClick: Class.empty
};
},

This will change the overlay half opaque background colour from black to white.

For multibox container colour change,

Change the border colour to any colour you wish.

Here I used #6F6868,

.MultiBoxContainer {
border: 20px solid #6F6868;
}

Also change,

.MultiBoxControls {
background-color: #6F6868;
}

this will give your website a unique new look,

Multibox image layout

Advertisements
11
May
09

Extra space at the bottom

When I was using multibox for a website I faced a problem of having an extra space at the bottom of the page.I went for some google search,but I could not find a solution.So I decided to jump into action.Then I altered some code.

In ‘overlay.js’

the line,
var h = window.getScrollHeight()+’px’;

is changed to
var h = window.getScrollHeight()-10000+’px’;

this reduced the extra bottom space completely.but the background is completely lost.

so I made some changes in the other coding,

Here is the perfect solution,

in ‘overlay.js’ dont change,
var h = window.getScrollHeight()+’px’;

in ‘multibox.css’,

replace the code in it by,

/**************************************************************

MultiBox
v1.3

**************************************************************/

.MultiBoxContainer {
position: absolute;
border: 20px solid #000;
background-color: #FFF;
display: none;
z-index: 2;
text-align: left;
overflow: hidden;

}

.multiBoxDesc{display : none;}

.MultiBoxLoading {
background: url(../_images/loader.gif) no-repeat center;
}

.MultiBoxContent {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.MultiBoxClose {
position: absolute;
top: 0px;
right: 0px;
background: url(../_images/close.png) no-repeat;
width: 24px;
height: 24px;
cursor: pointer;

}

.MultiBoxControlsContainer {
overflow: hidden;
height: 0px;
position: relative;
}

.MultiBoxControls {
width: 100%;
height: auto;
position: relative;
background-color: #000000;
}

.MultiBoxPrevious {
position: absolute;
background: url(../_images/left.png) no-repeat;
width: 24px;
height: 24px;
left: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNext {
position: absolute;
background: url(../_images/right.png) no-repeat;
width: 24px;
height: 24px;
right: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNextDisabled {
cursor: default;
background: url(../_images/rightDisabled.png) no-repeat;
}

.MultiBoxPreviousDisabled {
cursor: default;
background: url(../_images/leftDisabled.png) no-repeat;
}

.MultiBoxTitle {
position: relative;
margin: 10px 0 0 35px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
text-align: left;
}

.MultiBoxNumber {
position: relative;
width: 50px;
margin: 10px 35px 0 0;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: right;
}

.MultiBoxDescription {
clear: left;
position: relative;
margin: 0 35px 0 35px;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: left;
}

.mb img{float : left;}

/*************************************************************/

/* IE6 FIX IN MULTIBOX */
.MultiBoxClose, .MultiBoxPrevious, .MultiBoxNext, .MultiBoxNextDisabled, .MultiBoxPreviousDisabled {
behavior: url(iepngfix.htc);
}

This will solve the problem.