Sidebars for 3.1 - I want answers! :D

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Suggested Hosts
Locked
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 everything, Arty. I'm off to bed on this side, but tomorrow I'll group all of your advice into a nice detailed reply in this thread to help group it for those also looking for sidebars on their forum.

Thanks again! :)
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:

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 { 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.
Hi Arty,

How would I tweak the CSS to produce two sidebars of 150px each? I've tried changing the '250px' widths to 150, but that doesn't work.

Thanks!
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 »

Hey guys,

I'm appealing to anyone that can help with the above question (how to change the sidebar width). I'm a newbie! Thanks!
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 »

Changing width should work fine. Make sure your content isn't causing width to stretch.
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 »

Hmm...OK, I'll try it again. Thanks, Arty.
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:Changing width should work fine. Make sure your content isn't causing width to stretch.
I'm not sure why, but changing both left and right widths to 150px produces this:

Image
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 also need to reduce margin for #page-body and .page-body-inner.

Value is width of both sidebars + 20 px for spacing between content and sidebar. So if both sidebars are 150px wide, margin should be 320px
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 also need to reduce margin for #page-body and .page-body-inner.

Value is width of both sidebars + 20 px for spacing between content and sidebar. So if both sidebars are 150px wide, margin should be 320px
Hi Arty,

OK I got that to work. Images that are thinner than the width of the sidebars display well. What doesn't display well is text. It doesn't wrap and causes the sidebar to align atop the rest of the site. Do you have any advice here? I'll also post the sidebar code that's producing what you see in this image:

Image

Code: Select all

 <div class="sidebar-left"> Left sidebar code
        <a href="http://www.101migration.com" target="_blank"><img src="http://i62.tinypic.com/2rxd4jl.png"></a>
        <P>
        <BR>
        <a href="http://www.101migration.com" target="_blank"><img src="http://i62.tinypic.com/2rxd4jl.png"></a>
        <P>
        <a href="http://www.101migration.com" target="_blank"><img src="http://i62.tinypic.com/2rxd4jl.png"></a>
        <P>
        <a href="http://www.101migration.com" target="_blank"><img src="http://i62.tinypic.com/2rxd4jl.png"></a>
        <P>
       
        <BR>
        <I>(<a href="http://www.google.com" target="_blank">Click here for the official schedule!</a>)

    
    </div>
Thanks!
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 »

Remove <p> elements from your code. They are pointless and you aren't closing them anyway. Most likely they are causing errors because they do add extra margin.

Also you didn't close <i> element, which shouldn't be used ether. For italic text element is <em>, not <i>
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
muskol
Registered User
Posts: 6
Joined: Wed May 27, 2015 5:07 pm

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

Post by muskol »

Thank you very much, Arty. Your code works well.
I'm trying to expand left and right sidebars vertically from the top to the bottom of the screen (header and footer between the sidebars), but I didn't resolve this problem by myself. Maybe you help me?
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. What should I do to skip lines?
User avatar
Lumpy Burgertushie
Registered User
Posts: 68114
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie »

<br />
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
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!
muskol
Registered User
Posts: 6
Joined: Wed May 27, 2015 5:07 pm

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

Post by muskol »

In order to expand sidebars vertically I made the following additions to your two sidebars model:

I placed <div class="sidebar-left">Left sidebar code</div>
before <div id="page-header">

Then created <div class="page-header-inner">.....</div> inside <div id="page-header">
and added styles for .page-header-inner and #page-header, as you made for page-main.

Result: The left sidebar raised up, but the main content moved to the left.

Maybe I ought create left and right divs around <div id="wrap">?
User avatar
Lumpy Burgertushie
Registered User
Posts: 68114
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie »

the sidebars are already the entire height of the page, there should be no need for any extra coding for this.

robertr
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
Locked

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