This article describes how to use the Solution Styling (Look & Feel) feature in Solution Studio.
Instead of styling each form or each set of action buttons separately, you configure styles once on the Look & Feel page. Those styles then apply to every form and every Automation Action button in the solution, and they travel with the solution when you package and deploy it.
The style editors are the same ones you know from the Forms Designer and the Action Buttons Designer — the difference is that styles configured here apply to the entire solution, not to a single form.
Table of Contents
- What is Solution Styling
- Requirements
- Where to Find It
- Site Tab
- Forms Tab
- Automation Actions Tab
- Configuration
- Custom CSS (Site)
- Live Preview
- Saving and Versions
- Remove Styling
- Export / Import
- Tips
- Related Articles
What is Solution Styling
With Global Solution Styling you style an entire solution from one place. You configure styles once on the Look & Feel page in Solution Studio — they then apply to every form and every Automation Action button in the solution, and they go with the solution when you package and deploy it.
The Look & Feel page includes:
- The Site, Forms and Automation Actions tabs
- A live preview of forms and action buttons
- Custom CSS (Site) with several stylesheets and optional conditions
- Export / Import, Version and Remove styling in the command bar
- An Info button in the command bar that links to the documentation
Requirements
Global styling and the preview require skybow Solution Features version 1.3.129 or later on the site.
On older versions the styling area is disabled, and the following message is shown:
Styling and preview require a newer version of the skybow features on this site. Please update the Solution Features to configure styling.
Partial functionality on older versions
The packaging options on the Site tab — logo, footer, and site information — still work on older versions of skybow Solution Features. Only the styling and preview areas require version 1.3.129 or later.
Where to Find It
Open your solution in Solution Studio and go to Look & Feel. The page has three tabs:
- Site — Whether the solution package includes the site logo, site footer and site information, plus Custom CSS (Site)
- Forms — Styles that apply to all forms of the solution
- Automation Actions — Styles that apply to all Automation Action buttons of the solution
Site Tab
On the Site tab you choose which site settings the solution package includes:
- Site Logo: include the site logo in the solution. If the logo isn't stored inside the solution, a warning tells you that it can't be packaged.
- Site Footer: include the site footer in the solution (Communication site). Existing footer navigation links will be overridden on the deployment site.
- Site Information: include the site name and description. The target site's name and description will be overwritten on deployment.
Custom CSS (Site) is also located on this tab. See the Custom CSS (Site) section below for details.
Forms Tab
The Forms tab lets you configure styles that apply to the following controls on all forms of the solution:
- Command Bar
- Form Title
- Rows
- Fields
- Tabs
- Buttons
- Lists&Libraries
- File Viewers
- Process Steps
- Dividers
- Spacers
- Comments
For example, a style you add for Fields applies to all fields on every form of the solution.
You can add more than one style to a control. A style lower in the list has higher priority and overrides the ones above it.
Automation Actions Tab
The Automation Actions tab lets you configure styles for Automation Action buttons, such as button layout, appearance, icons, alignment and title text. The styles apply to all action buttons of the solution.
Configuration
Step 1: Available Options to Configure Styles
The styles tree works the same way as in the Forms Designer. Actions are available at two levels:
At the control level (click the ellipsis … on a control):
- Add Style
- Export Styles
- Import Styles
The Add new style dialog lets you create a style in these ways:
- From scratch — a new style without any preset configuration
- From existing style — a copy of a style you already created; type in the field to search
- Name — a name is suggested, and you can change it
At the style level:
- Edit the style name
- Move up / Move down
- Remove the style
Styles that differ from the default are marked with an orange border in the editor.
Step 2: CSS Editor
Each style has a CSS editor that shows its entire configuration. You can also add or edit CSS there by hand.
IMPORTANT: If the CSS contains an error — such as a missing bracket — the editor flags it, and you cannot save until the error is fixed.
Custom CSS (Site)
For anything the style editors don't cover, use Custom CSS (Site) on the Site tab. This CSS applies to every .aspx page of the current site.
- You can add several stylesheets. Use New style sheet to add one and rename or remove sheets in the list.
- CSS errors are flagged in the editor, and you cannot save until they are fixed.
Rule / Condition (Apply When)
Each stylesheet can have an Apply When expression, so it is only used when a condition is true. Click the expression button to open the Expression Builder and set up the rule.
- Sheets that have a rule show fx icon in the stylesheet list, so you can see at a glance where conditions are set.
Live Preview
On the Forms and Automation Actions tabs, a live preview sits next to the editor. Every change shows up right away, including changes you haven't saved yet.
The form preview has two tabs, so you can check both modes of a form:
- New / Edit Form — editable fields
- Display Form — read-only fields filled with sample values, plus the Edit/Close bar
The preview uses a sample form with typical field types — text, choice, date, person, currency, yes/no, multi-line text and process steps — so you can judge your styles on realistic content. The color pickers show your SharePoint site's theme colors, so the colors you pick match what users will actually see.
Saving and Versions
- Use the Solution Studio Save button (next to Refresh) to save. This single button saves all three tabs together — the Look & Feel page has no Save button of its own.
- If you leave the page with unsaved changes, Solution Studio asks whether to save them.
- Each save creates a version. Open Version in the command bar to see earlier versions, with who changed them and when.
Restoring a previous version
When you pick a version, it loads into the editors and the preview. Nothing changes until you save:
- Click Save to restore that version as the current one.
- Click Cancel to go back to the current styles.
If you switch versions while you have unsaved changes, you can choose Save, Discard & view or Cancel.
Remove Styling
Remove styling in the command bar deletes all solution styling — form styles, action buttons and custom CSS — including the styles file.
IMPORTANT: This action cannot be undone. Export a backup of your styles before using Remove styling.
Export / Import
There are several ways to export and import styles.
Export / Import all solution styles (command bar)
Access via command bar → Export / Import.
- Export styles — downloads all styles as solution-styles-<Solution Name>.json, including changes you haven't saved yet.
-
Import styles — lets you choose which sections of the file to import:
- Forms
- Automation Actions
- Custom CSS
Each section shows how many styles it contains. For each selected section, choose:
- Append — adds the imported styles to your current ones.
- Replace — replaces the current styles in the selected sections.
Sections you don't select stay as they are.
You can also import files exported from the Forms Designer or the Action Buttons Designer. Their general styles become solution styles. Control-specific styles are skipped.
Export / Import on individual controls
Each control in the Forms and Automation Actions trees has its own Export / Import option in its … menu.
- The exported file is named solution-styles-<Solution>-<Forms|Automation Actions>-<Control>.json.
- If you import into a control that already has styles, you can choose Append to existing or Replace all.
Result: Solution-Wide Styling Configured
- All forms in the solution share a consistent look without per-form styling work.
- All Automation Action buttons reflect the global button styles.
- Custom CSS applies to every .aspx page on the site, with optional conditional rules.
- Styles are versioned, exportable, and travel with the solution package on deployment.
Tips
Best Practices
- Set general styles on solution, and adjust individual forms only where they genuinely need to look different.
- Check both New / Edit Form and Display Form in the preview before saving — fields look quite different in read-only mode.
- Export your styles before making large changes or before using Remove styling. The export file is your backup.
- Use Export / Import to share the same look and feel across several solutions.