Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Making Sidebar with CSS (No plugin Or JQuery)
#1
Heart 
Make Sidebar with just CSS codes No need JQuery Or Any Plugin.
First of all you can see movie of my finished work and after that if you want this work for yourself , you must go to :
Index Page Templates --> Index
and replace all that section codes with below codes
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
<style type="text/css">
/* animated spoiler CSS by Ali Movassagh */
.spoilerbutton {display:block;margin:-22px -22px -28px 0;background:#EBEBEB;border:2px solid #F8A613;padding:3px;text-align:center;font-weight:bold;font-style:italic;font-size:12px;font-family:Tahoma;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.spoiler {overflow:hidden;background: #;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value=">"] + .spoiler > div {margin-right:-25%;}
.spoilerbutton[value="<"] + .spoiler {padding:0px;}
</style>
{$header}
<input class ="spoilerbutton" type="button" value=">" onclick="this.value=this.value=='>'?'<':'>';">
<div class ="spoiler"><div>
<div style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
        Title Here
</td></tr>
<tr><td class ="trow2">
        Text Here
</td></tr>
</table>
&nbsp;
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
        Title Here
</td></tr><tr><td class ="trow2">
        Text Here
</td></tr>
</table>&nbsp;
</div>
<div style="float: left;width: 80%;">
{$forums}
</div>
</div></div>{$boardstats}
<dl class ="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>
	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>
	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

Or in other way , find {$forums} in that section and replace that code with below codes

<style type="text/css">
/* animated spoiler CSS by Ali Movassagh */
.spoilerbutton {display:block;margin:-22px -22px -28px 0;background:#EBEBEB;border:2px solid #F8A613;padding:3px;text-align:center;font-weight:bold;font-style:italic;font-size:12px;font-family:Tahoma;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.spoiler {overflow:hidden;background: #;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value=">"] + .spoiler > div {margin-right:-25%;}
.spoilerbutton[value="<"] + .spoiler {padding:0px;}
</style>
<input class ="spoilerbutton" type="button" value=">" onclick="this.value=this.value=='>'?'<':'>';">
<div class ="spoiler"><div>
<div style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
        Title Here
</td></tr>
<tr><td class ="trow2">
        Text Here
</td></tr>
</table>
&nbsp;
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td>
        Title Here
</td></tr><tr><td class ="trow2">
        Text Here
</td></tr>
</table>&nbsp;
</div>
<div style="float: left;width: 80%;">
{$forums}
</div>
</div></div>


.zip   Video_2014-05-18_212322.zip (Size: 230.94 KB / Downloads: 172)
Reply
#2
Very nice
[Image: quotationspage-banner.jpg]
Reply
#3
Nice tut... BUT

If you refresh the site, sidebars dissapears Wink.
I don't give support on PM.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)