How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
Mannix_
Registered User
Posts: 2060
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by Mannix_ »

Looks like you went back to the code from the original post i linked
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DereckSmith
Registered User
Posts: 18
Joined: Sun Jan 19, 2025 12:47 pm

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by DereckSmith »

Mannix_ wrote: Wed Jan 22, 2025 10:23 am Looks like you went back to the code from the original post i linked
Yes. 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, kept your sticky part on top of the original:

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>
went back to its original location.

In overall_footer.html,

Code: Select all

<div class="sidebar-right">.../div>
went back to its original location.

The layout is working now (no shrinking).

I am still interested in knowing the cause of the shrinking we saw earlier.

Thank you for all your help, and everyone in this community!
User avatar
Mannix_
Registered User
Posts: 2060
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by Mannix_ »

the type/amount of content on the website is what make it shrunk to fix that we just needed to add width: 100%; on the .wrap
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DereckSmith
Registered User
Posts: 18
Joined: Sun Jan 19, 2025 12:47 pm

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by DereckSmith »

Mannix_ wrote: Wed Jan 22, 2025 3:06 pm the type/amount of content on the website is what make it shrunk to fix that we just needed to add width: 100%; on the .wrap
Made the changes, the layout looks better now.

One issue is the Google Ad extruding to the right-bar, as shown below:

Capture_5.JPG

You may refresh (or click Ctrl + F5) the page to see the issue. If you don't see it, click "Ctrl + F5" one or two times.

https://bbs.cinfoshare.com/viewtopic.php?p=11#

Any insights on this?
You do not have the required permissions to view the files attached to this post.
User avatar
Mannix_
Registered User
Posts: 2060
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by Mannix_ »

That's a question for google and their ads. I never used google ads so i don't really know
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DereckSmith
Registered User
Posts: 18
Joined: Sun Jan 19, 2025 12:47 pm

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by DereckSmith »

Mannix_ wrote: Wed Jan 22, 2025 6:58 pm That's a question for google and their ads. I never used google ads so i don't really know
Looks like this issue can be resolved (temporarily) by changing the Google Ad style from

Code: Select all

style="display:block"
to

Code: Select all

style="display:block; text-align:center; min-width:400px; max-width:1110px; width:100%; height:90px"
Example:
https://www.bbs.cinfoshare.com/viewtopic.php?t=3

The new issue is: this Google Ad is not responsive to page resizing.

More info:
https://support.google.com/adsense/answ ... ht-example
DereckSmith
Registered User
Posts: 18
Joined: Sun Jan 19, 2025 12:47 pm

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by DereckSmith »

Mannix_ wrote: Wed Jan 22, 2025 10:23 am Looks like you went back to the code from the original post i linked
If the sidebars are moved outwards, as shown below:

Capture_7.JPG
Capture_8.JPG

The site looks fine on Desktop, but does not show well on a smart phone (the page is not responsible to device dimensions, still shows the desktop layout).

Do we have a solution for this issue?
You do not have the required permissions to view the files attached to this post.
User avatar
Mannix_
Registered User
Posts: 2060
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by Mannix_ »

Code: Select all

@media (width <= 900px){
	.wrap {
		order: -1;
	}
	.sidebar-wrapper{
		flex-wrap: wrap;
		justify-content: center;
	}
}
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
DereckSmith
Registered User
Posts: 18
Joined: Sun Jan 19, 2025 12:47 pm

Re: How to have both left and right sidebars in phpBB 3.3.14 Prosilver?

Post by DereckSmith »

This works great. Thank you!

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