SE Gamer Dark sidebar horizontal collapse...

Adjustments to existing phpBB3 styles
User avatar
spaceace
Site Owner
Site Owner
Posts: 918
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

SE Gamer Dark sidebar horizontal collapse...

Post by spaceace » 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
You do not have the required permissions to view the files attached to this post.

if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
clight77
Donor
Donor
Posts: 26
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: SE Gamer Dark sidebar horizontal collapse...

Post by clight77 » 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 :)

Who is online

Users browsing this forum: CommonCrawl [Bot] and 0 guests