these changes are to get the right side sidebar changed only. more work and edits will have to be done for the left sidebar
template/overall_footer.html
[install]Find This may be a partial find and not the whole line Code: Select all
[/install] <!-- ENDIF -->
</div><!-- /.sidebarwrapper -->
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
Code: Select all
[/install] <a href="#" id="separator"></a>
<div class="clearer"> </div>
</div>
[install]Find This may be a partial find and not the whole line
Code: Select all
[/install] <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
</div>
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
Code: Select all
[/install]<script type="text/javascript">
// <![CDATA[
var jq = $.noConflict();
jq(document).ready(function(){
// Variables
var objMain = jq('#main');
// Show sidebar
function showSidebar(){
objMain.addClass('use-sidebar');
jq.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 });
}
// Hide sidebar
function hideSidebar(){
objMain.removeClass('use-sidebar');
jq.cookie('sidebar-pref2', null, { expires: 30 });
}
// Sidebar separator
var objSeparator = jq('#separator');
objSeparator.click(function(e){
e.preventDefault();
if ( objMain.hasClass('use-sidebar') ){
hideSidebar();
}
else {
showSidebar();
}
}).css('height', objSeparator.parent().outerHeight() + 'px');
// Load preference
if ( jq.cookie('sidebar-pref2') == null ){
objMain.removeClass('use-sidebar');
}
});
// ]]>
</script>
template/overall_header.html
[install]Find This may be a partial find and not the whole line Code: Select all
[/install] <div class="sidebarwrapper">
<!-- IF $SIDEBARS == 'left' -->
<div class="fixedfluid-sidebar">
<!-- INCLUDE sidebar_left.html -->
</div>
<div class="fixedfluid-content">
<!-- ELSEIF $SIDEBARS == 'right' -->
<div class="fluidfixed-sidebar">
<!-- INCLUDE sidebar_right.html -->
</div>
<div class="fluidfixed-content">
[install]Replace with Replace the preceding lines with the following
Code: Select all
[/install]<div class="use-sidebar sidebar-at-right" id="main">
<div class="sidebarwrapper">
<!-- IF $SIDEBARS == 'left' -->
<div class="fixedfluid-sidebar">
<!-- INCLUDE sidebar_left.html -->
</div>
<div class="fixedfluid-content">
<!-- ELSEIF $SIDEBARS == 'right' -->
<div id="sidebar">
<!-- INCLUDE sidebar_right.html -->
</div>
<div id="content">
<div class="fluidfixed-content">
theme/colours.css
[install]Find This may be a partial find and not the whole line Code: Select all
[/install] background: url("{T_THEME_PATH}/images/bg.jpg") repeat left top #f9f9f9;
[install]Replace with Replace the preceding lines with the following
Code: Select all
[/install] background: url("{T_THEME_PATH}/images/bg.jpg") repeat left top #181818;
theme/se_gamer.css
[install]Find This may be a partial find and not the whole line Code: Select all
[/install].sidebarwrapper {
position: relative;
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
Code: Select all
[/install] background-color: #181818;
[install]Find This may be a partial find and not the whole line
Code: Select all
[/install] background: white;
[install]Replace with Replace the preceding lines with the following
Code: Select all
[/install] background: #181818;
[install]Find This may be a partial find and not the whole line
Code: Select all
[/install] padding-right: 270px;
background: white;
[install]Replace with Replace the preceding lines with the following
Code: Select all
[/install] background: #181818;
width: 100%;
[install]Find This may be a partial find and not the whole line
Code: Select all
[/install] width: 260px;
[install]Replace with Replace the preceding lines with the following
Code: Select all
[/install] width: 19%;
[install]Find This may be a partial find and not the whole line
Code: Select all
[/install].navbar i {
color: #df4910;
}
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
Code: Select all
[/install]#content,#sidebar {
}
#sidebar {
display: none;
}
#content {
width: 98%;
}
.use-sidebar #content {
width: 79%;
}
.use-sidebar #sidebar {
display: block;
width: 32%;
}
.sidebar-at-left #sidebar {}
.sidebar-at-right #sidebar {width: 19%;}
.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {
float: right;
}
.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {
float: left;
}
#separator {
border: 1px solid #CCC;
display: block;
outline: none;
width: 10px;
margin: 0 9px;
}
.use-sidebar #separator {
border-color: #FFF;
}
#separator:hover {
border-color: #ABC;
}
.clearer {
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
}
upload this file to the folder theme/images if you don't already have a file modified for the blocks, do the following...
template/sidebar_right.html
[install]Replace with Replace the entire contents with this Code: Select all
[/install]<div class="forabg">
<div class="forumlist">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="" style="position:relative">
<ul style="list-style-type: none;">
<li class="header">
<dl class="icon">
<dt>Block 1</dt>
</dl>
</ul>
</ul>
<ul class="topiclist" style="display:block">
<div class="trigger active"></div>
<div class="collapsethis">
<li class="bg1">Row 1</li>
<li class="bg2">Row 2</li>
<li class="bg1">Row 3</li>
<li class="bg2">Row 4</li>
<li class="bg1">Row 5</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<div class="forabg">
<div class="forumlist">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="" style="position:relative">
<ul style="list-style-type: none;">
<li class="header">
<dl class="icon">
<dt>Block 2</dt>
</dl>
</ul>
</ul>
<ul class="topiclist" style="display:block">
<div class="trigger active"></div>
<div class="collapsethis">
<li class="bg1">Row 1</li>
<li class="bg2">Row 2</li>
<li class="bg1">Row 3</li>
<li class="bg2">Row 4</li>
<li class="bg1">Row 5</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<div class="forabg">
<div class="forumlist">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="" style="position:relative">
<ul style="list-style-type: none;">
<li class="header">
<dl class="icon">
<dt>Block 3</dt>
</dl>
</ul>
</ul>
<ul class="topiclist" style="display:block">
<div class="trigger active"></div>
<div class="collapsethis">
<li class="bg1">Row 1</li>
<li class="bg2">Row 2</li>
<li class="bg1">Row 3</li>
<li class="bg2">Row 4</li>
<li class="bg1">Row 5</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<div class="forabg">
<div class="forumlist">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="" style="position:relative">
<ul style="list-style-type: none;">
<li class="header">
<dl class="icon">
<dt>Block 4</dt>
</dl>
</ul>
</ul>
<ul class="topiclist" style="display:block">
<div class="trigger active"></div>
<div class="collapsethis">
<li class="bg1">Row 1</li>
<li class="bg2">Row 2</li>
<li class="bg1">Row 3</li>
<li class="bg2">Row 4</li>
<li class="bg1">Row 5</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
as always, use at your own risk. any comments or questions, please post them here