Hello,
According to you what would be the best way to transform the left/content/right layout into Content/left/right while keeping the flexibility of removing left or right or both ?

Here what I've done but I don't think it is ideal :

In Layout.css

#content {
	float:left;
	width:100%;
	margin-right:-100%;
	padding:0;
}
.sidebar {
	float:right;
}
.two-sidebars #content-inner {
  margin-right: 350px;  /* Right Sidebar width + Left Sidebar width */
}
.sidebar-right #content-inner {
  margin-right: 200px;  /* Right Sidebar width */
}
.sidebar-left #content-inner {
  margin-right: 150px;   /* Left Sidebar width */
}
#sidebar-left {
  width: 150px;
}

#sidebar-right{
  width: 200px;
}

The bad thing: In page.tpl.php I had to put $right before $left so that I have left on the left of right ;-)

And congratulations for this theme.
Alex.

Comments

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Assigned: Unassigned »
Status: Active » Needs review

Your solution is pretty good, and I think it's simple enough, you could just rename left right and right left and it would work. It is not a bad thing to change the page template :)

Here is another solution that would avoid changing the page template, and have the sidebar in the right order. I didn't test it on IE though, but it should be ok. You will have to set the width values of the content to make sure it isn't squished when they're is no content to display though.
You technic makes the content float on the left and the sidebars float on the right, this one make everything floats on the left, and uses negative margins to bring the sidebars where you want them :

/* default value for the content */
#content {
  float:left;
  padding:0;
}
/* default value for the sidebars */
.sidebar {
  width: 150px;
  float:left;
  margin-left:-150px;
}
/* Right sidebar overide */
#sidebar-right{
  margin-left:-200px;
  width: 200px;
}
/* Content width with two sidebars */
.two-sidebars #content {
  margin-right: 350px;  /* Right Sidebar width + Left Sidebar width */
}
/* Content width with only right sidebar */
.sidebar-right #content {
  margin-right: 200px;  /* Right Sidebar width */
}
/* Content width with only left sidebar */
.sidebar-left #content {
  margin-right: 150px;   /* Left Sidebar width */
}
/* Sidebars values when two sidebars */
.two-sidebars #sidebar-left{
  margin-left:-350px;
}

Notice that I set a default value for the sidebar and then overide it only for the right one, you could also do this with your code to make it even simpler.
Hope this helps

N.B: What is kinda cool here is that it works even on fluid width! Again, I didn't test it much, but it's promissing.

ineation’s picture

ineation CreditAttribution: ineation commented

Yes, I've rougly tested both solutions in Firefox 3, Chrome and IE 6 (virtual).
It works fine.

My css is simpler but the markup is not logical.
Your CSS is a little more complex (negative margins) but the layout is independent of the markup order. Which is why I think your solution is better.

Both solutions work with a fluid width (with weird things happening at small widths with chrome), which indeed is excellent.

I don't know what is your policy regarding this theme. But it may be a good idea to put an alternative layout such as layoutCLR.css so that by just changing the .info you may be able to switch from a LCR layout to a CLR layout.
On the other hand maybe you prefer to keep it focused on one layout and simplicity.

Either way, thank you for your help...

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

We are very concerned about the simplicity of the theme, and try to keep the amount of file as low as possible. Adding more layout option is a good idea, but we are still thinking about the best way to do this.
We first need more documentation, and this is priority :)
At least this issue is here to help people who will have the same problem as you.

Thanks

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Sinan Erdem’s picture

Sinan Erdem CreditAttribution: Sinan Erdem commented

Thanks, I was looking for a solution. And it works perfect for me...

Since "Basic" is a nice starter theme, maybe this code could be included as commented in the original layout.css just to offer a choice.

Sinan Erdem’s picture

Sinan Erdem CreditAttribution: Sinan Erdem commented

After some tests, the second method doesnt work for me on IE6. Layout breaks. I think it is about negative margins. Does anyone have an idea?

Actually I would like to use the second method because if the content is larger than the content area width, then it pushes the sidebars to the right. But in the first method, sidebars place over the content.

Here is my code in the layout.css:

#page {
	width: 970px; /* edit to change the width of the page */
	margin: 0 auto; /* remove 'auto' and the width to switch to a fluid width */
}


/* default value for the content */
#content {
  float:left;
  padding:0;
  position: relative;
}
/* default value for the sidebars */
.sidebar {
  width: 265px;
  float:left;
  margin-left:-265px;
  position: relative;
}
/* Right sidebar overide */
#sidebar-right{
  margin-left:-165px;
  width: 165px;
}
/* Content width with two sidebars */
.two-sidebars #content {
  margin-right: 430px;  /* Right Sidebar width + Left Sidebar width */
}
/* Content width with only right sidebar */
.sidebar-right #content {
  margin-right: 165px;  /* Right Sidebar width */
}
/* Content width with only left sidebar */
.sidebar-left #content {
  margin-right: 265px;   /* Left Sidebar width */
}
/* Sidebars values when two sidebars */
.two-sidebars #sidebar-left{
  margin-left:-430px;
}


/* header */

#header #header-region {
	overflow: hidden;
}

/* footer */

#footer {
	float: none;
	clear: both;
	position: relative;
}

/* Layout Helpers */

#header,
#footer,
#main #content .mission,
#main #content .breadcrumb,
#main #content .node {
	clear: both;
}