SE Gamer Dark sidebar horizontal collapse with cookies...
Posted: Sun Dec 21, 2014 8:05 pm
base style is Christian Bullock's Se Gamer Dark...
these changes are to get the right side sidebar changed only. more work and edits will have to be done for the left sidebar
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
[install]Find This may be a partial find and not the whole line
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
[install]Replace with Replace the preceding lines with the following
[install]Replace with Replace the preceding lines with the following
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
[install]Find This may be a partial find and not the whole line
[install]Replace with Replace the preceding lines with the following
[install]Find This may be a partial find and not the whole line
[install]Replace with Replace the preceding lines with the following
[install]Find This may be a partial find and not the whole line
[install]Replace with Replace the preceding lines with the following
[install]Find This may be a partial find and not the whole line
[install]Add after Add these lines on a new blank line after the preceding line(s) to find
upload this file to the folder theme/images if you don't already have a file modified for the blocks, do the following...
as always, use at your own risk. any comments or questions, please post them here
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