Live Members Only

Posted: **Fri Dec 19, 2014 8:09 pm**

here's how to get the sidebar to collapse horizontally... this is without cookies

open template/overall_header.html
find

Code: Select all

                        </ul>
                    </div>
                    <div class="cb"></div>
                	<span class="nav-corners-bottom"><span></span></span>

before-add

Code: Select all

<li class="fr"><input type="button" data-name="show" value="Toggle" id="toggle"></li>

open template/overall_footer.html
find

Code: Select all

                    <!-- ENDIF -->
                        </div><!-- /.sidebarwrapper -->
						
                <!-- ENDIF -->

after-add

Code: Select all

<script type="text/javascript">
		$(document).ready(function () {
		    $("#toggle").click(function () {
		        if ($(this).data('name') == 'show') {
		            $(".fluidfixed-sidebar").animate({
		                width: '0%'
		            }).hide()
		            $(".fluidfixed-content").animate({
		                width: '100%'
		            });
		            $(this).data('name', 'hide')
		        } else {
		            $(".fluidfixed-sidebar").animate({
		                width: '19%'
		            }).show()
		            $(".fluidfixed-content").animate({
		                width: '80%'
		            });
		            $(this).data('name', 'show')
		        }
		    });
		});
</script>

open theme/se_gamer.css
find

Code: Select all

.sidebarwrapper {
	position: relative;

after-add

Code: Select all

	background-color: #181818;

find

Code: Select all

/* left sidebar, right section */
.fixedfluid-content {
	padding: 0 0 0 170px;
	background: white;

replace with

Code: Select all

/* left sidebar, right section */
.fixedfluid-content {
	padding: 0 0 0 170px;
	background: #181818;

find

Code: Select all

/* right sidebar, left section */
.fluidfixed-content {
	padding-right: 270px;
	background: white;

replace with

Code: Select all

/* right sidebar, left section */
.fluidfixed-content {
	background: #181818;
	width: 80%;

find

Code: Select all

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
	position: absolute;
	right: 0;
	top: 0;
	width: 260px;

replace with

Code: Select all

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
	position: absolute;
	right: 0;
	top: 0;
	width: 19%;

open theme/colours.css
find

Code: Select all

	background: url("{T_THEME_PATH}/images/bg.jpg") repeat left top #f9f9f9;

replace with

Code: Select all

	background: url("{T_THEME_PATH}/images/bg.jpg") repeat left top #181818;

save and upload files. refresh your templates and theme in the ACP

now, some of these changes are to fix the white background in the style when you enable the sidebar... those are flaws in the style itself that i had to fix before even starting to add the collapse for the sidebar. this code is of course use at your own risk but if you have any questions, feel free to post them here

i'm also including the entire modified style to which the style designer Christian Bullock created

SE_Gamer_Dark_modified_sidebar.zip

Posted: **Fri Dec 19, 2014 11:52 pm**

Did a few minor changes,
But I have to thank you ,it works nicely.
Can't wait for cookie to remember collapsed on refresh

Live Members Only

SE Gamer Dark sidebar horizontal collapse...

SE Gamer Dark sidebar horizontal collapse...

Re: SE Gamer Dark sidebar horizontal collapse...