Hide

YetaWF Documentation

Display
Print

CSS Addons

CSS files are used throughout YetaWF to style components, modules and pages. These files are typically part of a package. Skin-specific CSS files are part of the skin package. Component-specific CSS files are part of the package implementing the component. Modules-specific CSS files are used to style modules, without any skin dependencies. At run-time all the various CSS files are combined to style the resulting page.

YetaWF supports CSS and SCSS files. CSS files are regular CSS files and SCSS files are used by SASS (Syntactically Awesome StyleSheets). Documentation for SASS can be found at http://sass-lang.com/documentation/file.SASS_REFERENCE.html

When running a YetaWF debug build, each CSS file is explicitly included in the page. Release builds bundle all CSS/SCSS files into one file for more efficient downloads (excluding some large global addons). This behavior can be changed using Admin > Settings > Site Settings, Pages tab. CSS/SCSS are automatically included if they are used by components, modules or packages.

Modifications

Unless you are developing a module, component or skin, do not modify any of the CSS/SCSS files that are part of YetaWF or its packages. Otherwise, the next time you're upgrading, all changes will be lost.

Instead you can add a Custom.css or Custom.scss file to your site at the following locations:

./Website/wwwroot/AddonsCustom/domain.com/skincompany/skinproduct/_Skins/skinname/
./Website/wwwroot/AddonsCustom/domain.com/

The first location is for skin-specific CSS that is only injected if that specific skin is used. The second file location is for general CSS that is always injected for the specified domain. Both can be used at the same time.

Domain.com is your domain name, skincompany and skinproduct is the name and product respectively of the company that provided the skin for your site, skinname is the name of the skin used by your site.

Custom.css Example

./Website/AddonsCustom/demo.YetaWF.com/YetaWF/BootstrapSample/_Skins/BootstrapSkin

Locations

All paths shown are relative to the solution folder (not the website folder). The website has symbolic links into each package so there are no duplicated files. The following can be used to locate a project folder within the website:

./Website/Addons/company/package is the location of the package (symbolic link into the project), equivalent to the package folder ../package/Addons/. company represents the company that published the package. For example, the Feedback package published with YetaWF is located at ./Website/Addons/YetaWF/Feedback which links to the module project files at ./YetaWF/Feedback/Addons/.

CSS Filespackage folder/Addons/..Comment
Package CSS Files./Addons/_Main/Each CSS or SCSS file used by a package must be listed in the file filelistCSS.txt found at the path shown. Whenever the package is used, all required files are automatically included in the resulting page.
Module CSS Files./Addons/_Addons/(moduleclassname)/Each CSS file used by a specific module must be listed in the file filelistCSS.txt found at the path shown. Whenever the module is used, all required files are automatically included in the resulting page. For example, the MenuEditModule module would have all its CSS files in the folder ./Addons/_Addons/MenuEditModule/.
Named Addon CSS Files./Addons/_Addons/(addonname)/This is the same folder that is used for Module CSS Files, so care should be taken to avoid naming conflicts. Each named addon folder contains a filelistCSS.txt file with directives defining what CSS files are included, whenever this named addon is added to the page (YetaWF.Core.Addons.AddOnManager.AddAddOnNamedAsync).
Component CSS Files./Addons/_Templates/(component)/Each CSS file used by a component must be listed in the file filelistJS.txt found at the path shown. Whenever the component is used, all required files are automatically included in the resulting page.
Components are implemented in Module Packages only.
The (component) name uses the short component name only. For example, the YetaWF_Blog_Category component used as UIHint("YetaWF_Blog_Category") would have its CSS files in the folder ./Addons/_Components/Category/ (The company and product portion is omitted).
Skin CSS Files./Addons/_Skins/(skin)/Each CSS or SCSS file used by a skin must be listed in the file filelistCSS.txt found at the path shown. Whenever the skin is used, all required files are automatically included in the resulting page.
Skins are implemented in skin packages only.

When a page is rendered, YetaWF automatically combines all the necessary CSS files and with CSS bundling used on deployed site, creates one single final CSS file for all package, module, component and skin CSS files.

Each CSS or SCSS file used by a skin must be listed in the file filelistCSS.txt found at the path shown. These are automatically included in the resulting page.

filelistCSS.txt

Explicit Files

In the folders shown above, the file filelistCSS.txt lists all CSS/SCSS files to be included. Each line contains one single file name (relative to the current folder, subfolders are allowed, but not wildcards) or a completely qualified reference to an external file (http://, https:// or //).

https://www.yetawf.com/external/sample.css
Local.small.css,nobundle
sample1.css
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,CDN
/lib/bootstrap/less/bootstrap.less,noCDN

The following comma separated arguments are supported (on local files only):

nominifyThe file is never minified.
bundleThe file is bundled (this is used by Core components only, for global addons which should be bundled if CSS bundling is enabled).
nobundleThe file is never bundled, even if it would normally be made part of a bundle (this is used by Core components only).
cdnThe file is only added if "Use CDN (Javascript Addons)" (Site Settings, CDN tab) is enabled, which means CDNs are used for all major Javascript packages used by YetaWF.
nocdnThe file is only added if "Use CDN (Javascript Addons)" (Site Settings, CDN tab) is not enabled, which means CDNs are not used for major Javascript packages used by YetaWF.
allowCustomIf specified, the named file can be overridden with a custom file in the ./AddonsCustom folder.

Uses Directive

A line can contain the Uses directive.

Uses {packagename},{namedaddon}
Uses YetaWF_Core,getbootstrap.com.bootstrap-less

The Uses directive allows another package's named addons to be included. Multiple Uses directives can be used. All included package named addons are included ahead of explicitly listed files, even if they appear before the Uses directive.