From Ordinary to Extraordinary

Transcription

1 From Ordinary to Extraordinary Ben Schmidt

2 Dedicated & Innovative Web Developers Web Development Internet Marketing SEO & Adwords Social Media Marketing Graphic Design Working World-Wide with DNN Since 2003

3 Why Customize Modules? Create Full Proof Solutions for Keeping Sites Looking Good Easily add content for complex designs Won t sacrifice quality for content input by clients/admins

4 Ventrian News Module Out of the box, this 3 rd party module is used for news article postings But with some customization can be used for Portfolio Listings Directories Blog Posts & More

5 Ventrian News Module Examples What you can do with this

6 Ventrian News Module

7 Ventrian News Module

8 Ventrian News Module

9 Ventrian News Module

10 Ventrian News Module

11 Setting Up Ventrian Portfolio Example Fields/Tokens Needed: Fields/Tokens Needed on Hover: Image (default token) Background color on hover Categories (default token) View Details (default token) Case Study Link Link Color

12 Setting Up Ventrian Portfolio Example Add News Article Module to Page and click on Admin Options Click on Custom Fields to add the needed fields.

13 Setting Up Ventrian Portfolio Example In this example, we need custom fields for: Background color on hover Case Study Link Link Color

14 Setting Up Ventrian Portfolio Example Create New Ventrian Template: In ftp, duplicate the Default or Standard folder and renamed it Go back to admin options and click on Main Options and change the template

15 Setting Up the HTML with Ventrian Portfolio Example TOKENS: Use Ventrian s Tokens along with your HTML. [IMAGE] [TITLE] [ARTICLELINK] [SUMMARY] [DETAILS] [CATEGORIES] [CUSTOM:XXX] Default Tokens Custom Tokens We ll Use [CUSTOM:Background-Color] [CUSTOM:Link-Color] [CUSTOM:CaseStudy-Link] [HASVALUE:XXX][/HASVALUE:XXX] See Ventrians Website for a complete list.

16 Setting Up the HTML with Ventrian Portfolio Example The HTML: Add classes to your tokens and style with css/javascript as needed.

17 Form and List Core DNN Module Used For Inputting Various Field Types But with some customization can be used for: Complex Listings Rotating Banners Testimonials Accordions

18 Form and List Examples What you can do with this

19 Form and List

20 Form and List

21 Form and List

22 Form and List

23 Form and List Rotator Example Configuration Click the configuration button to get started.

24 Form and List Rotator Example Adding Fields We need to add options for the user. Click Add New Column to do this.

25 Form and List Rotator Example Field Details Input your fields and choose the settings (Type, Text, Image, Required, ect.)

26 Form and List Rotator Example Adding Entries This is now what the user will see when they want to add a slide

27 Form and List Rotator Example What It Looks Like Here are some sample slides but with no style or functionality added.

28 Form and List Rotator Example Applying a Plugin with cycle2.js

29 Form and List Setting up the Display 1. Under Page Related Settings Tab we sill set up the display 2. Choose XSLT for the Rendering Method and then click on Generate New 3. Change Your List Type to Division, then Generate From HTML Template

30 Form and List Setting up the XSLT 1.) Get rid of the ; after each field 2.) Add classes to each of your fields (sort, image, & title) so you can style 3.) Reference the cycle to plugin to add in the necessary classes and javascript

31 Form and List Referencing the cycle2 plugin 1.) We need to wrap all the entries in <div class="cycle- slideshow"> in order for this plugin to work

32 Form and List Referencing the cycle2 plugin 2.) We also need to change the selector string from > img to > div so the plugin knows what to rotate a.) add a variable to change this b.) call out that variable

33 Form and List Referencing the cycle2 plugin 3.) Adding Features Like Previous & Next Buttons Reference the plugin and add the necessary data attributes and mark up

34 Form and List Styling the Plugin Add css to the plugin it needs or customize it yourself.

35 THANKS TO ALL OF OUR GENEROUS SPONSORS!