How to add both left and right sidebars in a phpBB 3.3.14 based website?

[admin]

I am evaluating phpBB 3.3.14 and a few other open-source forum software. Wondering how to add both left and right sidebars to support Google AdSense?

I noticed there is an extension "phpBB 3.2 / 3.3 Sidebar Extension - Responsive" (https://codecanyon.net/item/phpbb-sideb ... e/21454084). Has anyone used it in phpBB 3.3.14? The demo link provided there is not working.

I am trying to use a website for people to refer contractors (plumbers, landscapers, etc.) and share their experience. Will a forum site serve the purpose?

[admin]

There is an old post on this topic:

https://www.phpbb.com/community/viewtop ... #p14085556

I followed through the instructions there, the site now looks like:

Test - Capture3.JPG (162.03 KiB) Viewed 2345 times

The sidebars are taking space from the content area. How to move the sidebars to the outer area (in gray color marked by the arrows), and have the Google AdSense ads sticky (staying there as the page scrolls up/down)?

The below layout looks more user-friendly.

phpBB_MITBBS_Capture.JPG (206.57 KiB) Viewed 2345 times

[JohnZhao]

I made it full screen to get the space for the sidebars.

In common.css, commented out line 144:

Code: Select all

	/* max-width: 1152px; */

At the bottom, added:

Code: Select all

.sidebar-wrapper {display: flex; gap: 10px; align-items: start; margin-inline: auto; --sidebar-width: 150px; max-width: calc(1152px + (var(--sidebar-width)* 2));}
.sidebar-left {width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: 0;}
.sidebar-right {width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: 0;}

#page-body { float: left; width: 100%; margin-right: -340px; }
.page-body-inner { margin-right: 340px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 160px; margin-right: 10px; }
.sidebar-right { float: right; width: 160px; }
#page-footer { clear: both; }

@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; }
}

In overall_header.html,

Code: Select all

<div class="sidebar-left">.../div>

is added after this line

Code: Select all

	<a id="start_here" class="anchor"></a>

In overall_footer.html,

Code: Select all

<div class="sidebar-right">.../div>

is added before this line

Code: Select all

<!-- EVENT overall_footer_page_body_after -->

The layout is working as expected.

More information can be found at: https://www.phpbb.com/community/viewtop ... #p16049278