Hide

YetaWF Documentation

Display
Print

Create A New Skin

YetaWF includes Visual Studio templates for many common tasks, such as creating a new Bootstrap skin, and it also includes a few predefined skins to get you started.

Skins are contained within packages, so a new project has to be created first representing the new package. Then the project is ready to add a skin module, which can be further customized.

The following walk-through creates a new project for the package and adds a new skin. Please follow the steps carefully as the physical location of the project files is extremely important. At the end of these steps you'll have a new skin which you can enable in your YetaWF site and add further customizations using Css and Javascript. The skin generated by the Visual Studio template supports all features of YetaWF including static pages and Unified Page Sets, based on Bootstrap.

New Project

Any new package you create is represented by a project. So first a new project has to be created (i.e., a package) which will hold your skin. Such a package can be used for multiple skins. This means you could include multiple related skins within one package.

Add Solution Folder

With the YetaWF solution opened in Visual Studio, locate the Skins solution folder shown below:

Skins Solution Folder

You'll need to create a solution folder beneath the Skins solution folder. This folder will hold this new project and all additional skin projects you may create in the future.

Right-click on the Skins solution folder and select Add > New Solution Folder.

It is important to use the solution folder structure and the physical file structure shown here as YetaWF requires projects to be in specific locations ("Convention over Configuration").

Add > New Solution Folder

Name the new solution folder, typically your company name would be used here. In this example, we'll call the folder "MyStuff".

MyStuff Solution Folder

Add New Project

Now that your skin solution folder has been created, a new project can be added beneath it.

Right-click on the "MyStuff" folder and select Add > New Project...

Add > New Project...

This will display Visual Studio's Add New Project dialog. Locate the YetaWF templates by selecting Installed > Visual C# > YetaWF.com and make sure to select the correct .NET Framework so the templates are show.

Select the YetaWF project.

Before clicking the OK button, you must select the proper location for your project and enter a project name. The ./Skins folder already exists, but you must create the "MyStuff" folder (or the name you used for the solution folder in the steps above).

In this example, the project is named "FirstSkin".

It is important to use the solution folder structure and the physical file structure shown here as YetaWF requires projects to be in specific locations ("Convention over Configuration").

Add New Project

Once you click the OK button, the New Project template dialog is shown.

New Project Template

Enter your company name and company Url. These are used for some of the generated code.

Once you click the OK button, the new project is added, code files for the project are generated and a reference to your new project is added to the Website project.

New Project Complete

New Item (Skin)

Now that you have a project, you can create modules or skins. In this example, we create a new Bootstrap Skin.

Locate your new project ("FirstSkin" in this example), right-click on the project name and select Add > New Item...

Add New Item

This will display Visual Studio's Add New Item dialog. Locate the YetaWF templates by selecting Installed > Visual C# > YetaWF.com and select the entry "YetaWF BootstrapSkin". A name for the new item is not needed. Click the Add button to add the new skin.

Add New Item - YetaWF BootstrapSkin

The template requires a name for the new skin. This name is used as the actual skin name. In this example we'll use "FirstBootstrapSkin".

Skin Name

Once you click the OK button, all files are added to the project and your skin has been created.

Completed Skin Project

Build & Run

This completes creating the new skin. You can now build the solution and start your YetaWF site.

Once your site is up and running, access the Site Settings (Admin > Settings > Site Settings, standard YetaWF site) and click on the Skins tab.

Site Settings

The Skin Collection dropdown lists will now show your new skin "FirstBootstrapSkin (MyStuff)". You can change the Default Page Skin and the Default Popup Skin to your new skin. Make sure to select "Default" (page Skin Name) and "Popup (Default)" (popup Skin Name). Once you save the new settings, the entire site will use your new skin. While it needs a some Css changes to make it yours, you have a complete, customizable Bootstrap-based skin.

Site With Your Skin

Cleanup

The project created in this example can contain both modules and skins. Usually, skins should be contained in their on Skin Module package. In order to change your package to a "Skin Only" package, make the following change to the project's AssemblyInfo.cs file (Properties folder) by changing the Package() attribute from PackageTypeEnum.Module to PackageTypeEnum.Skin.

Skin Only

Project Layout

There are a number of generated files for your skin. The project has the following layout:

Project
    Properties
        AssemblyInfo.cs
            package definition
    Addons
        _Main
            Css and Javascript automatically included when the package is used (see Css Addons and Javascript Addons)
        _Skins
            (skinname)
                css
                fonts
                js
                    folders containing Bootstrap files
                Icons
                    required icons, names predefined by YetaWF
                Pages
                    *.cshtml files used to render pages (excluding popups) - The Skin.txt file defines their names and usage
                Popups
                    *.cshtml files used to render pages (popups only) - The Skin.txt file defines their names and usage
                filelistCSS.txt
                    defines all the Css files that are automatically included when this skin is used (see Css Addons)
                filelistJS.txt
                    defines all the Javascript files that are automatically included when this skin is used (see Javascript Addons)
                Skin.txt - Provides skin information
                other files
                    skin-specific files
    Startup
        AreaRegistration.cs
            package registration
        Info.cs
            client-side configuration and localization (see TODO:)

You'll notice that there are no views or layout files. These are not used by YetaWF.