{"id":5031,"date":"2015-08-28T11:37:15","date_gmt":"2015-08-28T10:37:15","guid":{"rendered":"https:\/\/help.instantatlas.com\/dashboard-builder-desktop\/desktop-user-guide\/the-instantatlas-style-editor\/the-style-editor-interface\/"},"modified":"2020-11-25T15:09:10","modified_gmt":"2020-11-25T15:09:10","slug":"the-style-editor-interface","status":"publish","type":"page","link":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/desktop-user-guide\/the-instantatlas-style-editor\/the-style-editor-interface\/","title":{"rendered":"The Style Editor Interface"},"content":{"rendered":"

The Style Editor interface consists of menus, a toolbar and two panes.<\/p>\n

\"\"<\/a><\/p>\n

The Menus and Toolbar<\/span><\/h2>\n

The menus and toolbar give you easy access to the Style Editor options. You can access a menu by clicking on it or holding down \u2018Alt\u2019 on your keyboard and pressing the underlined character in the menu name. For example, you can hold down \u2018Alt\u2019 and press \u2018F\u2019 to access the \u2018File\u2019 menu. If you hold your mouse pointer over an option in any of the drop down menus, a tooltip will appear. Similarly, if you hold your mouse pointer over an icon in the toolbar, a tooltip will appear. Note that if you open the Style Editor independently of the Designer, the \u2018Apply\u2019 option (first icon in the toolbar) will be greyed out \u2013 this is normal as \u2018Apply\u2019 is only relevant if you have opened the Style Editor from the Designer.<\/p>\n

File<\/h3>\n

Open<\/strong>
\nClick \u2018Open\u2019 and the \u2018Open styles file…\u2019 dialog will appear. Alternatively hold down \u2018Ctrl\u2019 and press \u2018O\u2019 on your keyboard. Choose the style sheet (called \u2018default.css\u2019) for the report you wish to change and click \u2018Open\u2019.<\/p>\n

\"\"<\/a><\/p>\n

You will be warned if there is a problem with the style sheet you are trying to open and given the option to display a log file. E-mail the contents of the log file to your support provider.<\/p>\n

Save<\/strong>
\nClick \u2018Save\u2019 to save changes to the open style sheet. Alternatively hold down \u2018Ctrl\u2019 and press \u2018S\u2019 on your keyboard. When restarted, the dynamic report will reflect any changes that you have made to the style sheet.<\/p>\n

Save As<\/strong>
\nClick \u2018Save As\u2019 if you wish to save your changes to a new style sheet. Alternatively hold down \u2018Ctrl\u2019 and \u2018Shift\u2019 and press \u2018S\u2019 on your keyboard. The \u2018Save styles as…\u2019 dialog will open. Browse to the folder in which you wish to save your new style sheet, type a name in the \u2018File name\u2019 box and click \u2018Save\u2019.<\/p>\n

\"\"<\/a><\/p>\n

This option is useful if you wish to save different style sheets for a report. Simply save the different style sheets to the report\u2019s folder with names such as \u2018default1.css\u2019, \u2018default2.css\u2019, \u2018default3.css\u2019, etc. Once you have saved these files, you simply choose which one is active by renaming it \u2018default.css\u2019. This is because by default an InstantAtlas report looks for a style sheet in its folder called \u2018default.css\u2019 and will ignore any others.<\/p>\n

Apply<\/strong>
\nThis option is only available if you opened the Style Editor from the Publisher (via the Designer). Click \u2018Apply\u2019 when you have made all of your style changes. The changes will be applied to the style sheet of the report you are publishing and the Style Editor will close.<\/p>\n

Exit<\/strong>
\nClick \u2018Exit\u2019 to close the Style Editor. If you have not saved your changes, you will be prompted to do so.<\/p>\n

Edit<\/h3>\n

Undo<\/strong>
\nClick \u2018Undo\u2019 to undo changes that you make to the style sheet. Alternatively hold down \u2018Ctrl\u2019 and press \u2018Z\u2019 on your keyboard. Most changes can be undone in this way. You can click \u2018Undo\u2019 multiple times in a row to undo a series of changes. This option will be greyed out if there are no changes to undo.<\/p>\n

Redo<\/strong>
\nClick \u2018Redo\u2019 to reapply any changes that you have undone by clicking \u2018Undo\u2019. Alternatively hold down \u2018Ctrl\u2019 and press \u2018Y\u2019 on your keyboard. You can click \u2018Redo\u2019 multiple times in a row to reapply a series of changes. This option will be greyed out if there are no changes to reapply.<\/p>\n

Help<\/h3>\n

Help on the Style Editor<\/strong>
\nClick \u2018Help on the Style Editor\u2019 to access the help pages for the Style Editor.<\/p>\n

About<\/strong>
\nClick \u2018About\u2019 to open the InstantAtlas \u2018About\u2019 window. It contains information regarding your Style Editor application, including the version number and the location of your licence file.<\/p>\n

\"\"<\/a><\/p>\n

There are also three buttons linking to additional information. The \u2018Legal\u2019 button links to the InstantAtlas End-User Licence Agreement. The \u2018Licence\u2019 button links to \u2018Licence File Information\u2019, from which you can also upload a new licence file. The \u2018Templates\u2019 button links to an overview of available templates and also allows new templates to be uploaded.<\/p>\n

Find and Replace<\/h3>\n

Global Property Change tool<\/strong>
\nClick \u2018Find and Replace unique values within this style sheet\u2019 tool to access the property find and replace dialog. This button is found on the right end of the main toolbar found at the top of the Style Editor.<\/p>\n

\"\"<\/a><\/p>\n

Within the \u2018Choose Property…\u2019 dialog, select the property which you would like to globally replace and click OK.<\/p>\n

\"\"<\/a><\/p>\n

If for example \u2018border-color\u2019 is chosen, this will produce the dialog in the screen shot below. Click the colour box within the \u2018New\u2019 column. This will open a dialog where you can change the border colour globally throughout the style sheet.<\/p>\n

\"\"<\/a><\/p>\n

For example if the current light grey border colour property was to be changed to red, click the \u2018New\u2019 light grey box which will open the \u2018Pick a colour…\u2019 dialog. You can use any of the available tabs (Swatches, HSV, HSL, RGB, CMYK or C Colours) to pick a colour. Recent colours used will be displayed on the right.<\/p>\n

\"\"<\/a><\/p>\n

Click \u2018OK\u2019 in the \u2018Replace…\u2019 dialog and the new colour (e.g. red) will be applied to all border colour properties which had the original colour (e.g. light grey).<\/p>\n

\"\"<\/a><\/p>\n

The \u2018Classes\u2019 Pane<\/span><\/h2>\n

The \u2018Classes\u2019 pane lists the style classes and elements available in the open style sheet. Click on a class to select it.<\/p>\n

\"\"<\/a><\/p>\n

A description for each style class is displayed at the top of the \u2018Properties\u2019 pane.<\/p>\n

You can drag the right hand border of the pane if you wish to make the \u2018Classes\u2019 pane wider. There are two icons at the bottom of the \u2018Classes\u2019 pane. The icon on the left allows you to add a new class or element. If you click it, the \u2018Create a new style selector\u2019 dialog will appear.<\/p>\n

\"\"<\/a><\/p>\n

For example, you may have inserted a number of custom text components into your report using the Designer and wish them to be styled the same way. If there is not an existing style that is suitable, you could use the Style Editor to add a new class and create properties for it such as \u2018font-family\u2019, \u2018font-size\u2019 and \u2018color\u2019. You would then ensure your custom text components use the new class by editing the properties for the text component in the Designer (\u2018Styles\u2019 tab, de-select the custom style and choose your new class from the drop down list).<\/p>\n

The icon on the right allows you to remove the selected class or element. You can also access these options by right clicking on a style class in the list. You should not delete any of the default classes unless you are absolutely sure they will not be required otherwise you risk breaking your report.<\/p>\n

The \u2018Properties\u2019 Pane<\/span><\/h2>\n

The \u2018Properties\u2019 pane displays the properties for the style class highlighted in the \u2018Classes\u2019 pane, the name of which is displayed at the very top of the panel.<\/p>\n

\"\"<\/a><\/p>\n

Just below the name of the selected class you can see a description for that class. Below the description is a button that enables you to edit the description. Click the button to open the \u2018Edit Description\u2019 dialog.<\/p>\n

\"\"<\/a><\/p>\n

Type your new description and click the \u2018OK\u2019 button complete the change.<\/p>\n

Properties and their values are listed below. You edit an existing value simply by clicking the cell containing the value. There are three icons in the bottom right corner of the \u2018Properties\u2019 pane. The leftmost icon is used to add a new property. Click it to open the \u2018Add style property\u2019 dialog.<\/p>\n

\"\"<\/a><\/p>\n

Click a property and click \u2018OK\u2019.<\/p>\n

The middle icon is used to delete the selected property. The rightmost icon was used to link to the description of\u00a0 a selected property for our historical SVG templates and is now always disabled.<\/p>\n

If you click a colour property the \u2018Pick a colour…\u2019 dialog will open. You can use any of the available tabs (Swatches, HSV, HSL, RGB, CMYK or W3C Colours) to pick a colour. Recent colours used will be displayed on the right.<\/p>\n

\"\"<\/a><\/p>\n

To change the font for text, simply click in the box containing the value for font-family. This will open the \u2018Edit Font Families…\u2019 dialog. Choose a Font Family then click OK. If you wish to use a font family that is not available by default you can add another font family using the add button or you can change a currently available font family by double clicking the font family name and selecting the font of your choice.<\/p>\n

\"\"<\/a><\/p>\n

The order of these fonts can be changed by selecting one and clicking the up or down buttons. The order is the order in which the end-user will be able to view the fonts. For example, if the end-user is viewing a dynamic report and they do not have Arial or Verdana available on their computer then the text will show in the font Sans Serif.<\/p>\n

When changing the value for font-size you can use the up\/down arrows that appear or you can type in a new number and press the \u2018Enter\u2019 button on your keyboard.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Style Editor interface consists of menus, a toolbar and two panes. The Menus and Toolbar The menus and toolbar give you easy access to the Style Editor options. You can access a menu by clicking on it or holding down \u2018Alt\u2019 on your keyboard and pressing the underlined character in the menu name. For … Continue reading The Style Editor Interface<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":4981,"menu_order":1,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-5031","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/5031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/comments?post=5031"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/5031\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/4981"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/media?parent=5031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}