Login
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 Single Page Applications, based on Bootstrap.
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.
With the YetaWF solution opened in Visual Studio, locate the Skins solution folder shown below:
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").
Name the new solution folder, typically your company name would be used here. In this example, we'll call the folder "MyStuff".
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...
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").
Once you click the OK button, the New Project template dialog is shown.
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.
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...
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.
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".
Once you click the OK button, all files are added to the project and your skin has been created.
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.
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.
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.
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.
On
Off