-
9 | @foreach (var node in nodes) {
10 | var cssClasses = new List
- 18 | @if (node.Enabled) { 19 | @node.Text 20 | } else { 21 | @node.Text 22 | } 23 | @RenderNodes(node.Children) 24 | 25 | } 26 |
-
9 | @foreach (var node in nodes) {
10 | var cssClasses = new List
- 19 | @if (node.Enabled) { 20 | @node.Text 21 | } else { 22 | @node.Text 23 | } 24 | @RenderNodes(node.Children) 25 | 26 | } 27 |
-
9 | @foreach (var node in nodes) {
10 | var cssClasses = new List
-
18 | @if (node.Enabled) {
19 | 20 | @node.Text 21 | @if (node.HasChildren()) 22 | { 23 |28 | } else { 29 | @node.Text 30 | } 31 | @RenderNodes(node.Children) 32 |24 | 25 |26 | } 27 |
33 | }
34 |
-
9 | @foreach (var node in nodes) {
10 | var cssClasses = new List
-
18 | @if (node.Enabled) {
19 | 20 | @node.Text 21 | @if (node.HasChildren()) 22 | { 23 |28 | } else { 29 | @node.Text 30 | } 31 | @RenderNodes(node.Children) 32 |24 | 25 |26 | } 27 |
33 | }
34 |
-
35 | <% foreach (var language in LanguagesArray) { %>
36 | <% var lang = language.Split(':'); %>
37 | <% if (ShowLanguageSwitchForLanguage(lang[0]))
38 | { %>
39 |
- <%= lang[0].ToLower() == CultureInfo.CurrentCulture.ToString().ToLower() ? " active" : "" %>"> 40 | <%= lang[1] %> 41 | 42 | <% } %> 43 | <% } %> 44 |
2 |
3 | # DNN Skin/Theme Bootstrap4 Instant! for DNN 7, 8, 9
4 |
5 | A clean, prepared bootstrap4 skin for DNN (DotNetNuke), ready to make awesomeness - ideally combined with bootstrap content-templates.
6 |
7 | 1. This theme needs the [Invisible Container](https://github.com/2sic/dnn-container-invisible) to work, but this gets installed automatically for you when you install the theme with the installer.
8 | 1. Check out other DNN Bootstrap Skins like:
9 | 1. [DNN Bootstrap3 Single Pager](https://github.com/2sic/dnn-theme-bootstrap3-single-pager)
10 | 1. [DNN Bootster Bootstrap 4](http://www.dnnbootster.com/)
11 | 1. [nvQuickTheme Bootstrap 4](http://www.nvquicktheme.com/)
12 | 1. And it's awesome together with professional content-templates like
13 | 1. [Standard Content Blocks/Templates](https://github.com/2sic/2sxc-content-app)
14 |
15 | # Important: Check out Newer Bootstrap5 Version 🚀
16 |
17 | This repo uses Bootstrap 4 and will not be maintained any more.
18 | We strongly suggest you check out the new 👉🏽 [2shine Bootstrap5](https://github.com/2sic/dnn-theme-2shine-bs5)
19 |
20 |
21 | # The Bootstrap4 Instant Theme for DNN
22 |
23 | This theme is a layout/skin for the CMS [DNN](https://github.com/dnnsoftware/Dnn.Platform) based on [Bootstrap4](http://getbootstrap.com/) and [SASS](http://sass-lang.com/). It allows you to create simple custom designs within minutes and complex designs within a few hours. This is why it's called *instant*.
24 |
25 | ## What's in the Package
26 |
27 | 1. A clean, best-practices, responsive Bootstrap 4 Skin / Theme
28 | 1. ...based on SASS, with a set of variables-files to customize layouts in minutes
29 | 1. An e-mail encryptor to encrypt mail addresses in the layout
30 | 1. A SEO-title optimizer
31 | 1. An automatic svg/png integration for responsive logos
32 | 1. Layout footer implementing SEO microformats
33 | 1. NPM for all dependencies
34 | 1. Webpack to process the sass/typescript into the resulting CSS/Javascript
35 |
36 | ## Theme Installation
37 |
38 | There are three ways to install the initial package
39 |
40 | 1. [By downloading the _package_ and installing it through the web UI of DNN](https://azing.org/dnn-community/r/jRA6BIxn)
41 | 2. [By using `git clone` to create a copy of this repository in your _Skins_ folder](https://azing.org/dnn-community/r/dV0_C3yY)
42 | 3. [By downloading the zip and manually copying it to the _Skins_ folder](https://azing.org/dnn-community/r/0DIROnG-)
43 |
44 | You can read more about this [here](https://azing.org/dnn-community/r/xmvM_gD7).
45 |
46 | ## Customize and Redesign everything within Minutes
47 |
48 | You can now quickly customize and redesign everything within minutes. Check out the instructions [here](https://azing.org/2sxc/r/TIvm7V0H).
49 |
50 | ## Creating Awesome Designed Content
51 |
52 | You now have created the layout within minutes or hours, but you're still missing the perfectly designed inner pieces, like tile-lists, content-accordeons, galleries, sliders, blogs and more. Fortunately these are both super-easy to add and use the same mechanisms for design. They can even re-use the variables of your skin, to automatically match look and feel :)
53 |
54 | To get the awesome designed content, install [2sxc](https://github.com/2sic/2sxc/releases) and the default bootstrap4 content-templates. You can then change the SCSS in the content-templates to also point to the `_variables.scss` of this skin, and re-generate all styles for an amazingly fast development workflow.
55 |
56 | ## History
57 |
58 | * v4.20.00 2021-11-05
59 | * removed jquery
60 | * added language switch
61 | * added optional dropdown menu to main menu
62 | * v4.11.00 2021-10-22 updates npm packages
63 |
64 | ## Love from Switzerland
65 |
66 | Daniel & Tom
67 |
--------------------------------------------------------------------------------
/controls/body-css-classes.ascx:
--------------------------------------------------------------------------------
1 | <%@ Control language="C#" Inherits="System.Web.UI.UserControl" %>
2 | <%@ Import Namespace="DotNetNuke.Entities.Portals" %>
3 |
4 |
103 |
--------------------------------------------------------------------------------
/src/scss/theme.scss:
--------------------------------------------------------------------------------
1 | /* ----------------------------------------------------------------------------------------------------
2 | INFO: Here are some instructions for the "Instant Theme" that may help you
3 | https://azing.org/2sxc/l/t8U9NMGu/theme-bootstrap-4-instant
4 | ----------------------------------------------------------------------------------------------------*/
5 |
6 |
7 | // 1. Initialize Theme styles and all default Bootstrap Variables
8 | @import "variables";
9 |
10 | // ----------------------------------------------------------------------------------------------------
11 | // 2. Generate all standard Bootstrap CSS
12 | // The following bootstrap parts are used by the default setup
13 | // so we are including them here
14 | @import "../../node_modules/bootstrap/scss/root";
15 | @import "../../node_modules/bootstrap/scss/reboot";
16 | @import "../../node_modules/bootstrap/scss/type";
17 | @import "../../node_modules/bootstrap/scss/images";
18 | @import "../../node_modules/bootstrap/scss/code";
19 | @import "../../node_modules/bootstrap/scss/grid";
20 | @import "../../node_modules/bootstrap/scss/tables";
21 | @import "../../node_modules/bootstrap/scss/forms";
22 | @import "../../node_modules/bootstrap/scss/buttons";
23 | @import "../../node_modules/bootstrap/scss/nav";
24 | @import "../../node_modules/bootstrap/scss/navbar";
25 | @import "../../node_modules/bootstrap/scss/card";
26 | @import "../../node_modules/bootstrap/scss/breadcrumb";
27 | @import "../../node_modules/bootstrap/scss/pagination";
28 | @import "../../node_modules/bootstrap/scss/badge";
29 | @import "../../node_modules/bootstrap/scss/alert";
30 | @import "../../node_modules/bootstrap/scss/media";
31 | @import "../../node_modules/bootstrap/scss/list-group";
32 | @import "../../node_modules/bootstrap/scss/close";
33 | @import "../../node_modules/bootstrap/scss/utilities";
34 | @import "../../node_modules/bootstrap/scss/print";
35 | @import "../../node_modules/bootstrap/scss/button-group";
36 | @import "../../node_modules/bootstrap/scss/input-group";
37 |
38 | // The following bootstrap parts are not used by the default setup
39 | // But in case you need them, just uncommented the lines
40 | //@import "../../node_modules/bootstrap/scss/jumbotron";
41 | //@import "../../node_modules/bootstrap/scss/progress";
42 | //@import "../../node_modules/bootstrap/scss/toasts";
43 | //@import "../../node_modules/bootstrap/scss/modal";
44 | //@import "../../node_modules/bootstrap/scss/tooltip";
45 | //@import "../../node_modules/bootstrap/scss/popover";
46 | //@import "../../node_modules/bootstrap/scss/carousel";
47 | //@import "../../node_modules/bootstrap/scss/spinners";
48 | //@import "../../node_modules/bootstrap/scss/transitions";
49 | //@import "../../node_modules/bootstrap/scss/dropdown";
50 | //@import "../../node_modules/bootstrap/scss/custom-forms";
51 |
52 | // ----------------------------------------------------------------------------------------------------
53 | // 3. Generate CSS for this theme / skin
54 | @import "components/typography"; // Fonts / typography
55 | @import "components/base-layout"; // Layout styles, body, html, fluid, etc.
56 | @import "components/header"; // Header styles
57 | @import "components/footer"; // Footer styles
58 | @import "components/dnn-overrides";
59 |
60 | // Navigations / Menus
61 | @import "components/nav-desktop-main";
62 | @import "components/nav-desktop-sub";
63 | @import "components/nav-mobile";
64 | @import "components/nav-mobile-to-top";
65 |
66 | // More components
67 | @import "components/fancybox";
68 |
69 | // Other medias
70 | @import "components/print";
71 |
72 | // ----------------------------------------------------------------------------------------------------
73 | // 4. Layout Variations
74 | @import "layout-variations/layout-variation-default";
75 | @import "layout-variations/layout-variation-box";
76 | @import "layout-variations/layout-variation-wide";
77 | @import "layout-variations/layout-variation-full";
78 | @import "layout-variations/layout-variation-landingpage";
79 | @import "layout-variations/layout-header-variations";
80 |
81 |
--------------------------------------------------------------------------------
/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------------------------------------
2 | // 1. Load Bootstrap 4 Helpers
3 | @import "../../node_modules/bootstrap/scss/functions";
4 | @import "../../node_modules/bootstrap/scss/mixins";
5 |
6 |
7 | // ----------------------------------------------------------------------------------------------------
8 | // 2. Set Bootstrap Core Variables Presets
9 | // These variables should be set before we load the standard bootstrap variables
10 | // Bootstrap will keep what we set here, and only set variables we have not defined yet
11 |
12 | // 2.1 Set primary and secondary color - used all over the theme
13 | $primary: #65345c;
14 | $secondary: #6c757d;
15 |
16 | // 2.2 set Body colors
17 | $body-bg: #efefef;
18 | $body-color: #222222;
19 |
20 |
21 | // 2.3 Custom Bootstrap Instant 4 Theme variables - used in the variations of the themes */
22 | $tosic-header-background: #fff;
23 | $tosic-footer-background: $primary;
24 | $tosic-footer-color: #fff;
25 | $tosic-link-decoration: none;
26 |
27 | // ----------------------------------------------------------------------------------------------------
28 | // 3. Special CSS for specific pages
29 | // The body tag always has things like tab-xx to say what page it's on. Use these to target special CSS.
30 | // Classes you can use are:
31 | // - tab-##
32 | // - tab-is-home (this class is only added on home)
33 | // - root-tab-## the top level tab which is activated, to allow different colors across an entire section
34 | // - lang-en / lang-de etc.
35 |
36 | // Set the width of the logo specifically for the home page only
37 | // .tab-is-home {
38 | // header {
39 | // .ly-logo {
40 | // width: 250px;
41 | // }
42 | // }
43 | // }
44 |
45 |
46 | // ----------------------------------------------------------------------------------------------------
47 | // 4. Variables we often override
48 | // These are placed after the bootstrap variables import, so that things like $gray already exist
49 | // Unocmment the lines you want to change, or get more from the ../../node_modules/bootstrap/scss/variables.scss
50 |
51 | // Fonts
52 | // stylelint-disable value-keyword-case
53 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
54 | $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
55 | $font-family-base: $font-family-sans-serif;
56 | // stylelint-enable value-keyword-case
57 |
58 | // Links
59 | // Style anchor elements.
60 | // $link-color: $primary;
61 | // $link-decoration: none;
62 | // $link-hover-color: darken($link-color, 15%);
63 | // $link-hover-decoration: none;
64 |
65 | // Fonts
66 | // Font, line-height, and color for body text, headings, and more.
67 | // $font-size-base: 1rem; // Assumes the browser default, typically `16px`
68 | // $font-size-lg: ($font-size-base * 1.25);
69 | // $font-size-sm: ($font-size-base * .875);
70 |
71 | // $font-weight-light: 300;
72 | // $font-weight-normal: 400;
73 | // $font-weight-bold: 700;
74 |
75 | // $font-weight-base: $font-weight-normal;
76 | // $line-height-base: 1.42857;
77 |
78 | // $h1-font-size: $font-size-base * 2.125;
79 | // $h2-font-size: $font-size-base * 1.7;
80 | // $h3-font-size: $font-size-base * 1.25;
81 | // $h4-font-size: $font-size-base * 1.25;
82 | // $h5-font-size: $font-size-base;
83 | // $h6-font-size: $font-size-base;
84 |
85 | // $headings-font-family: inherit;
86 | // $headings-font-weight: 700;
87 | // $headings-line-height: 1.2;
88 | // $headings-color: inherit;
89 |
90 | // $display1-size: 6rem;
91 | // $display2-size: 5.5rem;
92 | // $display3-size: 4.5rem;
93 | // $display4-size: 3.5rem;
94 |
95 | // $display1-weight: 300;
96 | // $display2-weight: 300;
97 | // $display3-weight: 300;
98 | // $display4-weight: 300;
99 | // $display-line-height: $headings-line-height;
100 |
101 | // $lead-font-size: ($font-size-base * 1.25);
102 |
103 |
104 | // ----------------------------------------------------------------------------------------------------
105 | // 5. Initialize the default bootstrap variables so they are ready
106 | // Tip: In VS-Code, Ctrl+Click on the link below to open the file
107 | @import "../../node_modules/bootstrap/scss/variables";
108 |
109 |
--------------------------------------------------------------------------------
/src/scss/components/optional/_form-dnncentric.scss:
--------------------------------------------------------------------------------
1 | /*
2 | This file contains all CSS rules for the DNNCentric Contact Form
3 | */
4 |
5 | /* General field styles*/
6 | .DnnModule-DNNCentric-MultilanguageForms input[type=text],
7 | .DnnModule-DNNCentric-MultilanguageForms input[type=file],
8 | .DnnModule-DNNCentric-MultilanguageForms textarea,
9 | .DnnModule-DNNCentric-MultilanguageForms select {
10 | font-size: 13px;
11 | color: #46535b !important;
12 | width: 100% !important;
13 | }
14 |
15 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_dtEF'] {
16 | width: 100% !important;
17 | max-width: 600px;
18 | }
19 |
20 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_dtEF']>tbody>tr>td {
21 | padding-bottom: 10px;
22 | padding-right: 10px;
23 | }
24 |
25 | .DnnModule-DNNCentric-MultilanguageForms input[type='text'],
26 | .DnnModule-DNNCentric-MultilanguageForms input[type='file'],
27 | .DnnModule-DNNCentric-MultilanguageForms textarea {
28 | background: #E2E2E2;
29 | border: 0px solid;
30 | resize: none;
31 | padding: 5px;
32 | color: inherit !important;
33 | font: inherit !important;
34 | }
35 |
36 | .DnnModule-DNNCentric-MultilanguageForms textarea {
37 | display: block;
38 | }
39 |
40 | .DnnModule-DNNCentric-MultilanguageForms select {
41 | background: #E2E2E2;
42 | border: 0;
43 | padding: 5px;
44 | }
45 |
46 | .DnnModule-DNNCentric-MultilanguageForms input.EML_FieldError[type='text'],
47 | .DnnModule-DNNCentric-MultilanguageForms input.EML_FieldError[type='file'],
48 | .DnnModule-DNNCentric-MultilanguageForms .EML_FieldError {
49 | background: #ffbbba;
50 | }
51 |
52 | /* Checkbox / Radio Buttons */
53 | .DnnModule-DNNCentric-MultilanguageForms .CFC_NormalTextBox1,
54 | .DnnModule-DNNCentric-MultilanguageForms .EML_FieldError {
55 | width: 100% !important;
56 | color: inherit !important;
57 | font: inherit !important;
58 | font-weight: normal;
59 | }
60 |
61 | .DnnModule-DNNCentric-MultilanguageForms .CFC_NormalTextBox1 td,
62 | .DnnModule-DNNCentric-MultilanguageForms .EML_FieldError td {
63 | padding-bottom: 3px;
64 | }
65 |
66 | .DnnModule-DNNCentric-MultilanguageForms .CFC_NormalTextBox1 label,
67 | .DnnModule-DNNCentric-MultilanguageForms .EML_FieldError label {
68 | font-weight: normal;
69 | margin-left: 3px;
70 | display: inline;
71 | }
72 |
73 | .DnnModule-DNNCentric-MultilanguageForms input[type="checkbox"],
74 | .DnnModule-DNNCentric-MultilanguageForms input[type="radio"] {
75 | position: relative;
76 | top: 2px;
77 | }
78 |
79 | .DnnModule-DNNCentric-MultilanguageForms [id$='_dcc_rdl_RadiobuttonList'] input,
80 | .DnnModule-DNNCentric-MultilanguageForms [id$='_dcc_chklst_CheckboxListVertical'] input {
81 | float: left;
82 | }
83 |
84 | .DnnModule-DNNCentric-MultilanguageForms [id$='_dcc_rdl_RadiobuttonList'] label,
85 | .DnnModule-DNNCentric-MultilanguageForms [id$='_dcc_chklst_CheckboxListVertical'] label {
86 | display: block;
87 | line-height: 1.3em;
88 | margin-left: 19px;
89 | margin-bottom: 2px;
90 | }
91 |
92 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_dtEF']>tbody>tr>td.DCC_EF_FieldCaptionStyle {
93 | padding: 4px 20px 0 0 !important;
94 | vertical-align: top;
95 | }
96 |
97 | td.DCC_EF_FieldCaptionStyle,
98 | .DCC_EF_FieldCaptionStyle label {
99 | color: inherit !important;
100 | font: inherit !important;
101 | font-weight: normal;
102 | }
103 |
104 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_tcSubmit'] .CommandButton,
105 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_tcSubmit'] .btnSubmit {
106 | background: #3067b4;
107 | padding: 7px 14px;
108 | color: #ffffff;
109 | margin-top: 5px;
110 | display: inline-block;
111 | border-radius: 5px;
112 | text-decoration: none;
113 | }
114 |
115 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_tcSubmit'] .CommandButton:hover,
116 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_tcSubmit'] .btnSubmit:hover {
117 | background: #3067b4;
118 | color: #ffffff;
119 | text-decoration: none;
120 | }
121 |
122 | .DnnModule-DNNCentric-MultilanguageForms .MyCategory {
123 | padding-top: 20px;
124 | }
125 |
126 | /* Error Messages */
127 | .DnnModule-DNNCentric-MultilanguageForms img[src="/DesktopModules/DNNCentric-MultilanguageForms/Images/Alert.png"] {
128 | filter: grayscale(.4);
129 | -webkit-filter: grayscale(.4);
130 | -moz-filter: grayscale(.4);
131 | -ms-filter: grayscale(.4);
132 | -o-filter: grayscale(.4);
133 | }
134 |
135 | .tdErrorMsg,
136 | .EML_FieldError,
137 | .tableErrorMsg {
138 | border: none;
139 | background: transparent;
140 | color: inherit;
141 | padding: 0;
142 | font: inherit !important;
143 | }
144 |
145 | .tdErrorMsg {
146 | display: block;
147 | color: #AF1616;
148 | background-color: #ffbbba;
149 | padding: 15px;
150 | margin-bottom: 20px;
151 | }
152 |
153 | .tdErrorMsg ul,
154 | .tdErrorMsg ul li {
155 | padding: 0 !important;
156 | margin: 0 !important;
157 | list-style: none;
158 | color: inherit !important;
159 | font: inherit !important;
160 | font-weight: normal;
161 | }
162 |
163 | .tableErrorMsg {
164 | float: left;
165 | margin: 25px 0 15px 0;
166 | }
167 |
168 | /* Required-* */
169 | .co-reqfield {
170 | color: #AF1616;
171 | }
172 |
173 |
174 | /* Screen width: 767 and below */
175 | @media screen and (max-width: 767px) {
176 |
177 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_dtEF'] {
178 | max-width: 400px;
179 | table-layout: fixed;
180 | }
181 |
182 | .DnnModule-DNNCentric-MultilanguageForms [id$='_ViewEmailForm_dtEF']>tbody>tr>td {
183 | display: block;
184 | width: auto !important;
185 | }
186 |
187 | }
--------------------------------------------------------------------------------
/images/landingpage/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
69 |
--------------------------------------------------------------------------------
/dist/theme.min.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";var t={126:(t,e,o)=>{var n,r,i;o.r(e),o.d(e,{hide:()=>u,show:()=>p,toggle:()=>g}),function(t){t.parseOrElse=function(t,e){return void 0===e&&(e="0"),t?parseInt(t):e&&"string"==typeof e?parseInt(e):0}}(n||(n={})),function(t){var e=function(t){return t instanceof HTMLElement};t.setStyles=function(t,e){Object.keys(e).map((function(o){t.style[o]=e[o]}))},t.getBoxStyles=function(t){var e=window.getComputedStyle(t);return{height:n.parseOrElse(e.height),padding:{top:n.parseOrElse(e.paddingTop),bottom:n.parseOrElse(e.paddingBottom)},border:{top:n.parseOrElse(e.borderTopWidth),bottom:n.parseOrElse(e.borderBottomWidth)}}},t.getElement=function(t){if(e(t))return t;var o=document.querySelector(t);if(e(o))return o;throw new Error("Your element does not exist in the DOM.")},t.setAttribute=function(t,e,o){t.setAttribute(e,o)},t.getAttribute=function(t,e){return t.getAttribute(e)}}(r||(r={})),function(t){t.on=function(t,e,o){return t.addEventListener(e,o),{destroy:function(){return t&&t.removeEventListener(e,o)}}}}(i||(i={}));var d,a,l=function(t,e){var o={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r
32 |
33 |
62 |
63 |
73 |
74 |
75 |
101 |
102 |
103 |
104 |
34 |
35 | 
36 |
37 |
60 |
61 |
36 |
37 |
60 |
33 |
34 |
64 |
65 |
96 |
122 |
123 |
124 |
125 |
35 |
36 | 
37 |
38 |
51 |
58 |
62 |
63 |
37 |
38 |
51 |
58 |
62 | ">
66 |
70 |
71 |
94 |
95 |
67 |
68 |
69 |