and the css:
Here is my proposal for this specific case:
1. Create custom layout element with three placeholders
2. Set a class name to the second placeholder
3. Add the image width:
.second_placeholder .sfimageWrp img
Hey Jordan, I've sent an email to support@ containing a sample project. Attached you'll see 2 screenshots (one frontend, one backend edit) to describe the 'pain points'. First, take the 'Header'. Since it has a fixed min/max height it doesn't flow. I've actually made it a tad larger so you can just see the black background in the page editor. When no widgets are dropped on a placeholder it has a solid white background, which as a result nearly hides (or sometimes makes it very difficult which placeholder it is) the area. Secondly, I've tried to illustrate the aside/height problem. There are 3 areas there, same as in my last example (header, image and text). I always wanna show the header, regardless of contentblock being dropped on it, the other two are optional so to speak. If you take a look at the BE screenshot, you'll notice that only 2 placeholders are visible because the placeholders overlap each other. --- As mentioned before, I can work around it and your solution and your proposal is a nice one, because it would be done in page edit instead of hard coded in the masterpage... ... however, knowing some of my clients, I can't count on them to use it properly and if they forget, I get blamed for the site being broken. Jochem.
I have reproduced the customization of the project and the problems that you have faced. About the problems with the sidebar widgets: At first I was unable to drop anything inside the placeholders and initially only two placeholders were visible, so I set:
After adding these rules I think everything works fine. Anyway, I recommend my previous proposal with custom layout element - you can put it in the template, so the content writers don't need to drop it anywhere and will be more flexible if there is a case when you need to reuse it. The problem with the header - in this specific case I am not sure why you are using min-height and max-height with same value - is this some kind of restriction for the content writers? Also about the white background that hides the black background and it is hard to recognize which placeholder you are going to use - here is one simple solution for such specific cases:
Also you can set you custom background. Here is the result of my test.
Regards, Jordan the Telerik team