On the Design, under: Region Properties >> I see Region Based CSS and a box for CSS Property / Value and: Use additional CSS Classes
Where can I obtain more information on how to use these for new designs?
This page explains this in more detail, about half way down, under “Configuring Regions”
For the CSS Region Root Class, is this where I put the ID for my item? I rebuilt a social media box into CSS, and put it in a Rich Text so the Editor can edit it w/o knowing HTML.
Would my root class be the wrapper I have around the social media box I built?
Hello Debbie,
This should work. If you wanted the ability to have users choose styles you can also look at “Creating Custom Styles in a Rich Text Widget”
I started working on this again, and I’ve read over that article many times and even played with the Region Properties section, and I am unable to make the container function.
I have three ID’s. One for the container, one for a right column and one for a left column.
In the Region name, I put the container ID, but it took out the #.
- When I try to enter in the related properties and values for this ID, they disappear.
In the region root, I put the two other ID’s and I attached the CSS in the Meta Data, Additional Code section.
What happens is when I open the page to edit > it is in one row (not two columns) and you see the rich text ovals that are under it - everywhere up inside of it.
It is ignoring my height of 100%.
I set the height in the CSS and this did not adjust it. Then I set the height on the CSS Overrides and that did not set it to 100% height.
What am I doing incorrect?
I have read over the tutorial for this many times, however I am more of a visual learner.
Below is an image of the Region Properties and an example. Please let me know if I am making the correct assumptions.
-
Region Properties - Would I put the ID here? (i.e. #Wrapper)
> for each ID, would I need to carve a new div, or can I stack the Rich Text Widgets?
CSS Property:
- What goes in the Property name > would this be a class within the ID (listed in the Region Properties)
> or would it be: background-color: and value would be: #000000
Use Additional CSS Classes:
- Would this be classes found under the ID (#Wrapper) that I placed in the Region Properties at the top?
- What makes this different from the CSS Property area?
Would the style sheet be included in the Meta-Data on the Design ?
I’ve tried variations - and my Rich Text is stacked, not in different divs. They rich text then overlays on the Rich Text Widgets below them.
So I"m trying to figure out the best way to approach this.
I never figured this out, but I did figure out how to redo my CSS so that the rich text edits did not overlap.