Mod Sapphire – Ui Skin Framework

Sapphire is a framework that allows complete regeneration of the skin layer user interface of the game by using a language similar to HTML and CSS.

Create a new skin for Sapphire

Make a new skin for Sapphire is a transition. Below is an overview of the steps necessary to create a skin:

1.2 Navigate to Skins / Emerald folder.

Copy the contents of this folder to the C: mods S.

The mods folder is a different place, depending on your operating system, here’s a list to help:

Windows – C: \ Users \ <USERNAME YOU> \ AppData \ Local \ Colossal self \ Cities_Skylines \ Addons \ mods \Linux – ~ / .local / share / Colossal Order / Cities_Skylines / Addons / ModsOSX – / users / Support Library / Application / Colossal Order / Cities_Skylines / Addons / Mods

Mods /Emerald /_SapphireSkin /skin.xmlModules /Sprites /Source /Source.cs

After stepping through the skin should be shown in the list in-game skin Sapphire.

2. Edit SapphireSkin.cs

Open Source / SapphireSkin.cs and name of your skin and describe where it says YourSkinName and YourSkinDescription.

3. Edit skin.xml

Notice about comments: You can use XML comments <! – This is a comment -> comment out the parts of your XML. Cities Skylines Mod

3.0 Open _SapphireSkin / skin.xml and edit the first line with your name and the name skin author <SapphireSkin name = “<YOUR NAME HERE DA>” author = “<YOUR NAME HERE>”>

3.1 Next define all modules of your skin by using the following syntax. Leather Module is the XML file which defines how your skin looks. You may have many of them as you want. Be sure to use the module to divide your skin ingenious easier to edit. All modules are loaded and applied in the order specified in skin.xml.

3.2 Next you will determine your skin sprites used. You only need to identify new sprites if you want to replace any of the default of the game. Sprites exist inside the atlas. You can define any number of files that you want to map. Each atlas is 2048×2048 pixels in size, so you will need to create separate atlas if you have multiple sprites. Note that each UI element can only have an atlas delivered at a time, which means the sprites used for similar components must be in the same atlas.

3.3 Determination of the color of your skin

Sapphire lets you identify colors with the name that you can use from anywhere in your skin. They are defined in skin.xml like this:

<Color><Color name = “ExampleHEXColor”> #FFFFFF </ color><Color name = “ExampleRGBColor”> 81, 97, 149, 255 </ color></ Colors>

4. Write a skin module

Note: For more information about skin text module please see references Skin modules.

Skin is the core module of your skin. They identify the user interface components and nature of your skin will change. You can modify any property of any UIComponent in the hierarchy.

5. The basic work

At this point you may be familiar with the basics but still wondering how the basic work will look like. Here is a workflow example that you can use and tweak to your liking:

For each component in the user interface that you want to re-design in several ways:

Activate the “development” of the spaces in the dashboard of Sapphire. This mode will draw the boundaries of all the UI components as well as allowing you to view the properties of a specific component by hovering over it.

6. Publish your skin

You can put your skin on Steam Workshop mod like any other code. Jump to content -> Mods in C: S and use the ‘Share’ entry of your skin in the list. Users register with your skin will automatically be able to see it in their list of da Sapphire. If you wish to update your skin, you can do it like other code mods – delete the mod folder from AppData, registered with it in the workshop and then modify it from your directory and user conferences the button ‘Update’ in the game.

Source: http://www.citiesskylinesmods.net/mod-sapphire-ui-skin-framework.html