I can help you put pictures FROM your gallery on your home page - its like the one I have on the portal of leefish.
Regarding customising the look of the index - like I said elsewhere - wireframe it - then you can make the static html.
From there, take a look at the SOURCE code of your normal index - if you have template start end comments on then you will see where each template starts and ends. Then you take the static, put it in the templates - add the variables and you have your page.
Looking at RateU's index, its a simple two column layout with some nicely styled plugins. See the pic. I can help you with the accordion - I use something similar on leefish - the rest is plugins from here AFAIK.
So the first thing we want is a simple two column layout - we actually get this in the PORTAL template from mybb
Its not very different from the index. the key thing is that the left column is fixed width at 200 px. Set that 200px to 50% and see what you get - a perfect two column layout
<html>
<head>
<script type="text/javascript">
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
</script>
<style type="text/css">
#accordion {width:100%; margin-top: -5px}
.accordion {width:100%; font:12px Verdana,Arial; color:#033}
.accordion dt {width:95%; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.accordion dt:hover {background:url(images/header_over.gif)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:75%; border:2px solid #9ac1c9; border-top:none; padding:10px}
</style>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr><td valign="top" width="40%">
{$welcome}
{$pms}
{$search}
{$stats}
{$whosonline}
{$latestthreads}
</td>
<td> </td>
<td valign="top">
<div id="accordion">
<dl class="accordion" id="slider">
<dt>About</dt>
<dd>
<span>This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.</span>
</dd>
<dt>Instructions</dt>
<dd>
<span>Found on the web by LeeFish. We can use it in our forums :)
</span>
</dd>
<dt>Licensing & Support</dt>
<dd>
<span>This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. </span>
</dd>
</dl>
</div>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
</script>
{$announcements}
</td>
</tr>
</table>
{$footer}
</body>
</html>
Thats just rough and ready to test - but you see that I have hard-coded the javascript and the css in the page (in the head) - really it should be an external file and referred to in the header include or just the head of the index - if we only want to use it on that page.
If this is the thing you are looking for then let me know and I will package it up for you.
Search
Member List
Calendar
Help
![[Image: leelink.gif]](http://www.leefish.nl/mybb/images/leelink.gif)
