Getting Started

Overview

skybow Theme Designer is a sophisticated CSS builder for SharePoint that also can add a CSS reference to the pages. It is a central point of applying themes to the SharePoint pages (including the master page), controls and skybow apps.

Theme Designer presents all the known components (from a specific configuration) of the page and gives user the possibility to style them.

Note: This SharePoint Add-In works only SharePoint 2013 or higher.

Support

For any questions or technical issues, you can contact us. Here are our contact details.

skybow Support

Theme Designer Documentation

skybow Foundation

The functionalities of Add-Ins require a higher level of privileges on Office 365 since the Add-Ins that are offered in Microsoft store have some restrictions placed upon them. Therefore, the manually installed Add-Ins are permitted to execute the advanced actions.

The skybow Foundation Add-In is one such manually installed Add-In with some functional capabilities that are otherwise not allowed to be executed by us in MS store. This Add-In provides services for all the skybow Add-Ins to work efficiently as well as enhance their feature set. Essentially, instead of implementing the same set of capabilities in each of our Add-Ins, this utility is loaded with shared functionalities that can hence serve all our skybow Add-Ins.

Installing Theme Designer

Pre-requisites

To be able to add this Add-In, you need to have site collection administrator privileges. Also, the scripting capabilities should be turned on in tenant-wide settings. The App Catalog must be modified accordingly to accommodate Theme Designer which works on-premise with SharePoint 2013 or higher.

1. From your SharePoint environment go to Setting, Site Contents and then Add an App

2. Then on your left site click on SharePoint Store

3. And search for the skybow products

4. Select skybow Theme Designer Add-In from the list.

    The Office Store for skybow Theme Designer  will be displayed.

    Click on Add It

5. In skybow Theme Designer app click on Request License.

    You will receive the License per e-mail.

6. After receive the License per e-mail, make the Upload.

7. The skybow Theme Designer Pages app will appear on Lists, Libraries and other Apps - Site Contents page.

     Click on skybow Theme Designer Pages app.

8. The skybow Theme Designer Pages App Homepage is shown

Adding skybow Theme Designer App Add-In to your SharePoint Online/On-Premises Site

1. From any page where you are, go to Settings, Add an app and will be displayed the Apps that you can add.

or

2. Other way is, searching through the Filter.

2. And make Trust it

Request License

1. On Site Contents - Lists, Libraries, and other Apps click on skybow Theme Designer app.

    The skybow Theme Designer Pages App will be displayed

2. Select Request License

3. Fulfill the skybow License Request

4. And will appear a "Thank you message"

5. You will receive your License per E-mail

Upload license

1. Go to skybow Theme Designer Pages.

    One way it's, through the Site Contents - Lists, Libraries, and other click on skybow Theme Designer app.

2. On skybow Theme Designer Pages page click on Upload License

3. Choose the License File to upload

4. The Theme Designer Pages app will be displayed

Configuring skybow Theme Designer

skybow Theme Designer App Page Overview

The skybow Theme Designer App page is where you configure your Themes.

After adding the Add-Into the site, it will appear on the Site Contents page. You can go to the Add-In clicking on Site Contents Page and will take you to the skybow Theme Designer Page.

The skybow Theme Designer App page has the following sections:

   1. Instructions & Support - In this section, you can view introduction video, check out documentation or contact support for any queries.

   2. Configure Theme Designer – In this section, you can configure your Themes.

   3. About This App – In this section, you can view version details and rate this Add-In.

   4. Other Accelerators from skybow – In this section, you can access other SharePoint accelerators from skybow, such as skybow Rich Forms, skybow List View Search, skybow Action Links and skybow Tabbed Pages.

Ways to Add Theme Designer App Part

There are 2 ways in which you can add a Theme Designer app part.

1. From the skybow Theme Designer App page, you can create a new theme.

The Demo Page holds all the supported controls and it enables the user to create a new theme or edit existing one.

2. From the skybow Theme Designer App page, you can Apply an existing theme.

Specify where to add Theme Designer app and select the further options depending on it.

On the App page, specify where to add Theme Designer app and select further options depending on it.

The Demo Page holds all the supported controls, and it enables the user to create a new theme or edit existing one.

Navigating to the Demo Page is possible from the App home page in 2 ways:

• by clicking ' Add new theme' button;
• by clicking ' Edit' button and selecting 'Edit on Demopage' radiobutton:

The Demo Page displays all installed skybow apps and includes only Master theme changes. That's why it is useful to configure themes on this page, for different themes configurations do not conflict with each other.

Note: Do not apply any theme to the Demo Page to avoid conflicts when creating new themes.

Configuring in Design Mode

Themes provide a quick and easy way to apply lightweight branding to a SharePoint 2013 site or higher. A theme lets a site owner or a user who has designer rights, customize a site by changing the site layout, color palette, font scheme, and background image.

SharePoint 2013 includes pre installed themes. The theme experience lets users customize the pre installed themes by changing the colors, fonts, layout, or background image.

When a pre installed theme is modified, a new theme named Current is created automatically after the theme changes are applied. There is only one Current theme for a site. SharePoint 2013 does not give the user a way to save themes from the user interface.

Using Theme Designer enables easy creating, saving and applying themes from the any page on your site.

Theme Templates

Theme Designer provides several template themes for common SharePoint elements and skybow applications.

They are stored in Site Assets -> skybowAppsThemeTemplates folder and are updated with every Theme Designer update.

Provided themes cannot be edited or deleted from the Theme Designer home page. But user can save new themes based on them.

As well, user can add custom css file with the configuration, to create own theme template.

The name of the css file corresponds to the name of the theme template.

Theme for Action Links app "sbUIActionLInks"

.skybow-actionlinks-items-container a {

     text-decoration : none;

}

.skybow-actionlinks-items-container a {

     vertical-align : middle;

}

.skybow-actionlinks-items-container a:hover {

     text-decoration : none;

}

.skybow-actionlinks-items-container a:hover {

     vertical-align : middle;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     margin-top : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     margin-right : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     margin-left : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     padding-top : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     padding-left : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     height : 44px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     margin-bottom : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     padding-right : 0px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     padding-bottom : 1px;

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container .skybow-actionlinks-itemicon {

     margin : 0px;

     padding : 10px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     margin-top : 0px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     margin-right : 0px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     margin-bottom : 0px;

     margin-left : 0px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     padding-left : 0px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     padding-bottom : 0px;

}

.skybow-actionlinks-template.skybow-actionlinks-listview {

     padding-top : 0px;

     padding-right : 0px;

}

ul.skybow-actionlinks-items-container > li.skybow-actionlinks-actionlink-li {

     margin : 0px 0px 1px 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     margin-top : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     margin-right : 0px;

     margin-bottom : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     padding-left : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     padding-right : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     padding-top : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     padding-bottom : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone {

     margin-left : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     margin-top : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     margin-right : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     margin-left : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     padding-left : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     padding-bottom : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     padding-right : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     margin-bottom : 0px;

}

ul.skybow-actionlinks-items-container:not(:empty) {

     padding-top : 0px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone div.ms-webpart-chrome-title {

     margin-bottom : 1px;

}

.ms-webpartzone-cell.skybow-actionlinks-webpartzone div.ms-webpart-chrome-title {

     padding-bottom : 8px;

}

.skybow-actionlinks-items-container a {

     /* [ReplaceColor(themeColor:"AccentText", themeShade:"0", themeTint:"0", opacity:"1")] */ color : rgba(0, 114, 198, 1);

}

.skybow-actionlinks-items-container a:hover {

     /* [ReplaceColor(themeColor:"AccentText", themeShade:"0", themeTint:"0", opacity:"1")] */ color : rgba(0, 114, 198, 1);

}

ul.skybow-actionlinks-items-container > li > div.skybow-actionlinks-item-container {

     /* [ReplaceColor(themeColor:"HoverBackground", themeShade:"0", themeTint:"0.7", opacity:"1")] */ background-color : rgba(220, 237, 249, 1);

}

Creating Themes

Theme Designer allows to create themes in two ways:

1. From the app home page

When clicking Add new Theme button, the app redirects to the Demo page.

2. From the any other page

New themes can be created from the any page, when selecting <Create new theme> option in the Theme dropdown.

If there are some other themes applied to the current page, they are still displayed on the page and it should be taken into account.

When saving new theme on any page, except of the Demo page, additional option appears: Apply theme to the current page, that allows immediate applying of the new theme.

Theme can also be saved based on existing one. In this case, select existing theme in the 'Theme' drop-down, click on 'Save' button, check  'Save as new theme' checkbox and provide a new name:

Applying Themes

Similar to the creating, Theme Designer allows to apply themes in two ways:

1. From the app home page

When clicking Apply button, the corresponding dialog appears.

2. From the any other page

Themes can be applied from the any page, when clicking Apply button on the Theme Designer ribbon tab.

Note: Only saved themes can be applied.

Editing Themes

Similar to the creating and applying, Theme Designer allows to edit themes in two ways:

1. From app home page

When clicking Edit button, the corresponding dialog appears.

The theme can be renamed or modified more significantly on the Demo Page.

2. From any other page

Themes can be edited from the any page. Changes are applied immediately after saving.

Deleting Themes

Themes deleting is possible in two ways as well:

1. From the app home page

When clicking Delete button, the corresponding dialog appears.

2. From the any other page

Themes can be deleted from the any page, when clicking Delete Theme button on the Theme Designer ribbon tab.

Note: Theme templates cannot be edited or deleted.

User Interface

1. Position Area

To open the Theme Designer, click on 'Shown Designer' option on the Theme Designer ribbon.

It appears pinned to the left by default. To change the view mode, use following options:

/ - Hide / Show Content;

/ - Unpin / Pin Designer;

/ - Pin to the right / left;

- Close Designer.

2. Theme Selection Area

In this area a user can select available theme for editing / applying or create new one by selecting <Create new theme> option from the 'Theme' drop-down list.

When a theme is selected, it appears on the preview at once.

If selected theme is applied to the current page, the Check icon is shown beside the Themes drop-down list:

If selected theme is applied to the Master page, the Star icon is shown beside the Themes drop-down list:

Designer

The Designer mode represents the control configurations tree view which shows the structure of all apps provided with a specific configuration on the current page. It allows set element property values visually. Once editing is done, the changes will take affect immediately.

The 'common SharePoint styles' is a default configuration for every page with web parts added on it. Also the user can provide their own configuration.

Depending on the element configuration, there are three possible groups of controls:

• Style (background and border)
• Orientation and Dimension (margin, padding and size)
• Font (size, color, decoration etc.)

Element Selection

Inspecting an element shows the control configurations responsible for a rendered element on a page.

To start inspecting, click on 'Select element' button and select an element. Once clicked, the tree-view will be expanded and the element's properties will show up in the Control Configurations area.

'Select Element' is only enabled until the user clicks an element.

Element Selection is allowed only in the Designer mode. So if Editor mode is selected, it automatically switches focus back to the Designer after selecting an element.

Editor

The Editor is a CSS hub and allows set any of element property values.

For switching to the Editor mode, click on 'CSS' button next to 'Inspect element' button:

The Editor gives posibillity to edit the CSS generated by Designer and add own CSS code directly inside it. The changes will take affect immediately.

There is CodeMirror used in the Editor, and the features, such as autocomplete, highlighted code and etc., will be helpful for the user to write their code easily.

Ribbon Tab

The Theme Designer Ribbon contains four options:

• Show Designer - opening or closing the Designer
• Apply Theme - opening 'Apply Theme to' dialog for the current selected theme
• Delete Theme - deleting the current selected theme
• Show Tour - starting the tour

Configuration

This chapter contains information about Theme Designer configurations:

• Storage Locations
• Including External Configuration
• Configurable Controls

Storage Locations

• The CSS files are stored in the Style Library > Themable folder on a parent site.

For sub sites additional folder is created with the respective name.

• Demo Page is located in the hidden sbThemeDesignerDemo list (EditForm.aspx page).
• App Configurations are stored in the Site Assets > skybowAppsConfigThemedesigner folder.
• Theme Templates are stored in the Site Assets > skybowAppsThemeTemplates forlder.

Including External Configuration

The user can provide their own configuration for an app. In this case an app configuration file should be created. All configurations are displayed on the UI respectively. The file should be in JSON format with no extension.

Configuration components are the following:

Title: to be displayed for the configuration in the Control Configuration area.

ImageBase64: an image encoded to base64.

RootElementSelector: CSS Selector of an element which defines whether the Configuration should be displayed in Designer on the current page.

DemoPageHtmlOrJSUrl: the URL to the HTML or JS which will be inserted into the Demo Page for customizing.

DemoPageAutoCustomizer: provides customization for an app on the Demo Page (it should be "null" if an html is set in DemoPageHtmlOrJSUrl).

PublicAPIjQueryUniqueName: it should be "null" if an html is set in DemoPageHtmlOrJSUrl.

Demo Page JSUrl, DemoPageAutoCustomizer and PublicAPIjQueryUniqueName are used for internal users.

Containers: nested elements.

Editors: define what and which properties should be designed.

Group: defines a tab where editor will be placed: Style, OrientationAndDimension, Font. See more informations here.

Type: a type of Editor:

• ColorPickerEditor (requires providing CssProperies)
• AddAnImageEditor (requires providing CssProperies)
• BackgroundEditor (already contains both ColorPicker and AddAnImage Editors)
• BorderAndRadiusEditor
• MarginEditor
• PaddingEditor
• WidthHeightEditor
• FontSelectorEditor
• FontSizeEditor
• TextOrientationEditor
• TextDecorationEditor
• BoldEditor
• ItalicEditor

Appliers: CssSelector for an element that will be customized and CssParsePriority.

EditorProperties: default values of the controls, e.g. DefaultFontSize.

Example of a simple configuration for styling background of web parts:

Copy Code

{"Title":"custom Configuration",

"ImageBase64":"data:image/png;base64,iVBORw0KGgo...",

"RootElementSelector":".ms-webpart-zone",

"DemoPageHtmlOrJSUrl":"https://sb.com/SiteAssets/CustomConfiguration.html",

"DemoPageAutoCustomizer":null,

"PublicAPIjQueryUniqueName":null,

"Containers":[{"Title":"WebPart","Editors":[{"Group":"StyleGroup","Type":"BackgroundEditor","Appliers":[{"CssSelector":".ms-webpart-zone","CssParsePriority":null}],"EditorProperties":""}]}]}

Configurable Controls

Depending on the element configuration, there are three possible groups of controls:

Style 

♦ Background

Color	Select a color from Custom Color Palette or and opacity.
	Select a color from SharePoint Color Theme  and opacity, shade, and tint properties.
Image	Select an image from Computer, SharePoint or Web Address with repeat, position and size properties.

♦ Border and Radius

Border	Select Border Sides that should be displayed and specify a style (solid, double, inset, outset, dashed, dotted, groove, or ridge), width (in px, %, pt, or em) and color (from Custom palette or SharePoint theme).
Radius	Select Radius Corners that should be rounded.

Orientation and Dimension

Margin	Specify different margin (the space around elements) for different sides of an element using separate properties.
Padding	Specify different padding (the space between the element border and the element content) for different sides of an element using separate properties.
Size	Specify the width and height of an element.

Font

Font	Select font family.
Size	Set the size of a text with pixels, em, % or pt.
Color	Select a font color using Custom Color Palette or from SharePoint Color Theme.
Orientation	Select the horizontal alignment of a text: to the left, centered, to the right or justified.
Decoration	Select text decoration: underline, overline or strikethrought.
Bold	Select font weight.
Italic	Select font style.