A custom DNN theme designed and developed for the ________.
3 |
4 |
Release History
5 |
6 |
7 |
8 |
Version 1.0.0
9 |
10 |
Initial Release
11 |
12 |
--------------------------------------------------------------------------------
/docs/Add-Custom-Theme-License.md:
--------------------------------------------------------------------------------
1 | ## Add Custom Theme License
2 | As of Version 2.0.0 of **nvQuickTheme**, a new file is located in the root (`./`) folder of the project and is named `themeLicense.txt`. You can place a license within this file and the contents will automatically be displayed during the appropriate installation step within DNN using the project's output theme package.
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/help-and-other-questions.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Help and Other Questions
3 | about: Ask for help or others questions re. using the solution
4 |
5 | ---
6 |
7 | ## Please summarize your question in one sentence
8 |
9 |
10 | ## Give a more extended description
11 |
12 |
13 | ## Steps to reproduce (if needed)
14 |
15 |
16 | ## Other comments or remarks
17 |
--------------------------------------------------------------------------------
/docs/Add-Custom-Theme-Release-Notes.md:
--------------------------------------------------------------------------------
1 | ## Add Custom Theme Release Notes
2 | As of Version 2.0.0 of **nvQuickTheme**, a new file is located in the root (`./`) folder of the project and is named `themeReleaseNotes.txt`. You can place release notes within this file and the contents will automatically be displayed during the appropriate installation step within DNN using the project's output theme package.
--------------------------------------------------------------------------------
/src/scss/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | // button iterations for each color
2 | @each $color, $value in $colors {
3 | .btn-#{$color} {
4 | @include button-variant($color,.8);
5 | }
6 | .btn-outline-#{$color} {
7 | @include button-outline-variant($color);
8 | }
9 | .btn-reverse-outline-#{$color} {
10 | @include button-reverse-outline-variant($color);
11 | }
12 | .btn-inverse-#{$color} {
13 | @include button-inverse-variant($color,.9);
14 | }
15 | }
--------------------------------------------------------------------------------
/src/scss/sections/_footer.scss:
--------------------------------------------------------------------------------
1 | footer {
2 | .disclaimer {
3 | @include font-size(12);
4 | display:flex;
5 | margin:0;
6 | margin-left:-1rem;
7 | margin-right:-1rem;
8 | li {
9 | position:relative;
10 | padding:0 1rem;
11 | + li:before {
12 | content:'';
13 | position:absolute;
14 | top:0;
15 | left:0;
16 | bottom:0;
17 | width:1px;
18 | background-color:white;
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/default.ascx:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: Node.js CI
2 |
3 | on:
4 | push:
5 | branches: [ develop ]
6 | pull_request:
7 | branches: [ develop ]
8 |
9 | jobs:
10 | build:
11 |
12 | runs-on: ubuntu-latest
13 |
14 | strategy:
15 | matrix:
16 | node-version: [16.x]
17 |
18 | steps:
19 | - uses: actions/checkout@v3
20 | - name: Use Node.js ${{ matrix.node-version }}
21 | uses: actions/setup-node@v3
22 | with:
23 | node-version: ${{ matrix.node-version }}
24 | - name: Install dependencies
25 | run: yarn
26 | - name: Run gulp build
27 | run: gulp build
28 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature Request
3 | about: Suggest an idea for this project
4 |
5 | ---
6 |
7 | ## Is your feature request related to a problem?
8 | **Please describe.**
9 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
10 |
11 | ## Describe the solution you'd like
12 | A clear and concise description of what you want to happen.
13 |
14 | ## Describe alternatives you've considered
15 | A clear and concise description of any alternative solutions or features you've considered.
16 |
17 | ## Additional context
18 | Add any other context or screenshots about the feature request here.
19 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug-report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug Report
3 | about: Create a report to help us improve
4 |
5 | ---
6 |
7 | ## Describe the bug
8 | A clear and concise description of what the bug is.
9 |
10 | ## To Reproduce
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 |
17 | ## Expected behavior
18 | A clear and concise description of what you expected to happen.
19 |
20 | ## Screenshots
21 | If applicable, add screenshots to help explain your problem.
22 |
23 | ## Errors
24 | Paste the error(s) related to this issue.
25 |
26 | ## Additional context
27 | Add any other context about the problem here.
28 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [david-poindexter, nvisionative] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/docs/Change-Color-Scheme.md:
--------------------------------------------------------------------------------
1 | ### Color Scheme
2 | [](https://www.youtube.com/watch?v=o1XW3e8JKfw)
3 |
4 | ## Change Color Scheme
5 | Most websites are going to key off the colors for the brand being represented. Following industry best practices, there are typically three colors selected for the website main colors: primary, secondary and tertiary. These are defined within the `./src/scss/variables/_colors.scss` file. Updating these SCSS variable color definitions using HEX or RGB colors will change usage of these throughout the theme.
6 |
7 | There are also colors defined for variants of gray, normal font colors, borders and links. These are all easily modified within this one file.
8 |
9 | Additionally, base Bootstrap classes can be used for various colors within your custom theme.
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation-change-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Documentation Change Request
3 | about: Suggest an improvement to project documentation
4 |
5 | ---
6 |
7 | ## What documentation page needs changing?
8 | Please reference the exact page on the documentation site that needs changing.
9 |
10 | ## What documentation section needs changing?
11 | Please reference the exact section within the page that needs changing.
12 |
13 | ## Proposed documentation change
14 | Provide a clear and concise description of the documentation change you wish to be made.
15 |
16 | ## Describe alternatives you've considered
17 | Provide a clear and concise description of any alternative documentation changes you considered.
18 |
19 | ## Additional context
20 | Provide any other context or screenshots that provide additional context for the proposed documentation changes.
21 |
--------------------------------------------------------------------------------
/docs/Project-Setup.md:
--------------------------------------------------------------------------------
1 | ### Project Setup (Video)
2 | [](https://www.youtube.com/watch?v=7UhpbUaeFQc)
3 |
4 | When you start a new theme project, you will need to edit **project-details.json** with your project information.
5 |
6 | ```javascript
7 | var project = '[project name]',
8 | author = '[author]',
9 | company = '[company]',
10 | url = '[website]',
11 | email = '[email]',
12 | description = '[short description]';
13 | ```
14 |
15 | Make sure you use html codes for any symbols used in these variables. After you've completed and saved the file, in the node command prompt within your root, you will need to run `gulp manifest`. This will take your information and populate the DNN manifest file with the information provided.
--------------------------------------------------------------------------------
/partials/_footer.ascx:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/docs/_data/nav.yml:
--------------------------------------------------------------------------------
1 | menu:
2 | - title: Table of Contents
3 | subfolderitems:
4 | - page: Home
5 | url: /nvQuickTheme/
6 | - page: Installation
7 | url: /nvQuickTheme/Installation.html
8 | - page: Project Setup
9 | url: /nvQuickTheme/Project-Setup.html
10 | - page: Commands
11 | url: /nvQuickTheme/Commands.html
12 | - title: Appendix
13 | subfolderitems:
14 | - page: Dependencies
15 | url: /nvQuickTheme/Dependencies.html
16 | - page: Dev Dependencies
17 | url: /nvQuickTheme/DevDependencies.html
18 | - page: SCSS
19 | url: /nvQuickTheme/SCSS.html
20 | - title: How To...
21 | subfolderitems:
22 | - page: Work With Out-Of-Box Theme
23 | url: /nvQuickTheme/Work-With-Out-Of-Box-Theme.html
24 | - page: Change Color Scheme
25 | url: /nvQuickTheme/Change-Color-Scheme.html
26 | - page: Add Custom Theme Release Notes
27 | url: /nvQuickTheme/Add-Custom-Theme-Release-Notes.html
28 | - page: Add Custom Theme License
29 | url: /nvQuickTheme/Add-Custom-Theme-License.html
--------------------------------------------------------------------------------
/menus/desktop/RazorMenu.cshtml:
--------------------------------------------------------------------------------
1 | @using DotNetNuke.Web.DDRMenu;
2 | @using System.Dynamic;
3 | @inherits DotNetNuke.Web.Razor.DotNetNukeWebPage
4 |
5 |
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/docs/DevDependencies.md:
--------------------------------------------------------------------------------
1 | ### Node
2 | From the website: "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world."
3 |
4 |
5 | ***
6 |
7 | ### Yarn
8 | Where npm set the groundwork for a package system, it falls short in many aspects. Yarn, the successor to Bower, helps manage packages with ease. Quick, secure, and reliable, Yarn is the front-runner for package management.
9 |
10 |
11 | ***
12 |
13 | ### Gulp
14 | Gulp is what we use to automate the painful stuff. error checking, compressing, minifying, zipping, anything you hate doing over and over, there's probably a way to automate it using Gulp and it's plethora of plugins.
15 |
16 | ### gulp-autoprefixer
17 | Forget about making sure you add the -webkit- prefix. This plugin automatically adds all the prefixes necessary for all the major browsers and versions.
18 |
19 | ### gulp-clean
20 | Allows for easy deletion of files. We use it to get rid of temporary files created when building packages.
21 |
22 | ### gulp-clean-css
23 | Allows for simple minification of CSS.
24 |
25 | ### gulp-imagemin
26 | Nicely compresses images as small as possible while maintaining quality. We don't use this in our main tasks, but is still available because we believe it is a necessary tool for a lot of theme creation.
27 |
28 | ### gulp-jshint
29 | Checks javascript for errors and lets you know what's wrong.
30 |
31 | ### gulp-notify
32 | Helps show messages in the node command line console.
33 |
34 | ### gulp-rename
35 | Used to rename files.
36 |
37 | ### gulp-replace
38 | Replaces string values within files. Not currently used, but will possibly be used in future releases of nvQuickTheme.
39 |
40 | ### gulp-sass
41 | This powerful plugin error checks, concatenates, and minifies scss. We use it for all the things.
42 |
43 | ### gulp-uglify
44 | A plugin that helps minify all the things. Since our sass plugin already does that for us, we use this to minify our javascript.
45 |
46 | ### gulp-zip
47 | Just like it sounds, this zips files. This is used in our theme packaging task to help create the resource files for DNN.
--------------------------------------------------------------------------------
/docs/Installation.md:
--------------------------------------------------------------------------------
1 | ### Intro (Video)
2 | [](https://www.youtube.com/watch?v=-w0qSTZfBUU)
3 |
4 | ### Install Node
5 | Node is a server framework that we use to keep track of all our dependencies and help run our scripts. Head over to [https://nodejs.org/en/](https://nodejs.org/en/) to find out how to install Node.
6 |
7 | Once you have Node installed, load up the Node command prompt. This is where you will be running all commands for the environment.
8 |
9 |
10 | ***
11 |
12 | ### Install Yarn
13 | Yarn is a package manager that we use to manage all our dependencies quickly and securely.
14 |
15 | Refer to the [yarn installation page](https://yarnpkg.com/en/docs/install) for details on your specific operating system.
16 |
17 | ***
18 |
19 | ### Install Gulp
20 | Gulp is our task script manager and executor. In order for us to run this on command line in any project we're doing, from the node command line, you will need to run: `npm install gulp -g`. This will install Gulp globally on your machine. Note that if you run several installations of nvQuickTheme, you will only need to run this command on the first install.
21 |
22 | ***
23 |
24 | ### Clone Repository
25 | The dev environment is setup to be run directly in a DNN instance under: `Portals\_default\Skins\[your theme name]`. Setup your empty Skin folder and clone our repo to that.
26 |
27 | Alternatively, if you are not able to run this in a DNN instance, or don't want to run it in an instance, you can set it up as is, wherever you would like. To test your theme, you would run the packaging command, then install your theme package on your testing instance.
28 |
29 | We recommend running it directly in a DNN instance for full ease-of-use.
30 |
31 | ***
32 |
33 | ### Install Dependencies
34 | With Yarn & Gulp installed, and the repo cloned, we can now use that package file.
35 |
36 | Run: `yarn` or `yarn install`
37 |
38 | This will read the package file and pull the necessary dependencies required for the environment.
39 |
40 | NOTE: Yarn will notify you that Bootstrap is missing some dependencies. Please ignore this warning. Bootstrap 4 includes all it's dependencies in the "bundle" version that we use.
41 |
42 | With all the dependencies installed and the repo cloned, your dev environment is ready to go!
--------------------------------------------------------------------------------
/src/scss/_base.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | }
6 |
7 |
8 |
9 | // Base Styles
10 | //–––––––––––––––––––––––––––––––––––––––––––––––––
11 |
12 | body {
13 | font-size: 16px;
14 | font-weight: 200;
15 | line-height: 1.5;
16 | font-family: $open-sans;
17 | color: color('dark-shade');
18 | background-color: #fff;
19 | -webkit-font-smoothing: antialiased;
20 | }
21 |
22 | h1, h2, h3, h4, h5 {
23 | font-family: $open-sans;
24 | }
25 |
26 | h1 {
27 | @include font-baseline(48, 52);
28 | }
29 |
30 | h2 {
31 | @include font-baseline(38, 48);
32 | }
33 |
34 | h3 {
35 | @include font-baseline(26, 36);
36 | }
37 |
38 | h4 {
39 | @include font-baseline(22, 28);
40 | }
41 |
42 | h5 {
43 | @include font-baseline(18, 24);
44 | }
45 |
46 | p {
47 | margin: 0 0 1.5rem;
48 | }
49 |
50 | ul,
51 | ol,
52 | pre,
53 | table,
54 | blockquote {
55 | margin-bottom: 1.5rem;
56 | }
57 |
58 |
59 |
60 | // Sanitation
61 | //–––––––––––––––––––––––––––––––––––––––––––––––––
62 |
63 | ul ul,
64 | ol ol,
65 | ul ol,
66 | ol ul {
67 | margin:0;
68 | }
69 |
70 | ul {
71 | list-style: disc;
72 | }
73 |
74 | ol {
75 | list-style: decimal;
76 | }
77 |
78 | b,
79 | strong,
80 | em,
81 | small,
82 | code {
83 | line-height: 1;
84 | }
85 |
86 | sup,
87 | sub {
88 | vertical-align: baseline;
89 | position: relative;
90 | top: -.4em;
91 | }
92 |
93 | sub {
94 | top: .4em;
95 | }
96 |
97 |
98 |
99 | // Links
100 | //–––––––––––––––––––––––––––––––––––––––––––––––––
101 |
102 | a {
103 | color: color('sub-highlight');
104 | text-decoration:none;
105 | transition:.25s ease-in-out all;
106 |
107 | &:hover {
108 | color: color('light-shade');
109 | text-decoration:none;
110 | }
111 | }
112 | header a, footer a {
113 | color: color('white');
114 | font-weight:600;
115 | }
116 |
117 |
118 |
119 | // hr and pre
120 | //–––––––––––––––––––––––––––––––––––––––––––––––––
121 |
122 | hr {
123 | display:block;
124 | height:1px;
125 | width:25%;
126 | border:0;
127 | border-top:1px solid color('white');
128 | margin-top:1.5rem;
129 | margin-bottom:1.5rem;
130 | padding: 0;
131 | }
132 |
133 | pre {
134 | background:color('sub-highlight');
135 | padding:10px 15px;
136 | }
--------------------------------------------------------------------------------
/src/scss/mixins/_mixins.scss:
--------------------------------------------------------------------------------
1 | @function strip-unit($num) {
2 | @return calc($num / ($num * 0 + 1));
3 | }
4 |
5 | // rem font-size with px fallback
6 | // usage: @include font-size(16)
7 | @mixin font-size($sizeValue) {
8 | font-size: $sizeValue + px;
9 | font-size: calc($sizeValue / 16) + rem;
10 | }
11 |
12 | // vertical rhythm
13 | // usage: @include font-baseline(16,24);
14 | @mixin font-baseline($font-size, $lineheight){
15 | font-size: $font-size + px;
16 | font-size: calc($font-size / $base-font-size) + rem;
17 | line-height: calc($lineheight / $font-size);
18 | margin: 0 0 calc((($lineheight / $font-size) * (1 / ($lineheight / $defaultlineheight))) * .5em ) 0;
19 | }
20 |
21 | // Shorthand for media queries at px width and lower
22 | @mixin mq-max-width( $width-in-px ) {
23 | @media only screen and (max-width: calc(($width-in-px / $base-font-size) * 1em )) {
24 | @content;
25 | }
26 | }
27 |
28 | // Shorthand for media queries at px width and higher
29 | @mixin mq-min-width( $width-in-px ) {
30 | @media only screen and (min-width: calc(($width-in-px / $base-font-size) * 1em )) {
31 | @content;
32 | }
33 | }
34 |
35 | // Regular solid buttons
36 | @mixin button-variant($color, $hover-alpha: 1) {
37 | $var-color: color($color);
38 | $var-rgb-color: color($color, true);
39 | color: white;
40 | background-color: $var-color;
41 | border-color: $var-color;
42 | &:hover, &:focus {
43 | color: white;
44 | background-color: rgba($var-rgb-color, $hover-alpha);
45 | border-color: rgba($var-rgb-color, $hover-alpha);
46 | }
47 | }
48 |
49 | // Outline buttons
50 | @mixin button-outline-variant($color) {
51 | $var-color: color($color);
52 | color: $var-color;
53 | background-color: transparent;
54 | border-color: $var-color;
55 | &:hover, &:focus {
56 | color: white;
57 | background-color: $var-color;
58 | border-color: $var-color;
59 | }
60 | }
61 |
62 | // Reverse outline to solid buttons
63 | @mixin button-reverse-outline-variant($color) {
64 | $var-color: color($color);
65 | color: white;
66 | background-color: $var-color;
67 | background-image: none;
68 | border-color: $var-color;
69 | &:hover, &:focus {
70 | color: $var-color;
71 | background-color: transparent;
72 | border-color: $var-color;
73 | }
74 | }
75 |
76 | // Inverse buttons to white background and colored text
77 | @mixin button-inverse-variant($color, $hover-alpha: 1) {
78 | $var-color: color($color);
79 | color: $var-color;
80 | background-color: color('white');
81 | background-image: none;
82 | border-color: color('white');
83 | &:hover, &:focus {
84 | color: $color;
85 | background-color: rgba(color('white', true), $hover-alpha);
86 | border-color: rgba(color('white', true), $hover-alpha);
87 | }
88 | }
--------------------------------------------------------------------------------
/partials/_includes.ascx:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/scss/variables/_fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Open Sans';
3 | src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
4 | url('../fonts/OpenSans-Regular.woff') format('woff');
5 | font-weight: normal;
6 | font-style: normal;
7 | font-display: swap;
8 | }
9 |
10 | @font-face {
11 | font-family: 'Open Sans';
12 | src: url('../fonts/OpenSans-Italic.woff2') format('woff2'),
13 | url('../fonts/OpenSans-Italic.woff') format('woff');
14 | font-weight: normal;
15 | font-style: italic;
16 | font-display: swap;
17 | }
18 |
19 | @font-face {
20 | font-family: 'Open Sans';
21 | src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
22 | url('../fonts/OpenSans-Bold.woff') format('woff');
23 | font-weight: bold;
24 | font-style: normal;
25 | font-display: swap;
26 | }
27 |
28 | @font-face {
29 | font-family: 'Open Sans';
30 | src: url('../fonts/OpenSans-BoldItalic.woff2') format('woff2'),
31 | url('../fonts/OpenSans-BoldItalic.woff') format('woff');
32 | font-weight: bold;
33 | font-style: italic;
34 | font-display: swap;
35 | }
36 |
37 | @font-face {
38 | font-family: 'Open Sans';
39 | src: url('../fonts/OpenSans-ExtraBold.woff2') format('woff2'),
40 | url('../fonts/OpenSans-ExtraBold.woff') format('woff');
41 | font-weight: 800;
42 | font-style: normal;
43 | font-display: swap;
44 | }
45 |
46 | @font-face {
47 | font-family: 'Open Sans';
48 | src: url('../fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
49 | url('../fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
50 | font-weight: 800;
51 | font-style: italic;
52 | font-display: swap;
53 | }
54 |
55 | @font-face {
56 | font-family: 'Open Sans';
57 | src: url('../fonts/OpenSans-Light.woff2') format('woff2'),
58 | url('../fonts/OpenSans-Light.woff') format('woff');
59 | font-weight: 300;
60 | font-style: normal;
61 | font-display: swap;
62 | }
63 |
64 | @font-face {
65 | font-family: 'Open Sans';
66 | src: url('../fonts/OpenSans-LightItalic.woff2') format('woff2'),
67 | url('../fonts/OpenSans-LightItalic.woff') format('woff');
68 | font-weight: 300;
69 | font-style: italic;
70 | font-display: swap;
71 | }
72 |
73 | @font-face {
74 | font-family: 'Open Sans';
75 | src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
76 | url('../fonts/OpenSans-SemiBold.woff') format('woff');
77 | font-weight: 600;
78 | font-style: normal;
79 | font-display: swap;
80 | }
81 |
82 | @font-face {
83 | font-family: 'Open Sans';
84 | src: url('../fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
85 | url('../fonts/OpenSans-SemiBoldItalic.woff') format('woff');
86 | font-weight: 600;
87 | font-style: italic;
88 | font-display: swap;
89 | }
--------------------------------------------------------------------------------
/partials/_registers.ascx:
--------------------------------------------------------------------------------
1 | <%@ Control Language="C#" AutoEventWireup="true" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
2 | <%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/Breadcrumb.ascx" %>
3 | <%@ Register TagPrefix="dnn" TagName="CONTROLPANEL" Src="~/Admin/Skins/ControlPanel.ascx" %>
4 | <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
5 | <%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
6 | <%@ Register TagPrefix="dnn" TagName="DnnLink" Src="~/Admin/Skins/DnnLink.ascx" %>
7 | <%@ Register TagPrefix="dnn" TagName="DOTNETNUKE" Src="~/Admin/Skins/DotNetNuke.ascx" %>
8 | <%@ Register TagPrefix="dnn" TagName="Help" Src="~/Admin/Skins/Help.ascx" %>
9 | <%@ Register TagPrefix="dnn" TagName="HOSTNAME" Src="~/Admin/Skins/HostName.ascx" %>
10 | <%@ Register TagPrefix="dnn" TagName="JavaScriptLibraryInclude" Src="~/Admin/Skins/JavaScriptLibraryInclude.ascx" %>
11 | <%@ Register TagPrefix="dnn" TagName="JQUERY" Src="~/Admin/Skins/jQuery.ascx" %>
12 | <%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
13 | <%@ Register TagPrefix="dnn" TagName="LEFTMENU" Src="~/Admin/Skins/LeftMenu.ascx" %>
14 | <%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
15 | <%@ Register TagPrefix="dnn" TagName="LINKTOFULLSITE" Src="~/Admin/Skins/LinkToFullSite.ascx" %>
16 | <%@ Register TagPrefix="dnn" TagName="LINKTOMOBILESITE" Src="~/Admin/Skins/LinkToMobileSite.ascx" %>
17 | <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
18 | <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
19 | <%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
20 | <%@ Register TagPrefix="dnn" TagName="META" Src="~/Admin/Skins/Meta.ascx" %>
21 | <%@ Register TagPrefix="dnn" TagName="MODULEMESSAGE" Src="~/Admin/Skins/ModuleMessage.ascx" %>
22 | <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
23 | <%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
24 | <%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
25 | <%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
26 | <%@ Register TagPrefix="dnn" TagName="TAGS" Src="~/Admin/Skins/Tags.ascx" %>
27 | <%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
28 | <%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
29 | <%@ Register TagPrefix="dnn" TagName="TOAST" Src="~/Admin/Skins/Toast.ascx" %>
30 | <%@ Register TagPrefix="dnn" TagName="TreeViewMenu" Src="~/Admin/Skins/TreeViewMenu.ascx" %>
31 | <%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/user.ascx" %>
32 | <%@ Register TagPrefix="dnn" TagName="USERANDLOGIN" Src="~/Admin/Skins/UserAndLogin.ascx" %>
33 | <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.DDRMenu.TemplateEngine" Assembly="DotNetNuke.Web.DDRMenu" %>
34 | <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
35 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support@nvisionative.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | **nvQuickTheme** is more than just a great minimalist DNN (DotNetNuke) theme. It is a powerful theme building framework and developer workflow. This "starter solution" was made with developer efficiency and the ultimate DNN theme performance in mind. Most DNN themes in the marketplace today are loaded with bloat, which can make theming a pain, and for someone new to DNN, almost impossible. Our [documentation](https://nvisionative.github.io/nvQuickTheme/) will outline basic usage, modification, and advanced usage of this framework and developer workflow.
2 |
3 | Are you tired of spending countless hours trying to squeeze every ounce of performance out of your DNN themes, just so you can rank better on *Google PageSpeed Insights*? How are your scores? Have you broken the **80s for Desktop** or the **60s for Mobile**? You have probably discovered by now that it is very tough to accomplish this on a DNN site.
4 |
5 | Well, the search is over! Utilizing **nvQuickTheme**, you can rest assured that you are doing everything you possibly can within the context of the theme to achieve stellar scores. As a matter of fact, the [nvQuickTheme website](https://www.nvquicktheme.com), which of course is running nvQuickTheme, scores **100/100 (Desktop)** and **89/100 (Mobile)**. Yes, you read that correctly. If you don't believe us, please feel free to [analyze it yourself](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nvquicktheme.com%2F&tab=desktop)!
6 |
7 | ## Background
8 |
9 | There have been many ways to develop DNN themes over the years. Some start from scratch using pure HTML with the [TOKEN] based model provided by DNN. Others, especially more hardcore developers, start with ASP.NET Web User Controls (instead of pure HTML). All end up using some shape, form, fashion or flavor of Cascading Style Sheets (CSS) and Javascript (JS).
10 |
11 | Some work with a manual workflow, editing flat files with their favorite code/text editor and wiring everything up "old school". Others use a fully Integrated Development Environment (IDE), like Visual Studio. Many even use the famous Christoc Visual Studio Templates for building out themes in a more structured way. Yet others develop their own unique workflows that best suit their particular use case.
12 |
13 | The [nvisionative](https://www.nvisionative.com) team has been working in the DNN ecosystem since its inception and has seen all sorts of approaches for custom and commercial themes alike. A large majority of these themes are bloated with all sorts of widgets, 3rd party components, bells, whistles, etc. Given the great depth of experience over the years, our team has identified so many ways to resolve issues in and improve DNN themes. From **best practices** to HUGE **performance enhancements**, there have been so many lessons learned. Now it is time give back to this great community that has provided so much to us.
14 |
15 | ## Video Series
16 | ### Intro
17 | [](https://www.youtube.com/watch?v=-w0qSTZfBUU)
18 |
19 | ### Project Setup
20 | [](https://www.youtube.com/watch?v=7UhpbUaeFQc)
21 |
22 | ### Color Scheme
23 | [](https://www.youtube.com/watch?v=o1XW3e8JKfw)
--------------------------------------------------------------------------------
/src/scss/components/_login.scss:
--------------------------------------------------------------------------------
1 | .dnnLogin {
2 | display: flex;
3 | justify-content: center;
4 | width: 100%;
5 |
6 | > div {
7 | width:100%;
8 | padding:0;
9 | }
10 |
11 | .LoginPanel {
12 | width: 100%;
13 | padding: 0;
14 |
15 | .dnnFormItem {
16 | .dnnFormLabel {
17 | display:none;
18 | }
19 |
20 | &:nth-child(1), &:nth-child(2) {
21 | display: flex;
22 | flex-direction: column;
23 |
24 | .dnnFormLabel {
25 | display: block;
26 | float:left;
27 | &::after {
28 | clear:both;
29 | content: '';
30 | }
31 | }
32 |
33 | label {
34 | font-weight: 700;
35 | font-size: 1.5rem;
36 | }
37 |
38 | input {
39 | min-width: 100%;
40 | font-size: 1.5rem;
41 | font-weight: 500;
42 | padding: .25em;
43 | }
44 | }
45 |
46 | &:nth-child(3) {
47 | width: 100%;
48 | display: flex;
49 | justify-content: center;
50 | margin-top: .5em;
51 |
52 | a {
53 | width: 50%;
54 | margin:0;
55 |
56 | &.dnnPrimaryAction {
57 | margin-right:.25em;
58 | }
59 | &.dnnSecondaryAction {
60 | margin-left:.25em;
61 | }
62 | }
63 | }
64 |
65 | .dnnLoginRememberMe {
66 | display: block;
67 | margin: 1em 0;
68 |
69 | img {
70 | margin: 0;
71 | padding: 0;
72 | }
73 |
74 | .dnnCheckbox {
75 | margin: 1em 0;
76 | display: inline-flex;
77 | vertical-align: middle;
78 | }
79 |
80 | label {
81 | margin-left: .5em;
82 | font-size: 1.25rem;
83 | font-weight: 550;
84 | }
85 | }
86 |
87 | &:last-child {
88 | width: 100%;
89 |
90 | .dnnLoginActions {
91 | width: 100%;
92 |
93 | ul {
94 | margin:0;
95 | padding:0;
96 | }
97 | li {
98 | width: 50%;
99 | margin: 0;
100 |
101 | &:nth-child(1) {
102 | padding-right: .25em;
103 | }
104 |
105 | &:nth-child(2) {
106 | padding-left: .25em;
107 | }
108 | }
109 |
110 | a {
111 | width: 100%;
112 | }
113 | }
114 | }
115 | }
116 | }
117 | }
118 |
119 |
120 | //Hides the #dnnHiddenLogin LOGIN theme object
121 | .hiddenLogin {
122 | bottom: 0;
123 | display: none;
124 | height: 30px;
125 | position: fixed;
126 | text-indent: -1000px;
127 | width: 30px;
128 | }
--------------------------------------------------------------------------------
/docs/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ page.title | default: site.title | default: site.github.repository_name }}
5 |
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 | {% seo %}
16 |
17 |
18 |
19 |
20 |
38 |
39 | {{ content }}
40 | 
70 |