128 video results for
skin
Videos
Feb 01, 2014
"
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
"
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
"
This video contains:
Creating content;
Customising skin sections;
Styling content;
Introduction to mobile first design;
"
Feb 01, 2014
"
This video contains:
Setting up media queries;
Styling the mobile view;
Styling tablet view;
Creating the semi transparent Navbar and Logobar;
"
Jul 01, 2014
"
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
"
This video contains:
Introduction to various XSL templates;
"
Nov 01, 2013
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
This video contains:
Slicing and exporting the remaining background images
How to determine the div border color
"
Oct 01, 2011
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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, 2014
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
This video contains:
Introduction
Browser compatibility
How to convert video into OGV
Online video transcoding
Setting the OGV fallback for Firefox
"
Jul 01, 2016
"
This video contains:
Description of the poster image attribute
How to configure the poster image
"
Jul 01, 2016
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
Sep 05, 2015
"
In this video you will understand what a theme (or skin) is and what are panes as well.
"
Sep 05, 2015
"
In this video you will find out the different themes that come with DNN 7.4 out of the box
"
Nov 01, 2015
"
In this video you will learn how to install a new theme or skin on your DNN site as well as where to find commercial and open source themes.
"
Apr 14, 2016
"
In this video we will talk about how you can fix the most common issue you may come across when using a theme that is not compatible with DNN 8
"
Mar 01, 2017
"
Let's talk about the basic requirements necessary as the foundation to DNN theming as well as "good-to-know" technologies that will have you further advance.
"
Mar 01, 2017
"
Let's get our hands dirty and start working on a basic new DNN theme. This is part 1 of 3.
"
Mar 01, 2017
"
Let's get our hands dirty and start working on a basic new DNN theme. This is part 2 of 3.
"
Mar 01, 2017
"
Let's get our hands dirty and start working on a basic new DNN theme. This is part 13 of 3.
"
Mar 01, 2017
"
Let's talk about one of the DNN skin objects called Breadcrumbs. This is part 1 of 7.
"
Mar 01, 2017
"
Let's talk about another DNN skin object called Copyright. This is part 2 of 7.
"
Mar 01, 2017
"
Let's talk about another DNN skin object that will display the current date. This is part 3 of 7.
"
Mar 01, 2017
"
Let's talk about one of the DNN skin objects called Hostname. This is part 4 of 7.
"
Mar 01, 2017
"
Let's talk about the DNN skin object that places the site's logo on the page. This is part 5 of 7.
"
Mar 01, 2017
"
Let's talk about another DNN skin object called Privacy. This is part 6 of 7.
"
Mar 01, 2017
"
Let's talk about another DNN skin object called Terms. This is part 7 of 7.
"
May 01, 2017
"
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
"
This video contains:
How to determine grid lines and gutters
Creating a basic columns template
How to determine row lines
Creating a basic rows template
Introduction to gutters...
"
May 01, 2017
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
This video contains:
Introduction to web accessibility
The three main accessibility techniques
Basic image accessibility
Link accessibility
Images inside links
"
Jan 01, 2018
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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
"
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...
"
Jul 01, 2018
"
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
"
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
"
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
"
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
"
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...
"