customize and redesign
To start you'll usually want to decide if your background will be full-width or more centered. To see the difference you can try our live demo - click on the floating gear to the side. Some changes only work if you also hit the green save button (Speichern / neu laden).
To set this on your layout, just change the CSS-class in the <body> tag in the skin. Since DNN itself manages the body-tag, you'll have to set it in the helper control, found this file: controls/body-css-classes.ascx. You'll see where to adjust it.
The menu-positions also have 3 typical scenarios already prepared for you. Experiment with it on the live demo and apply the desired setting with the CSS class in the <body> tag, again in the controls/body-css-classes.ascx file.
For further customizations you'll now need to start the SASS compiler which will re-generate the entire CSS whenever you make changes. Before you do this, install the dev-tools and dependencies as explained in installation. Then run this from your skin folder:
gulp
This will now watch all your source files and re-build all the CSS whenever you save something. So keep this command-window open, this is where the work happens. It will also show you error messages if your SASS is incorrect.
This is the most basic customization you can do, but for cost-sensitive projects it's all you need to do. By simply changing the file src/_variables.scss. For example, change the bootstrap-purple to a 2sic-blue by changing:
$brand-primary: #5C4483 !default;to
$brand-primary: #0088F4 !default;Now replace the images/logo.png and images/logo.svg with your logo files, and everything's done!
You will usually want to make these two changes:
- Replace the hover-text for the logo
- Replace footer items like address, name, e-mail etc. - ideally keeping the RDF-Microformats
If you have more budget than just 15 minutes, these are usually the next basics we change in src/_variables.scss:
- Change the serif and sans serif font familys
- Change the font sizes and how they get calculated
- Change the headings font family, weight etc
- Change colors for active and hover states and many more options…