I noticed on RateU's demo site the index is rather customized. May I ask if that was done with XThreads or is it just another theme? If it was XThreads, could someone show me how to do that please?
(12-28-2010 09:05 AM)MasterZuFu Wrote: I noticed on RateU's demo site the index is rather customized. May I ask if that was done with XThreads or is it just another theme? If it was XThreads, could someone show me how to do that please?
Also want to know how to make Gallery as homepage.
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.
That's actually exactly what I'm looking for. i don't have all those plugins in though, should I install those first? Also, one last problem...I have a side bar from mybbcentral.com that's widely used. I don't want the forum to look "too" bunched up. Is it possible to collapse the 'accordion' so that it takes the words out and replaces them with an image that's small but can be recognized as the image for that particular section? This way the side boxes and the forums aren't so crammed up.
I think there are many other accordion out there. Because I don't have any concept for the layout of the demo site, so, I just picked the random one, and put it in the demo site. It is for temporary (I hope). Maybe I will change the layout latter (I hope again).
yes RateU - thats a good accordion too, this is why I used a NON jQuery accordion (the one I grabbed as an example was javascript and a VERY small file size) so we would not have to worry about jQuery conflicting.
My point was to show that making an index page like yours is a case of looking at a page and seeing what is there and then applying the plugins mods etc. Some people find a two column layout hard to do, so I showed a two column layout. I'm NOT going to dissect your index page and rebuild it and publish it.....that seems a rather rude thing to do.
Search
Member List
Calendar
Help
![[Image: leelink.gif]](http://www.leefish.nl/mybb/images/leelink.gif)
![[Image: pompomgirl.gif]](http://smileys.smilchat.net/smileys/sport2/pompomgirl.gif)