Jump to content

THANK YOU for .ipsLayout


MageLeif

Recommended Posts

  • 3 weeks later...

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. :(

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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
Link to comment
Share on other sites

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

Link to comment
Share on other sites


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!

Link to comment
Share on other sites

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).
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...