Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
0b3a3ef
Initial setup
tksheppard Feb 16, 2026
57fe287
Merge branch 'nvisionative:develop' into update-to-use-npm-vite
tksheppard Feb 16, 2026
cfe32cf
File placement and name updates
tksheppard Feb 19, 2026
35f7779
Add new dependencies
tksheppard Feb 19, 2026
4896a7e
Increment major version
tksheppard Feb 19, 2026
262db8f
Update deprecated use of `name`
tksheppard Feb 19, 2026
1ed0432
Add browser-sync config
tksheppard Feb 19, 2026
25e4dab
Add serve function
tksheppard Feb 19, 2026
5f1d5d1
Add helpers to minimize code repeat
tksheppard Feb 19, 2026
d380da2
Replace REGEX with xml parse and replacement
tksheppard Feb 19, 2026
b7367c6
Merge branch 'update-to-use-npm-vite' of https://github.com/tksheppar…
tksheppard Feb 19, 2026
0bc0a1b
Update to use lib to output different filenames
tksheppard Feb 20, 2026
cdc69a8
Remove chokidar and use vite watch to trigger browser-sync
tksheppard Feb 20, 2026
2bcfc8c
Properly deal with manifest, use helpers, packaging tweeks
tksheppard Feb 20, 2026
5376c39
Load proper files
tksheppard Feb 20, 2026
82daeb8
Strip tokens and leave blank for value adding
tksheppard Feb 20, 2026
427ddf0
Remove manifest updates from regular build
tksheppard Feb 20, 2026
5eea334
Add customMenu to compilation order
tksheppard Feb 20, 2026
81560a1
Remove comments, add to docs
tksheppard Feb 20, 2026
5fa1906
Add vite config docs
tksheppard Feb 23, 2026
4856395
Update sass
tksheppard Feb 23, 2026
9e4b7aa
Disable dependency deprecation warnings
tksheppard Feb 23, 2026
88f0172
Updates for CSS5
tksheppard Feb 23, 2026
8b6e5e9
Restructured and simplified and also setup for CSS5
tksheppard Feb 23, 2026
1069b04
Self contain all DNN CSS
tksheppard Mar 4, 2026
c31cdce
Shift back to import for correct overrides
tksheppard Mar 9, 2026
6f44cb7
Filter warnings from autoload and bootstrap
tksheppard Mar 9, 2026
cedd1e5
Revert (mostly) to original
tksheppard Mar 9, 2026
7f603d3
Reverted back to (almost) original
tksheppard Mar 10, 2026
bac22c0
Add back github files
tksheppard May 6, 2026
80731e2
Fix cutoff name tags
tksheppard May 6, 2026
f832e5b
Move fontawesome and bootstrap to dependencies
tksheppard May 6, 2026
deabeb1
Move to github folder for cleanliness
tksheppard May 6, 2026
8f26634
Changed to generic url
tksheppard May 6, 2026
8608f4f
Change to theme version
tksheppard May 6, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes.
225 changes: 225 additions & 0 deletions .github/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
# nvQuickTheme

A modern DNN (DotNetNuke) theme development framework built on **Bootstrap 5**, **Vite**, and **SCSS**. nvQuickTheme provides a fast, opinionated starting point for building professional DNN skins with a streamlined build pipeline.

---

## Requirements

- [Node.js](https://nodejs.org/) v18 or higher
- A running local DNN installation (v9.0.0 or higher)
- npm v9 or higher

---

## Getting Started

### 1. Clone the repository

```bash
git clone https://github.com/nvisionative/nvQuickTheme.git
cd nvQuickTheme
```

### 2. Install dependencies

```bash
npm install
```

### 3. Configure your project

Edit `project-details.json` with your project's information:

```json
{
"project": "MyTheme",
"version": "1.0.0",
"author": "Your Name",
"company": "Your Company",
"url": "www.yoursite.com",
"email": "you@yoursite.com",
"description": "A custom DNN theme"
}
```

### 4. Configure your local DNN site

Edit `serve.config.js` to point to your local DNN installation:

```js
export default {
dnnUrl: 'http://yoursite.loc', // ← change this to your local DNN URL
port: 3000,
watchPaths: ['dist/**/*', 'containers/**/*', '*.ascx'],
sourcePaths: ['src/**/*'],
debounce: 300,
};
```

---

## Project Structure

```
nvQuickTheme/
├── containers/ # DNN container files
├── dist/ # Compiled output (generated, do not edit)
├── partials/ # DNN skin partials (.ascx)
│ ├── _header.ascx
│ ├── _footer.ascx
│ ├── _includes.ascx
│ └── _registers.ascx
├── scripts/ # Build system scripts
│ ├── build.js
│ ├── clean.js
│ ├── helpers.js
│ ├── package.js
│ ├── postbuild.js
│ ├── serve.js
│ ├── utils.js
│ └── watch.js
├── src/
│ ├── fonts/ # Custom web fonts
│ ├── images/ # Theme images
│ ├── js/ # JavaScript source files
│ │ └── custom.js # Main JS entry point
│ └── scss/ # SCSS source files
│ ├── style.scss # Main SCSS entry point
│ ├── variables/ # Colors, fonts, type settings
│ ├── mixins/ # SCSS mixins
│ ├── components/ # Component styles (nav, buttons, etc.)
│ └── sections/ # Section styles (header, footer)
├── default.ascx # Main DNN skin layout
├── manifest.template.dnn
├── project-details.json
├── serve.config.js
└── vite.config.js
```

---

## npm Scripts

| Command | Description |
|---|---|
| `npm run watch` | Watch for file changes and rebuild automatically |
| `npm run serve` | Start Browser-Sync dev server with live reload |
| `npm run build` | Build theme for production |
| `npm run clean` | Remove all build output directories |
| `npm run package` | Build and create a DNN install package |

---

## Development Workflow

### Option A — Watch mode (build only)

If you're deploying files directly to a DNN installation on your local filesystem:

```bash
npm run watch
```

Vite will watch your `src/` files and rebuild to `dist/` on every change. You'll need to refresh your browser manually.

### Option B — Dev server with live reload

For a full live-reload experience via Browser-Sync:

```bash
npm run serve
```

This proxies your local DNN site (configured in `serve.config.js`) and automatically refreshes the browser whenever built files change. Your DNN site must be running before starting the server.

---

## Building for Production

```bash
npm run build
```

This compiles and minifies all SCSS and JS, copies fonts, FontAwesome assets, Bootstrap JS, and images to `dist/`, and generates `manifest.dnn` from `manifest.template.dnn`.

---

## Creating a DNN Install Package

```bash
npm run package
```

This runs a full production build and then packages everything into a DNN-installable zip file at:

```
build/MyTheme_1.0.0_install.zip
```

The package includes the compiled `dist/` assets, containers, skin partials, and the generated manifest — ready to install via the DNN Extensions module.

---

## Customization

### Colors

Edit `src/scss/variables/_colors.scss` to define your color palette. Colors are exposed as CSS custom properties and available throughout SCSS via the `color()` function:

```scss
$colors: (
"main-shade": #ec3d46,
"main-accent": #462a2b,
// ...
);
```

```scss
// Usage in SCSS
background-color: colors.color('main-shade');
```

### Typography

Edit `src/scss/variables/_type.scss` for base font size, line height, and font stack settings. Custom font files belong in `src/fonts/` and should be declared in `src/scss/variables/_fonts.scss`.

### Bootstrap Overrides

Bootstrap variables (colors, breakpoints, spacing, etc.) can be overridden in `src/scss/variables/_bs-overrides.scss` before Bootstrap is compiled in.

### JavaScript

The main JS entry point is `src/js/custom.js`. Additional scripts can be added as entry points in `vite.config.js` under `rollupOptions.input`.

### Layout / Panes

The main skin layout is `default.ascx`. DNN content panes (`BannerPane`, `ContentPane`, `FluidPane`) are defined here. Add or rearrange panes to match your design.

---

## Dependencies

| Package | Version | Purpose |
|---|---|---|
| Bootstrap | ^5.3.8 | CSS framework |
| FontAwesome Free | ^7.0.1 | Icon library |
| Vite | ^5.0.0 | Build tool |
| Sass | ^1.69.5 | SCSS compiler |
| Browser-Sync | ^3.0.4 | Dev server / live reload |
| Chokidar | ^5.0.0 | File watching |
| Archiver | ^6.0.1 | DNN package creation |

---

## License

GPL-3.0 — see `themeLicense.txt` for details.

---

## Credits

Designed and developed by [TK Sheppard](https://github.com/tksheppard) & [David Poindexter](https://github.com/david-poindexter) at [nvisionative](https://www.nvisionative.com).

Project site: [nvquicktheme.com](https://www.nvquicktheme.com)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tksheppard is there a reason why this file name changed? I am not sure if GitHub supports it with this naming. GitHub has a feature to auto-detect the LICENSE file and display the correct license type in other areas of the GitHub repo UI.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@david-poindexter I was going for consistency with all markdown files--and GitHub supports it.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tksheppard it is good to know GitHub supports it, but I still prefer this file to be treated differently than other markdown files. It is "special" because it is the license. Thanks.

File renamed without changes.
37 changes: 0 additions & 37 deletions README.md

This file was deleted.

30 changes: 13 additions & 17 deletions manifest.dnn → build-resources/manifest.template.dnn
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<dotnetnuke type="Package" version="9.0">
<packages>
<package name="nvisionative.nvQuickTheme" type="Skin" version="3.2.0">
<friendlyName>nvQuickTheme</friendlyName>
<description>A DNN Theme Dev Framework</description>
<iconFile>MyIcon.png</iconFile>
<package name="" type="Skin" version="">
<friendlyName></friendlyName>
<description></description>

<owner>
<name>TK Sheppard &amp; David Poindexter</name>
<organization>nvisionative</organization>
<url>www.nvquicktheme.com</url>
<email>support@nvisionative.com</email>
<name></name>
<organization></organization>
<url></url>
<email></email>
</owner>
<license src="themeLicense.txt" />
<releaseNotes src="themeReleaseNotes.txt" />
Expand All @@ -18,8 +18,8 @@
<components>
<component type="Skin">
<skinFiles>
<basePath>Portals\_default\Skins\nvQuickTheme\</basePath>
<skinName>nvQuickTheme</skinName>
<basePath></basePath>
<skinName></skinName>

<!-- Main Directory -->
<skinFile>
Expand All @@ -30,18 +30,14 @@
<path />
<name>thumbnail_default.png</name>
</skinFile>
<skinFile>
<path />
<name>LICENSE</name>
</skinFile>

</skinFiles>
</component>

<!-- Menus, Partials, and Root -->
<component type="ResourceFile">
<resourceFiles>
<basePath>Portals\_default\Skins\nvQuickTheme\</basePath>
<basePath></basePath>
<resourceFile>
<name>else.zip</name>
</resourceFile>
Expand All @@ -51,7 +47,7 @@
<!-- CSS, Fonts, JS, Images Folder -->
<component type="ResourceFile">
<resourceFiles>
<basePath>Portals\_default\Skins\nvQuickTheme\</basePath>
<basePath></basePath>
<resourceFile>
<name>dist.zip</name>
</resourceFile>
Expand All @@ -61,7 +57,7 @@
<!-- Containers Folder -->
<component type="ResourceFile">
<resourceFiles>
<basePath>Portals\_default\Containers\nvQuickTheme\</basePath>
<basePath>Portals\_default\Containers\</basePath>
<resourceFile>
<name>cont.zip</name>
</resourceFile>
Expand Down
File renamed without changes.
File renamed without changes.
Loading
Loading