Sidebars for 3.1 - I want answers! :D

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Ideas Centre
Locked
User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

Sidebars for 3.1 - I want answers! :D

Post by Theonardo » Sat May 23, 2015 5:59 am

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.
Last edited by Theonardo on Sat May 23, 2015 7:50 am, edited 1 time in total.

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

Re: Extending the width of prosilver

Post by Theonardo » Sat May 23, 2015 7:11 am

Thanks for approving my post, but why was this moved to the 3.0 forum?

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Extending the width of prosilver

Post by Arty » Sat May 23, 2015 7:22 am

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.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

Re: Extending the width of prosilver

Post by Theonardo » Sat May 23, 2015 7:43 am

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!

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 7:51 am

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.

User avatar
david63
Registered User
Posts: 16412
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

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

Post by david63 » Sat May 23, 2015 8:08 am

Have you tried using the search facility? There are over 30 results for sidebars in 3.1
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 8:16 am

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

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 8:34 am

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?

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

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

Post by Arty » Sat May 23, 2015 10:20 am

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.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 11:36 am

Thank you, Arty! I'm giving this a whirl now. Will let you know how it goes!

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 11:50 am

Arty, CSS edits to be done in common.css, right?

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

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

Post by Arty » Sat May 23, 2015 12:07 pm

Doesn't matter, but common.css is the most logical choice.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 12:21 pm

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!

User avatar
Theonardo
Registered User
Posts: 125
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo » Sat May 23, 2015 12:31 pm

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?

User avatar
pit-PL
Registered User
Posts: 3085
Joined: Sat Nov 21, 2009 12:24 pm

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

Post by pit-PL » Sat May 23, 2015 12:56 pm

Purge the cache from the admin panel main page.

Locked

Return to “[3.1.x] Styles Support & Discussion”