skin Video Courses and Tutorials from DNN Creative Magazine for DotNetNuke

Feb 01, 2014

2014 Edition \ 2. February/2014 \ 1. How to Create a Custom DNN Skin with Bootstrap 3 - Introduction, Setup and Application

" This video contains: Introduction; Setting up the new skin; Planning the skin layout; Setting up skin.css; Initial section colouring; Applying the new skin ... "

Feb 01, 2014

2014 Edition \ 2. February/2014 \ 2. How to Create a Custom DNN Skin with Bootstrap 3 - Customising the Navbar and Adding Panes

" This video contains: Using the Chrome Developer Tools; How to override bootstrap.css; How to customise the Bootstrap3 Navbar; Adding content panes; Adding skin objects; "

Feb 01, 2014

2014 Edition \ 2. February/2014 \ 3. How to Create a Custom DNN Skin with Bootstrap 3 - Styling Skin Sections and Content Elements

" This video contains: Creating content; Customising skin sections; Styling content; Introduction to mobile first design; "

Feb 01, 2014

2014 Edition \ 2. February/2014 \ 4. How to Create a Custom DNN Skin with Bootstrap 3 - Media Queries and Responsive CSS

" This video contains: Setting up media queries; Styling the mobile view; Styling tablet view; Creating the semi transparent Navbar and Logobar; "

Jul 01, 2014

2014 Edition \ 7. July/2014 \ 1. How to Setup a New Basic XSLT Menu

" This video contains: Introduction; Standalone or skin based? Where to create your DDR menu template folder; How to set up a basic unordered list XSLT template; H... "

Jul 01, 2014

2014 Edition \ 7. July/2014 \ 2. Introduction to the Basic XSLT Template

" This video contains: Introduction to various XSL templates; "

Nov 01, 2013

2013 Edition \ 8. November/2013 \ 1. How to Build a Basic DotNetNuke Skin with Twitter Bootstrap 3

" This video contains: Introduction; Downloading Bootstrap 3; Unzipping the Bootstrap files into the DotNetNuke file system; Accessing the DotNetNuke file system with Visual Studio... "

Nov 01, 2013

2013 Edition \ 8. November/2013 \ 2. Creating a DDR Bootstrap 3 Navbar Menu

" This video contains: Introduction; Creating the menu markup; Preventing the Bootstrap menu conflicting with the admin menu; Implementing the DDR menu within a DNN skin; How t... "

Nov 01, 2013

2013 Edition \ 8. November/2013 \ 3. Creating Instant Content Panes and Containers using the Bootstrap 3 Framework

" This video contains: Introduction to the 12 column Bootstrap grid system; Introduction to the Bootstrap Row; How to create an instant two column layout; Creating three equally sp... "

Apr 01, 2013

2013 Edition \ 3. April/2013 \ 1. How to Add the Portal Logo, Adding and styling the User/Login Skin Object on a Bootstrap Skin

" This video contains: Introduction Creating a new row for the portal logo Adding the portal logo to the skin How to add the user/login skin object to the skin Using jQuery to ad... "

Apr 01, 2013

2013 Edition \ 3. April/2013 \ 2. Adding a Footer and Three Footer Panes to the Bootstrap Skin

" This video contains: Introduction How to create a full width footer Creating the footer internal HTML Adding three equidistant panes inside the footer Styling the footer How ... "

Mar 01, 2013

2013 Edition \ 2. March/2013 \ 1. How to Build a Basic DotNetNuke 7 Skin with Twitter Bootstrap

" This video contains: Introduction Downloading Bootstrap Unzipping the Bootstrap files into the DotNetNuke file system Accessing the DotNetNuke file system with Visual Studio Expr... "

Mar 01, 2013

2013 Edition \ 2. March/2013 \ 2. Creating a DDR Menu Bootstrap Menu Template

" This video contains: Introduction Creating the menu markup Preventing the Bootstrap menu conflicting with the admin menu Implementing the DDR menu within a DNN skin How to conv... "

Mar 01, 2013

2013 Edition \ 2. March/2013 \ 3. Creating Instant Content Panes and Containers using the Bootstrap framework

" This video contains: Introduction to the 12 column Bootstrap grid system Introduction to the Bootstrap Row How to create an instant two column layout How to creature a feature co... "

Mar 01, 2013

2013 Edition \ 2. March/2013 \ 4. Creating a Responsive Twitter Bootstrap Skin for DotNetNuke 7 - Appendix

" This video contains: How to allow modules to be dragged and dropped into empty panes Removing the grey line underneath module titles How to link the portal title to the portal homepage "

Oct 01, 2012

2012 Edition \ 6. October/2012 \ 1. How to Create a Responsive HTML5 Skin for DotNetNuke

" This video contains: Introduction Creating a custom build of HTML5 Boilerplate Creating the skin folder Adapting file names and locations for DotNetNuke "

Oct 01, 2012

2012 Edition \ 6. October/2012 \ 2. Setting the Doctype and the Conditional HTML CSS Classes

" This video contains: Setting the skin doctype for HTML 5 Adding the DotNetNuke skin directives Understanding the conditional HTML element Intoduction to the 40Fingers style helpe... "

Oct 01, 2012

2012 Edition \ 6. October/2012 \ 3. Meta Tags Removing Unnecessary Tags and Creating Content Panes

" This video contains: Description of the necessary meta tags How to add scripts and CSS files to the page head using the style helper skin token How to add the X UA Compatible meta ... "

Oct 01, 2012

2012 Edition \ 6. October/2012 \ 4. Adding a Simple DDR Menu Template

" This video contains: How to add a simple menu to our skin How to edit the menu CSS to allow more than three menu items Detailed walkthrough of the responsive features of our skin.c... "

Oct 01, 2012

2012 Edition \ 6. October/2012 \ 5. How to Create HTML5 Containers

" This video contains: Creating a basic HTML5 container How to reset the DotNetNuke default set font sizes Setting default DNN styles to use variable font sizes Splitting our HTML5... "

Jun 01, 2012

2012 Edition \ 3. June/2012 \ 1. DotNetNuke 6.2 - Skinning the New Notification Area to Match Your Skin

" This video contains: Introduction Setting up the Google Chrome developer tools Accessing your skin.css file from Google Chrome Brief overview of the notification area structure ... "

Jun 01, 2012

2012 Edition \ 3. June/2012 \ 2. Styling the Unread Message/Notification Numbers and Aligning Elements

" This video contains: How to select the unread notification numbers with CSS Styling the span tags Using negative margins to position the span tags within the icons How to align t... "

May 01, 2012

2012 Edition \ 2. May/2012 \ 1. DotNetNuke 6.2 - Implementing the New Notification Area Into Your Skin

" This video contains: Introduction Examining the new version of the Dark Knight skin Opening your website in Microsoft Visual Web Developer Introduction to the LegacyMode attrib... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 1. Planning the Skin and Measuring for Div Tag Dimensions

" This video contains: Introduction Software requirements Overview of included skin templates The PSD document skin plan Background and foreground The layers pane Hiding and ... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 2. Creating the Div Structure and Creating the Div Tag CSS Code

" This video contains: Installing the skin templates Introduction to required skin code including the admin control panel Creating the div structure Adding div dimensions using CSS... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 3. How to Add Skin Tokens, the DDR Menu and Content Panes to a DotNetNuke Skin

" This video contains: Using DotNetNuke Skin Tokens Adding the logo, login and user skin tokens Skin token tagname, ID and runat=server How to implement the DDR menu Introduction... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 4. Slicing Up and Exporting Images From Photoshop

" This video contains: Using the Photoshop slice tool Creating the logobar slice Naming a slice for the image filename Exporting the slice The Save for Web and Devices dialog S... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 5. Slicing and Exporting the Remaining Background Images

" This video contains: Slicing and exporting the remaining background images How to determine the div border color "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 6. Styling and Adding Backgrounds to Div Tags

" This video contains: Adding the remaining background images in the CSS document Adding borders to div tags in CSS Implementing CSS3 rounded corners "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 7. Creating a Custom DotNetNuke Container

" This video contains: Introduction to DotNetNuke Containers Adding the included container template files to the DNN file system Creating a thin slice of the container background to ... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 8. Adding a Module Title and Styling the Container

" This video contains: Creating the container div structure How to add the module title skin token to the container Creating H2 tags for the module title Adding the content pane to... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 9. Adding and Laying Out the Three Lower Panes

" This video contains: Creating the div structure for the three lower panes Adding the three lower content panes Adding modules to the lower panes Creating the CSS layout for the l... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 10. Styling the DDR Superfish Menu

" This video contains: Positioning the login and user links Opening the DDR menu template CSS file Slicing and exporting the menu background images How to apply styling and backgro... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 11. Creating Two Invisible Containers

" This video contains: Creating an ‘invisible’ container for use in the header pane Duplicating and renaming the default container Styling the invisible container Creating an invis... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 12. Creating the Horizontal Line and Adding Breadcrumbs and Search

" This video contains: Allowing the footer pane to stretch Creating the horizontal gradient line for the container Advanced background image placement How to implement the breadcru... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 13. Simple Cross Browser Testing and Compatibility

" This video contains: How to implement a box shadow on a container Simple cross browser testing How to make older Mozilla browsers and Safari display the box shadow and rounded corn... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 14. Preparing for Packaging, Extension Icon and Skin Thumbnails

" This video contains: Creating the extension icon Saving to the skin and containers folder Registering the skin as an extension How to add an extension icon for a skin How to ... "

Oct 01, 2011

2011 Edition \ 10. October/2011 \ 15. Packaging a Skin for DotNetNuke 6

" This video contains: Introduction Reviewing the Skin Manifest Testing the Skin Package How to Package Containers Merging the Skin and Container Packages Merging Two DotNetNuk... "

Sep 01, 2011

2011 Edition \ 9. September/2011 \ 2. A Second Look at DotNetNuke 6 - Introduction to the Dark Knight Skin

" "

Sep 01, 2014

2014 Edition \ 9. September/2014 \ 1. How to Customize a DNN Skin - Change a Background Image

" This video contains: Introduction Control panels and limitations Introduction to Chrome developer tools How to change background images Backing up and saving to skin.css "

Sep 01, 2014

2014 Edition \ 9. September/2014 \ 2. Background Techniques and Web Fonts

" This video contains: Understanding different background techniques Understanding layered semitransparent backgrounds How to override hardcoded styling Using Chrome's RGBA color p... "

Sep 01, 2014

2014 Edition \ 9. September/2014 \ 3. Working with Skin Layouts and Dimensions

" This video contains: How to duplicate a skin section Setting individual CSS classes Setting individual content pane IDs How to style a duplicated section independently How to a... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 1. DNN Garden - DDR Menu for DotNetNuke - Introduction

" This video contains: Introduction and module features How to download the module and associated templates DDR Menu module installation Explanation of automatic changes ... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 2. Adding the DDR Menu to a Skin and How to Change Animation Settings

" This video contains: Editing a skin.ascx file to switch from the default DotNetNuke DNN Nav Menu to the DDR Menu Adding a ‘register’ line of code into the skin file How to c... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 3. Implementing the DDR Treeview Menu

" This video contains: Creating a new skin to implement the DDR Treeview Menu Adding two new ‘register’ lines of code to your skin file to implement the treeview menu How to a... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 4. Implementing the DDR Superfish and Mega Menu

" This video contains: Adding the register code for the Superfish menu How to add the DDR menu Superfish control code into your skin file Extracting and installing the Superfi... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 5. Styling the DDR Mega Menu

" This video contains: How to style the DDR Mega Menu using CSS How to find out which CSS classes to use Setting the master link color for all root level and sub level menu it... "

Nov 01, 2010

2010 Edition \ 11. November/2010 \ 6. Styling the Mega Menu and Using the Menu Module

" This video contains: How to style the sub-sub menu level and sub-sub menu items Demonstration of a basic styled DDR Mega Menu How to change the number of sub-sub level colum... "

Nov 01, 2014

2014 Edition \ 11. November/2014 \ 1. Creating and Implementing an Icon Font for DNN

" This video contains: Introduction to Icon Fonts The advantage of online icon font services Signing up to Fontastic.me Selecting icons for inclusion in your font Advantages and ... "

Nov 01, 2014

2014 Edition \ 11. November/2014 \ 2. Creating and Including Custom Icons / Adding an Icon Font to your Skin File

" This video contains: Designing your own icon in Adobe Illustrator Exporting an icon as SVG How to add your custom icon to your icon font Using your custom icon How to include y... "

Feb 01, 2015

2015 Edition \ 2. February/2015 \ 1. How to Create Animated Transitions in DNN - Introduction and Effect Basic Setup

" This video contains: Introduction Accessing your skin files Setting up some basic Bootstrap 3 markup Adding CSS classes to the effect markup Creating the effect content Effec... "

Feb 01, 2015

2015 Edition \ 2. February/2015 \ 2. How to Create a Fade In, a Slide Up, and a Zoom In Effect

" This video contains: Adding the effects CSS class Adding useful commented sections in skin.css How to create the before state for the fade in effect How to create the after state... "

Feb 01, 2015

2015 Edition \ 2. February/2015 \ 3. Card Flip Horizontal Effect and Browser Specific Prefixes

" This video contains: Flipping the underside of the card with CSS3 3D transforms How to hide the back face of an element after a 3D transform How to flip the underside of the card o... "

Feb 01, 2015

2015 Edition \ 2. February/2015 \ 4. Applying our Effects to the 2SexyContent Portfolio App

" This video contains: Introduction to the 2SexyContent portfolio app tutorial How to create our effect markup in a 2SexyContent display template How to create an effect selector dro... "

Mar 01, 2015

2015 Edition \ 3. March/2015 \ 1. How to Achieve DNN HTML5 Compliance - Converting Your DNN Theme to HTML5

" This video contains: Introduction How to set the HTML5 theme doctype Introduction to the 5 most important HTML5 elements The header element The nav element The article elemen... "

Mar 01, 2015

2015 Edition \ 3. March/2015 \ 2. How to Set Up DNN 7 to be 100% HTML5 Compliant

" This video contains: Pre DNN 7.4 HTML5 Compliance Issues DNN 7.4 Illegal meta tags cleanup Introduction to the new DNN 7.4 page output settings How to remove the default anchor t... "

Apr 01, 2015

2015 Edition \ 4. April/2015 \ 1. How to Implement a Basic Bootstrap Accordion Plugin

" This video contains: Introduction to the Bootstrap documentation Basic implementation of the Bootstrap accordion on your DNN site Inherent issues with Bootstrap plugin markup How... "

Apr 01, 2015

2015 Edition \ 4. April/2015 \ 2. How to Create an Accordion App with 2SXC

" This video contains: How to create a 2SXC view template Splitting the accordion markup into repeating and non repeating sections How to create the repeating section in a 2SXC templ... "

Apr 01, 2015

2015 Edition \ 4. April/2015 \ 3. Adding Bootstrap's Modal Popup and Alert Plugins to the Accordion App

" This video contains: How to implement the Bootstrap modal popup plugin inside the accordion app Creating a 'read more' feature for the accordion app. How to implement the alert Boo... "

May 01, 2015

2015 Edition \ 5. May/2015 \ 1. Advanced Header Effects for DNN Themes - Setting up a Header to Fill the Viewport Height & Vertical Centering

" This video contains: Introduction Adding effect specific classes to the header Targeting and selecting effect classes with CSS How to use the new ‘vh’ units to achieve full viewp... "

May 01, 2015

2015 Edition \ 5. May/2015 \ 2. How to Create a Fixed Parallax Effect

" This video contains: How to create a basic fixed background parallax effect Introduction to scroll based jQuery parallax effects Creating a javascript file for your theme Includi... "

Jan 01, 2016

2016 Edition \ 1. January/2016 \ 1. How to Implement Multi Colour SVG Symbols in a DNN Theme - Introduction, Icomoon App and Importing

" This video contains: Introduction Introduction to icomoon.io How to import multicolour icons into the icomoon app How to export an SVG symbol definitions file with icomoon "

Jan 01, 2016

2016 Edition \ 1. January/2016 \ 2. Implementing and Using SVG Symbols in a DNN Theme

" This video contains: Copying the symbol definitions file to the theme folder Including the symbols with a register directive Placing the symbols at the top of the document How to... "

Jan 01, 2016

2016 Edition \ 1. January/2016 \ 3. Symbol Sizing, and Global Theming

" This video contains: Setting symbol sizes Creating a common colour palette for you symbols Recolouring individual symbol parts Changing a colour globally using an icomoon theme. ... "

Mar 01, 2016

2016 Edition \ 2. February-March/2016 \ 1. How to Create a Google's Material Design Theme for DNN - Introduction and Theme Setup

" This video contains: Introduction to Google Material Design Introduction to Material Design Lite How to Implement MDL in a DNN Theme Installing the Starter Theme Overview of Th... "

Mar 01, 2016

2016 Edition \ 2. February-March/2016 \ 2. Creating the Material Layout

" This video contains: Creating Your MDL Layout Introduction to the MDL Header Introduction to the MDL Navigation Introduction to the MDL Drawer Inserting the DNN DDR Menu and Co... "

Mar 01, 2016

2016 Edition \ 2. February-March/2016 \ 3. The Material Grid System and Other Features

" This video contains: Configuring the MDL Header Behavior Introduction to the MDL Grid System How to Implement the MDL Grid in a DNN Theme How to Configure Device Size Specific Gr... "

May 01, 2016

2016 Edition \ 3. April-May/2016 \ 1. How to Create a Google's Material Design Theme for DNN Part 2 - Introduction, Colour Scheme and Buttons

" This video contains: Introduction How to change the default colour scheme Changing the hosted MDL link Implementing the DNN login skin object Giving the login link a Material b... "

May 01, 2016

2016 Edition \ 3. April-May/2016 \ 2. Skin Objects, Footer and the DDR Menu

" This video contains: Adding the DNN terms and privacy skin objects to the footer How to implement a list of menu items in the MDL footer How to duplicate and implement a DDR menu t... "

May 01, 2016

2016 Edition \ 3. April-May/2016 \ 3. Responsive Classes and Tabs

" This video contains: How to hide elements at different screen widths Introduction to MDL tabs About tab href and IDs How to use MDL tabs within an HTML module Editing MDL tabbe... "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 1. How to use HTML5 Video in DNN - Introduction, Setting up an HTML5 Video Element

" This video contains: Introduction HTML5 video history Versatility and customisability Compatibility Uploading video to DNN How to add allowed file types Creating the video ... "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 2. File types and Fallbacks

" This video contains: Introduction Browser compatibility How to convert video into OGV Online video transcoding Setting the OGV fallback for Firefox "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 3. The Poster Image Attribute

" This video contains: Description of the poster image attribute How to configure the poster image "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 4. How to Create a Fullscreen HTML5 Video Pane for a DNN Theme

" This video contains: Creating a fullscreen video container Adding the HTML5 video element Configuring the element How to overlay content Vertically and horizontally centering content "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 1. Typography for DNN8 Themes - Introduction, Default.css, Default Browser Typography

" This video contains: Overview of the basic theme How to switch from the DNN7 default.css to DNN8 default.css Why switch default.css files? Accessing the Chrome Developer Tools ... "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 2. Choosing and Implementing the Correct Fonts

" This video contains: Choosing the perfect header font The importance of the perfect header font Font Readability How to implement a web font Choosing the perfect body font Ho... "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 3. Responsive Typography and Colors

" This video contains: Setting the base font size Optimizing for mobile screens Line height and spacing for readability Setting heading element sizes Adapting typography for vari... "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 1. How to Create Responsive Themes with CSS3 Flexbox - Introduction And Setting Up

" This video contains: Introduction Installing the Flexbox starter theme Accessing the skin.css file within Chrome developer tools Skin.css mobile first overview "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 2. Creating a Responsive DDR Menu With Flexbox

" This video contains: Basic CSS menu styling Building the mobile menu Initializing the Flexbox container How to use flex-direction Building the tablet menu Menu item justifica... "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 3. Creating a Responsive Theme Layout With Flexbox

" This video contains: Creating the theme section markup Creating the stacked mobile view Reordering Flexbox items How to build a multi-row 2 column flexbox layout Flexbox respon... "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 1. How to Create a Stackable Heading DNN Theme With Slinky JS - Introduction and Theme Setup

" This video contains: Introduction Installing the DNNC Basic theme Overview of Slinky JS markup Creating the slinky markup inside a DNN theme Adding the required Slinky JS CSS "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 2. Slinky JS Container and Header Styling

" This video contains: How to create a DNN slinky container Duplicating a current container Clearing up the container Creating the slinky section HTML markup Setting slinky conta... "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 3. Theme Styling and Heading Coloring

" This video contains: Improving theme readability and spacing How to reset the plugin after a live CSS change How to create the alternating heading colors "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 1. How to Create an Events List with Schema.org Structured Data and 2sxc

" This video contains: Introduction to structured data What is Schema.org? Example of structured data on display in Google search results How can we implement structured data in DN... "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 2. Configuring the 2sxc Data Type

" This video contains: How to create new fields for a 2sxc content type Choosing which structured data fields to collect Picking a 2sxc data type How to change the field static nam... "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 3. Developing the events list view template

" This video contains: How to inject field data into a razor template How to format the data from a DateTime field DateTime to ISO 8601 format How to examine the template output "

May 01, 2017

2017 Edition \ 3. April-May/2017 \ 1. How to Create DNN Themes Using CSS Grid Layout - Introduction

" This video contains: Introduction, Setting up the Theme and Markup Installing and setting up the basic theme CSS Grid browser support Theme file contents Creating the basic HTM... "

May 01, 2017

2017 Edition \ 3. April-May/2017 \ 3. Grid Area Placement and Configuration

" This video contains: How to set section column start and end lines How to set section row start and end lines Pushing the footer to the bottom of the page Other CSS Grid features... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 1. How to Create a Complete DNN Theme Using CSS Grid and Flexbox - Introduction, Media Queries, Typography

" This video contains: Introduction Theme plan How to "responsify" the CSS Grid theme Adding CSS media queries Applying the CSS grid to only tablets and above Importing the typ... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 2. Flexbox Responsive Menu, Responsive Gutters and Padding

" This video contains: Setting up the flexbox responsive menu from the flexbox theme Adjusting theme background colours How to add an extra gutter to the CSS grid Responsive gutter... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 3. DNN Login and Auto Hiding Panes

" This video contains: How to add the DNN login skin object Link styling How to create an auto hiding slider section Adding the DNN content panes Auto hiding empty sections with CSS Grid "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 1. Introduction and Implementation of the FAB Menu

" This video contains: Introduction Locating your theme folder and files How to implement CSS code from GitHub Removing the CSS source map How to include the Ionicons icon font ... "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 2. Labels, Icons and Hyperlinks

" This video contains: How to set button labels How to choose and set the item icons Creating menu items Setting up FAB button hyperlinks "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 3. Individual Item Styling & Touch Friendliness

" This video contains: How to style individual menu buttons independently Adding individual item classes How to target each item with a CSS selector How to include the FAB button j... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 1. Introduction - How to Integrate a Chat Widget into a DNN Theme

" This video contains: Introduction How to sign up to Drift.com chat Initial chat widget customisation Initial default message customisation How to connect to your DNN theme file... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 2. Including the Chat Widget in a Theme

" This video contains: How to include the chat widget javascript code in your theme head Introduction to Client Resource Management How to create the DnnJsInclude user control Sett... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 3. Chat Widget Settings and Advanced API Setup

" This video contains: Walkthrough of the chat widget settings How to take the widget online and offline Scheduled online and offline Team availability How to set the offline mes... "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 1. Introduction and Basic Accessibility

" This video contains: Introduction to web accessibility The three main accessibility techniques Basic image accessibility Link accessibility Images inside links "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 2. HTML5 and WAI-ARIA Landmark Roles

" This video contains: Introduction to HTML5 accessibility MAIN and NAV elements Introduction to the WAI-ARIA landmark roles Screen reader landmark testing How to implement the M... "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 3. Other Landmarks and Colour Contrast Testing

" This video contains: How to implement the complementary landmark How to implement the contentinfo and search landmarks Introduction to colour contrast accessibility How to test y... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 1. Apple Style Menu for DNN - Introduction, Starter Theme and Basic Styling

" This video contains: Introduction Page structure Applying the starter theme Overview of theme files Menu system markup Overview of skin.css file How to make the menu items ... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 2. Styling the Main Menu and Revealing with jQuery

" This video contains: Main menu styling When mobile first styling is not a good idea Creating a mobile only media query Making the main menu full screen Z-index ordering How t... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 3. Sub Menu Styling, Max-Height Animations

" This video contains: Styling the sub menu Centering elements using absolute positioning and translateX Setting up the transform rotate animation Styling and placing the sub menu ... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 4. Styling the Tablet and Desktop Menu

" This video contains: Hiding the various elements in tablet view How to style the main menu for desktop How to style the sub menu for desktop Floating the sub menu items right S... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 1. Modern DNN Theme Development with nvQuickTheme - Introduction, Installation and Setup

" This video contains: Introduction Requirements Setting up a local DNN installation Downloading and unpackaging the nvQuickTheme How to install Nodejs Installing Yarn How to... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 2. Creating a New Theme Layout, Using Bootsrap 4

" This video contains: Exploring the nvQuickTheme structure How to create a new theme layout How to add new Bootstrap 4 markup Adding a jumbotron section Converting the jumbotron... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 3. SASS, Sourcemaps, and Bootstrap 4 Variables

" This video contains: Introduction to SASS How to change SASS variables How to change the main theme colours Integrating SASS sourcemaps into the Gulp workflow Adding a local fo... "

How to Develop a Detached DNN Front End with React JS - Introduction, Installing and Designing a 2sxc App for a REST API

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 1. How to Develop a Detached DNN Front End with React JS - Introduction, Installing and Designing a 2sxc App for a REST API

" This video contains: Introduction How to download and install the 2sxc module How to create a 2sxc app Javascript friendly naming conventions Creating the movies content type ... "

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 2. Designing the API and Setting up a Basic React App

" This video contains: How to create the API pipeline Setting API public permissions How to install NPM with Node JS Introduction to the command line Setting up a basic zero conf... "

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 3. Basics of a React App, Consuming a REST API, Displaying Data

" This video contains: React component overview React lifecycle methods Using the Fetch Javascript API to retrieve our Movies How to allow 'CORS' Cross Origin Resource Sharing in D... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 1. Introduction, React Components and Integrating Bootstrap 4

" This video contains: Introduction How to add Bootstrap 4 to your React project Introduction to React Components How to setup a new child component Render a child component with... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 2. String and Date Manipulation, Bootstrap Card Component

" This video contains: Implementing the bootstrap 4 container and row for responsivity Reactifying the Bootstrap card component How to turn a DNN relative URL into an absolute URL in... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 3. Developing an Item Filter and Filter UI

" This video contains: Duplicating the main movie array for filtering Committing multiple arrays to state at the same time Setting up the user interface How to set up a select elem... "

Tag: skin

Videos