Custom Styling Content Groups

In Styla you can not only custom-style elements, but also apply custom styles to groups.

There are two ways to do this:

1. Locally, for one or more specific groups

Groups have a field for naming them. This name is applied in the data-name attribute to the outmost div of a group. It can be used to target this group with CSS:

1. Select a group you want to custom style
   1. Change the name field of that group
2. Optionally: select other groups that should have the same style
   1. Give them the same name
3. Create an HTML element anywhere on the page with that group, or in the header and footer layout standard.
4. Add CSS code into the HTML element that targets the data-name attribute using the name you have used.
   1. Example code:

      1. <style>
             [data-name=main-banner] {
                 border: green 2px solid;
             }
             [data-name*=banner] {
                 box-shadow: 0 0 30px green;
            }
         </style>

The group name field:

The HTML element with custom CSS targeting that group:

Notes for method 1:

• The outermost div of that group will get the data-name attribute with the value you specified. You can use that to specify CSS to target any HTML element inside that div by inspecting and targeting your CSS accordingly.
• 
• You can target group(s) with an exact name match or partial matches (contains, starts with, ends with) using standard CSS selectors. Like this, you can flexibly target groups across your site

2. Globally, for all groups

This can be done in the Global Custom Styling settings using the JSS styling language.

1. Go to the Global Styling tab
2. search and find the "AreaLayoutRow" object
3. Within that find the "styles" object:
4. Here you find all major classes that are used within groups.
5. Inspect your site and find the class you want to target
6. Edit them as JSS to match to your needs
7. Save and re-render

Notes for method 2

• Some of these classes are group configuration specific, and not all groups contain them.
• You can alter or add your own CSS parameters and values into each of these classes for desktop and mobile.
• Changes here will apply to ALL groups all the time, so only use it if you want to affect your global site style.