Page 1 of 8

Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 5:59 am
by Theonardo
So my site used to look like this:

Image

After 3.1 it looks like this:

Image

I can't run the same sidebar mods I was using before as they were designed for 3.0.x, so I'm back to figuring out how to make my 3.1 look like my 3.0. I'm concluding that I need to (1) extend the width of prosilver and (2) add flanking sidebars, one of which has to display latest posts.

If anyone can suggest how to do one or both of these things, I'd really appreciate it.

Re: Extending the width of prosilver

Posted: Sat May 23, 2015 7:11 am
by Theonardo
Thanks for approving my post, but why was this moved to the 3.0 forum?

Re: Extending the width of prosilver

Posted: Sat May 23, 2015 7:22 am
by Arty
Theonardo wrote:Thanks for approving my post, but why was this moved to the 3.0 forum?
It wasn't. You made multiple posts and this is first one I noticed and approved. Didn't notice it was in 3.0 forum. I'll move it.

Re: Extending the width of prosilver

Posted: Sat May 23, 2015 7:43 am
by Theonardo
Thanks, Arty.

Do you by chance know of a decent phpbb 3.1 sidebar? I found a couple, but they look a little sketchy or have been abandoned. Thanks!

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 7:51 am
by Theonardo
Sorry to change the name of this message thread, but I think sidebars is more the issue I'm dealing with. I'm just a little confused why phpbb doesn't have some feature to toggle sidebars. It seems like a pretty common thing that people want on their sites.

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 8:08 am
by david63
Have you tried using the search facility? There are over 30 results for sidebars in 3.1

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 8:16 am
by Theonardo
Did you click through to any of those results? Most are unresolved threads created by confused people like me.

The only thing I've found that looks like it could work is the German sidebar option - http://reyno41.bplaced.net/phpbb/viewtopic.php?f=8&t=19

But this guy seems to be having trouble getting it to work: viewtopic.php?f=481&t=2288661&p=1389583 ... #p13895836

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 8:34 am
by Theonardo
This is the sort of thing I used in 3.0 (excellent): https://www.phpbb.com/support/docs/en/3 ... silver-se/

I just can't seem to track down a 3.1 equivalent. I'm wondering if there is even one yet?

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 10:20 am
by Arty
How to add 1 sidebar:

Basic sidebar code would be like this: in overall_header.html find

Code: Select all

<div id="page-body" role="main">
add after it

Code: Select all

<div class="page-body-inner">
then in overall_footer.html find

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>
add after it

Code: Select all

</div>
<div class="sidebar"> sidebar code </div>
That will add additional wrapper for content block and div for sidebar. Next you need to add css for it like this:

Code: Select all

#page-body { float: left; width: 100%; margin-right: -260px; }
.page-body-inner { margin-right: 260px; }
.sidebar { float: right; width: 250px; }
#page-footer { clear: both; }
Next step is to make it responsive for mobile devices:

Code: Select all

@media (max-width: 1000px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar { margin: 0 auto; clear: both; float: none; }
}
Margin for content is 260px because it is width of right sidebar + 10px for spacing between content and sidebar.

How to add 2 sidebars:

Changes are similar to code above, but left sidebar must be placed before content.
In overall_header.html find

Code: Select all

<div id="page-body" role="main">
add replace with

Code: Select all

<div class="sidebar-left"> Left sidebar code </div>
<div id="page-body" role="main">
<div class="page-body-inner">
then in overall_footer.html find

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>
add after it

Code: Select all

</div>
<div class="sidebar-right"> Right sidebar code </div>
That will add additional wrapper for content block and 2 divs for sidebars. Next you need to add css for it like this:

Code: Select all

#page-body { float: left; width: 100%; margin-right: -520px; }
.page-body-inner { margin-right: 520px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 250px; margin-right: 10px; }
.sidebar-right { float: right; width: 250px; }
#page-footer { clear: both; }
Next step is to make it responsive for mobile devices:

Code: Select all

@media (max-width: 1200px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar-left { display: none; }
  .sidebar-right { float: none; margin: 0 auto; }
  .sidebar-left, .sidebar-right, .sidebar-left + #page-body { clear: both; }
}
Margin for content is 520px because it is width of right sidebar + 10px for spacing between content and right sidebar + width and right margin of left sidebar.

Left sidebar must be hidden on mobile devices.

Adjust units in that code as needed.

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 11:36 am
by Theonardo
Thank you, Arty! I'm giving this a whirl now. Will let you know how it goes!

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 11:50 am
by Theonardo
Arty, CSS edits to be done in common.css, right?

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 12:07 pm
by Arty
Doesn't matter, but common.css is the most logical choice.

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 12:21 pm
by Theonardo
I made the changes, but it looks as though the common.css is being executed and the overall_header and overall_footer.html are not (the site is anhuiexpat.com). Do I need to tweak something in the ACP? The ACP tells me that prosilver is installed and activated (it's the only style I have installed on the site).

Any advice appreciated. Thanks!

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 12:31 pm
by Theonardo
I've been editing the "overall_header.html" and "overall_footer.html" in /style/prosilver, but I see these files are also in /adm/style. Should I be editing these files instead?

Re: Sidebars for 3.1 - I want answers! :D

Posted: Sat May 23, 2015 12:56 pm
by pit-PL
Purge the cache from the admin panel main page.