Formatting with CSS
Elements within the Skin Editor can have CSS styles applied to them. For instance, you can create rounded borders for a map element and format text in text fields. You can either create an external CSS file or add it directly to the Embedded Stylesheet in the Skin Editor.
To apply CSS formatting, you can either use an external CSS file or edit the Embedded Stylesheet.
Add a Custom Font to a Text Field
In the Skin Editor:
-
Open the skin properties. (You may need to click in the canvas.)
-
Find the External Files pane.
-
Double-click in the table to add the file.
-
Add the URL of the font in the URL column. For example,
https://fonts.googleapis.com/css?family=QuicksandIf you’re using an external, local file, you would add its file path. -
Edit the Embedded Stylesheet by clicking the edit button.
-
Amend the stylesheet to include the new class and styles:
.ggskin.title { font-family: 'Quicksand', sans-serif; font-size: 20px;}. Title is the class. -
Select the Text Field.
-
Open the Advanced pane.
-
Add
titleto the CSS Classes field. -
Check the style with Live Preview.
Using CSS Styles
CSS styles can be added to skin elements.
For example, to round the corners of a Map element:
-
Add a Map element to the canvas.
-
Add the border property to the CSS styles field in the Advanced panel:
border-radius: 10px; -
Expand on that by adding more properties inline:
border-radius: 5px; border-style: solid; border-width: 5px; border-color: #0080ff
If CSS classes have also been added, then the styles here would override the styles defined in the class.
✭ Styles will not be visible in the Canvas but can be previewed in the Live Preview.
Formatting Text with CSS Classes
In a skin you may wish to have a little more freedom in styling tooltips, labels, popup texts. This freedom can be achieved using CSS.
Just the name of the class or style needs to be added. Do not include the period, .. Multiple classes can be added to the fields, separated by spaces.
✭ Classes will not be visible in the Canvas or Preview.