Sidebars for 3.1 - I want answers! :D

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Anti-Spam Guide
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Can't believe I forgot to do that. One sec...
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Thanks for that suggestion. Seems to have fixed the side of the forum hanging off the screen, but no sign of sidebars yet. Hmmm....

Thank you for the suggestion all the same. I'll keep purging as I tweak to ensure that's not the issue.
User avatar
pit-PL
Registered User
Posts: 3096
Joined: Sat Nov 21, 2009 12:24 pm

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

Post by pit-PL »

but no sign of sidebars yet
Take a look above the bottom navbar.
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

pit-PL wrote:
but no sign of sidebars yet
Take a look above the bottom navbar.
Ah ok! Thanks. So I know overall_header.html and overall_footer.html are being read. Now just to position this sidebar correctly...
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

So if anyone is following along and wanting to create sidebars for their own site, here's an update shot after following the instructions earlier in this thread (I've replaced the "sidebar" text in overall_footer with a Leonardo headshot):

Image

Just need to figure out now how to get this sidebar into a more sidebar-like location.
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

I found this, which I've used before and it works (scroll into comments to see how to create two sidebars): http://ramui.com/phpbb/add-sidebar-in-p ... plate.html

The problem is with phpbb 3.1, the above edit causes the mobile version to display incorrectly (the sidebars display fine, but the center forum area is completely squashed). Does anyone know how to fix this?

I'm going to share the code found at that link. Deep respect to the original author, Ramui!

So for two sidebars on your phpbb forum, do this:

In overall_header.html, add the following style code between <head> and </head> tags:

Code: Select all

<style>
<!--
table#mainbody{ width:100%; }
#mainbody td{vertical-align:top;}
td#left_sidebar{width:160px;}
td#right_sidebar{width:160px;}
//Add style for your sidebar code.
-->
</style>
Scroll to the bottom of the same file and add:

Code: Select all

<table id="mainbody"><tr><td id="left_sidebar">
<!-- Your sidebar html code here-->
</td><td id="forum_body">
In overall_footer.html, add the following above <div id="page-footer" role="contentinfo"> at the top of the file:

Code: Select all

</td><td id="right_sidebar">
//Your right sidebar code here.
</td>
</tr></table>
This will give you two working sidebars (I used this method with success for years in 3.0.x). As I was mentioning, the problem with 3.1 is the above tweak now causes the mobile version of the forum to crap out.

EDIT: I'll just add that you might want to go to common.css and remove the "max-width" entry under "#wrap" to stretch the forum out a bit and make it a bit easier to view everything that is going on after the sidebars are up and running.
Last edited by Theonardo on Sat May 23, 2015 2:54 pm, edited 2 times in total.
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 »

You shouldn't use that code. Its bad because it doesn't scale. On mobile devices it won't work at all.

Code I posted works fine. If it doesn't, you probably made errors implementing it. Its impossible to tell what went wrong by screenshots.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Arty wrote:You shouldn't use that code. Its bad because it doesn't scale. On mobile devices it won't work at all.

Code I posted works fine. If it doesn't, you probably made errors implementing it. Its impossible to tell what went wrong by screenshots.
Thanks, Arty. But in 3.0.X it worked fine on mobile devices. It just displayed as a website, not necessarily one with a full on mobile version. Isn't there some tweak I could implement to avoid the forum squashing itself when viewed on a mobile device?
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Arty wrote:You shouldn't use that code. Its bad because it doesn't scale. On mobile devices it won't work at all.

Code I posted works fine. If it doesn't, you probably made errors implementing it. Its impossible to tell what went wrong by screenshots.
Arty, do you have an example site with your sidebar code in play?

Thank you for all of your help.
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 »

No, it didn't. In 3.0 whole forum was scaled down on mobile devices as if you were browsing it on desktop.

In 3.1 style is responsive, which means it automatically adapts for device. Which is correct way to do it. Code you linked to should never be used in modern web. Using tables for layout is thing of past.
Theonardo wrote:Isn't there some tweak I could implement to avoid the forum squashing itself when viewed on a mobile device?
Sure, you can completely get rid of responsive layout. However any designer will advice you against that. It would make style unusable on mobile devices, which is not acceptable in modern web. Your forum will go back to stone age.

Simply implement code as I posted above and you won't need to. If something doesn't work, post link to your forum where you've applied modifications. Posting screenshots won't help because screenshots don't allow inspecting code.
Theonardo wrote:Arty, do you have an example site with your sidebar code in play?
Sure, I'm using it on my forum: http://www.artodia.com/forums/
That implementation is a more complex though with buttons to toggle sidebar and there is only one sidebar.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Thanks, Arty. I'll give it another shot.
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Just for the sake of documentation, here is what the code snippet I posted above produces on desktop:

Image

I'm trying to upload a mobile screenshot, but having some trouble. Looks just like the desktop screenshot except the forum is only about as thick as one of the sidebars. Completely squashed.
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

OK, going to retry Arty's...
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

So here is his suggestion for single sidebar (looks awesome, thanks Arty):

Image

The sidebar doesn't show up when the site is viewed on a mobile. This is to be expected? Perhaps it's not showing because there's nothing in it yet?
User avatar
Theonardo
Registered User
Posts: 129
Joined: Sat May 23, 2015 5:37 am

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

Post by Theonardo »

Wait a minute, the "sidebar code" text is appearing down here...

Image
Locked

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