THANK YOU for .ipsLayout

[MageLeif]

Seriously, this is the most useful CSS class EVER.

Thank you, IPB, for caring enough to clean up and improve the CSS for people like me. 3.2 is miles better than 3.1 in most respects, but in this one especially. <3

[altenerg]

how do u change the right column width? 3.2.0

[Mark]

how do u change the right column width? 3.2.0

Add any of:

.ipsLayout_tinyright (40px)
.ipsLayout_smallright (140px)
.ipsLayout_largeright (270px)
.ipsLayout_bigright (320px)
.ipsLayout_hugeright (370px)

[altenerg]

Have been trying that. I don't know CSS so hat the problem. I've been serching for a how-to with what to find and replace for example. I wish this support forum was broken down by versions. Ex. 3.2.0 only forum. I'm sure the answer may already be on here but so hard to filter through 3.2.0 only threads. :(

[altenerg]

Is that in globaltemplate? or CSS

[altenerg]

This is what I've been editing with no positive results:

/* LAYOUT SYSTEM */

.ipsLayout.ipsLayout_withleft { padding-left: 210px; }


.ipsLayout.ipsLayout_withright { padding-right: 210px; clear: left; }


/* Panes */


.ipsLayout_content, .ipsLayout .ipsLayout_left, .ipsLayout_right { position: relative; }


.ipsLayout_content { width: 100%; float: left; }


.ipsLayout .ipsLayout_left { width: 200px; margin-left: -210px; float: left; }


.ipsLayout .ipsLayout_right { width: 200px; margin-right: -210px; float: right; }

/* Wider sidebars */


.ipsLayout_largeleft.ipsLayout_withleft { padding-left: 280px; }


.ipsLayout_largeleft.ipsLayout .ipsLayout_left { width: 270px; margin-left: -280px; }


.ipsLayout_largeright.ipsLayout_withright { padding-right: 290px; }


.ipsLayout_largeright.ipsLayout .ipsLayout_right { width: 280px; margin-right: -290px; }

/* Narrow sidebars */


.ipsLayout_smallleft.ipsLayout_withleft { padding-left: 150px; }


.ipsLayout_smallleft.ipsLayout .ipsLayout_left { width: 140px; margin-left: -150px; }


.ipsLayout_smallright.ipsLayout_withright { padding-right: 150px; }


.ipsLayout_smallright.ipsLayout .ipsLayout_right { width: 140px; margin-right: -150px; }

/* Tiny sidebar */


.ipsLayout_tinyleft.ipsLayout_withleft { padding-left: 50px; }


.ipsLayout_tinyleft.ipsLayout .ipsLayout_left { width: 40px; margin-left: -40px; }


.ipsLayout_tinyright.ipsLayout_withright { padding-right: 50px; }


.ipsLayout_tinyright.ipsLayout .ipsLayout_right { width: 40px; margin-right: -40px; }

/* Big sidebar */


.ipsLayout_bigleft.ipsLayout_withleft { padding-left: 330px; }


.ipsLayout_bigleft.ipsLayout .ipsLayout_left { width: 320px; margin-left: -330px; }


.ipsLayout_bigright.ipsLayout_withright { padding-right: 330px; }


.ipsLayout_bigright.ipsLayout .ipsLayout_right { width: 320px; margin-right: -330px; }

/* Even Wider sidebars */


.ipsLayout_hugeleft.ipsLayout_withleft { padding-left: 380px; }


.ipsLayout_hugeleft.ipsLayout .ipsLayout_left { width: 370px; margin-left: -380px; }


.ipsLayout_hugeright.ipsLayout_withright { padding-right: 380px; }


.ipsLayout_hugeright.ipsLayout .ipsLayout_right { width: 370px; margin-right: -380px; }

[altenerg]

Add any of:

.ipsLayout_tinyright (40px)

.ipsLayout_smallright (140px)

.ipsLayout_largeright (270px)

.ipsLayout_bigright (320px)

.ipsLayout_hugeright (370px)

Add it where?

I did a Google search to find if anyone else posted instructions but instead I find a forum with their 300x250 Ad cut off on in the right column also lol:
http://www.vaportalk.com/forum/

[MageLeif]

Okay, I'd like to say thank you again for this wonderful feature.

It's my favorite thing about 3.2 and has already come in handy multiple times.

And to those of you confused, you should really just learn CSS/HTML. It's not that difficult to learn at all, I promise.

[altenerg]

Okay, I'd like to say thank you again for this wonderful feature.

It's my favorite thing about 3.2 and has already come in handy multiple times.

And to those of you confused, you should really just learn CSS/HTML. It's not that difficult to learn at all, I promise.

No worries.... Karma is a

[Lux Aeterna]

Here is an example...

I wanted to add a right sidebar to my Topic View, so that when people browse topics in the forums they see my sidebar content. By default, there is no sidebar on topics.

You have to add these DIV with the desired CSS Class to your related template.

ACP > Look & Feel > Templates > Topic View > TopicViewTemplate

I added this:

Put this BELOW the stuff that should stay at the top, above the sidebar

<div class='ipsLayout ipsLayout_withright ipsLayout_largeright'>

<div class='ipsLayout_right'>

Your sidebar content goes here

</div>

The rest of your page, THAT YOU WANT ABOVE THE FOOTER content goes here (topics etc.)

</div>

Footer stuff here





You can change the desired width etc inside ipb_styles.css

[altenerg]

Here is an example...

I wanted to add a right sidebar to my Topic View, so that when people browse topics in the forums they see my sidebar content. By default, there is no sidebar on topics.

You have to add these DIV with the desired CSS Class to your related template.

I added this:

[color=#FF0000]Put this BELOW the stuff that should stay at the top, above the sidebar[/color]

<div class='ipsLayout ipsLayout_withright ipsLayout_largeright'>

<div class='ipsLayout_right'>

[color=#FF0000]Your sidebar content goes here[/color]

</div>

[color=#FF0000]The rest of your page, THAT YOU WANT ABOVE THE FOOTER content goes here (topics etc.)[/color]

</div>

[color=#FF0000]Footer stuff here[/color]

You can change the desired width etc inside ipb_styles.css

Very useful reply! Thanks. Based on your post I was able to get an idea of how things work.

So I edited boardIndexTemplate and changed:

 ipsLayout_largeright[/CODE]

to...

[CODE]ipsLayout_bigright

Thanks again Lux!

[Lux Aeterna]

Glad to help ;)

[Feld0]

I've yet to start work on a custom skin for 3.2, but I really love the positive feedback on the new CSS structure. I had a quick, cursory look at it and it does look leaps and bounds more organized, so I'm looking forward to working with it.

And to those of you confused, you should really just learn CSS/HTML. It's not that difficult to learn at all, I promise.

Just want to second this (really, understanding HTML/CSS is a great skill to have), and add that http://w3schools.com/ is the best resource ever for doing just that. In about a week, I went from not knowing what a table layout was to a fully functional, entirely custom, and standards-compliant WordPress theme (which looks quite nice, too, especially considering I had never touched any HTML or CSS code before).