I want to have an image widget in the background and a Rich Text widget on top of that. I need both the image and the text to be editable. The images will change, so I can’t just code that into the external CSS. I’ve successfully stacked two regions with one widget in each region, then manipulated the CSS so they are on top of one another - the problem is only one region is viewable in the Editor (always the image), so I can’t edit the one underneath unless I delete the one on top.
Hi Jason,
One option you might want to explore is to have the contents of both widgets stored as shared assets. This way, the content can be edited from the Asset library directly.
Another option would be to write CSS that would cause widgets to appear stacked vertically within the editor only. You can try targeting the behavior within the Editor specifically by using the title attribute in your CSS, as this is the only time the title attribute is applied to widgets. For widgets, it would look something like this:
.perc-widget[title] {}
Hi Jon,
Thanks for the response and your help.
I would prefer doing something like option #2, as I’d rather keep it as simple as possible for the people I’ll be handing it off to. If they start messing with Assets and changing the coding therein, there’s a good chance they will break something. If simpler options don’t pan out, I will work with option #1.
I did attempt using the [title] attribute, and it works great for the Layout tab in the Editor, but it’s not working for the Content tab in the Editor, where they’ll need to be for editing the text/image. The widgets are still stacking so I can’t see the one underneath. Is there something I’m missing here or is it just not going to work for the Content tab?
When you are on the content tab it should work fine. You must be in edit mode. When you just have the page open, it will appear as it would outside of Cm1, to the best it can. When you click Edit, the CSS with the [title] attribute targeted will take effect. Keep in mind, it’s on the Widget in Content. Regions also have Title attributes in Layout mode if you need to target that. We actually have layered images as background images on the new Percussion.com site.
Below is basically what we implemented for the same thing. Keep in mind, there is ALOT below I pasted, but it’s not as complicated as it may look below.
To start, we have a contentWrapperDiv region that contains two regions for the background image and the main content. The wrapper needs position: relative, and a min-height, in our case, equal to the background image so it positions correctly.
The image widget is in a Region named backgroundImageWrapper and has CSS on it to position it 1 layer beneath and at the top of the wrapping region.
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
} ```
Our content is then placed inside another region, created below the background wrapper, in CM1, with CSS positioning it above, also with a min-height to let the region and background image look proper, in our case:
``` #mainContentWrapper {
height: auto;
min-height: 535px;
position: relative;
z-index: 2;
} ```
The main content can contain anything. The background wrapper is just an image widget. In edit mode, you simply play with margins to force the main content wrapper to slip down or expose the top of the background image to allow easy editing. I got creative and fancy and added a message to ours for our marketers using the "content" CSS attribute. We can double click, or drag an image asset onto the "Click or drag..." message in edit mode. Doesn't show on our pages :)
``` #backgroundImageWrapper .perc-widget[title]:before {
border-bottom: 1px dotted #666666;
content: "Click or drag asset here to change background";
display: block;
height: 30px;
line-height: 30px;
margin-top: -40px;
position: absolute;
width: 100%;
z-index: 100;
} ```That came out much longer than I anticipated. :-S