Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

FAQs

Jump to bottom
Chris Lusk edited this page Mar 4, 2019 · 4 revisions

How to add a new layout template?

Add the new file at the root of the skin folder (e.g., Contact.ascx). It's easiest to duplicate Main.ascx so you have the required include directives and base markup.

See the Skins/CLIENT_CODE docs for more information.

How to add a new container?

If you need a container that also has its own stylesheet:

  1. Add an .ascx file with the required elements to the client's container folder (e.g., Portals/_default/Containers/CLIENT_CODE).
  2. Add an .scss file with the same name to Skins/CLIENT_CODE/src/scss/Containers.

If you only need a container and do not need a stylesheet, ignore step two.

See the Portals/_default/Containers docs for more information about container templates. See the src/scss/Containers docs for more information about container stylesheets.

How to edit site-wide styles?

It depends.

Site-wide styles are anything that ends up in Skin.css, and those Sass files are found in the src/scss directory. Check src/scss/Skin.scss to see which partials are being imported.

However, most everything you will need is found in _abstracts/_variables.scss and _base/_content.scss.

When changing global styles, always prefer to modify variables first. This helps because both the Bootstrap source and our custom styles inherit these changes.

Content styles are targeting any content that ends up inside a DNN module. See the comments in _content.scss for more information.

See the src/scss docs for more information about Sass, our integration with Bootstrap, and how the skin stylesheets are built.

How to add a font site/theme-wide?

Step 1

If you are including a font API (e.g., Google Fonts, Typekit)

Add a new DnnCssInclude tag in includes/_preheader.ascx. Example:

<dnn:DnnCssInclude
  FilePath="URL_TO_YOUR_FILE_HERE"
  Priority="1"
  runat="server"
/>

If you are including the font files in the skin

  1. Add the font files to the src/fonts directory.
  2. Uncomment the code in src/scss/_base/_fonts.scss and update.
  3. Verify that @import "_base/fonts" is active in Skin.scss.

Step 2

If you are setting this new font as your global serif or sans-serif font, modify one of the initial Typography variables in _variables.scss so that it is inherited by the applied Typography variables.

Otherwise, let's say you want to add an alternative sans-serif font. Follow these steps:

  1. Create a $asl--font-family-sans-serif-alt variable in the initial Typography section.
  2. Create a $font-family-sans-serif-alt variable in the applied Typography section

Then you can add/modify CSS classes with font-family: $font-family-sans-serif-alt wherever you need.

See the comments in _variables.scss for more information about what we mean by initial variables vs. applied variables.

How to add another font for one layout template only?

Refer to the "Step 1" instructions from above. The differences:

  • If you are including a font API, add the DnnCssInclude tag to the specific layout template — not to _preheader.ascx.

  • If you are including the font files in the skin, add the @import "_base/fonts" to the specific layout stylesheet — not to Skin.scss.

How to add one or more panes to a layout template?

  1. Copy the "ContentPane" found in Main.ascx and update.
  2. Make sure the id and data-name attributes are the same name.

See the Skins/CLIENT_CODE docs for more information about panes.

Clone this wiki locally