Issuu test - A34599DS by Jbloom Designs

Skin User Guide 1. The First Step Begins Here........................................................................................ 2 2. Install DNN 6 Skins................................................................................................... 2 3. Install DNN 7 Skins................................................................................................... 2 4. Import All Page Templates Like Our Demo...............................................................3 5. Build A Site Like Our Demo Site...............................................................................3 6. Use The Style Customized Tool................................................................................. 4 7. Remove The Style Customized Tool.......................................................................... 5 8. Add The Slider Banners............................................................................................. 5 9. Add CSS3 Animation Effects..................................................................................... 9 10. Add Carousel Slider................................................................................................10 11. Add Isotope Effect.................................................................................................. 11 12. Create Pictures Lightbox........................................................................................ 12 13. Create Accordion....................................................................................................12 14. Create Tabs............................................................................................................. 13 15. Add Social Media Icons......................................................................................... 13 16. Use Font Icons........................................................................................................14 17. Create A LeftMenu Page........................................................................................ 14 18. Add An Icon For The Menu Item........................................................................... 14 19. Upload Your Own Logo......................................................................................... 15 20. Use The Social Layout On DNN 6.2.x...................................................................15 21. Use All Components From Twitter Bootstrap........................................................ 15 22. Some CSS Styles Instruction..................................................................................16

1. The First Step Begins Here Thank you for choosing Star skin pack. Before you upload the skin to your site, you must unzip the downloaded file â&#x20AC;&#x153;UnzipMe_Star-Skin_V02.00.00.zipâ&#x20AC;?. You will find the skin installation package file:

The skin can be used in DNN 6.2 ~ 7.x. If your DNN version is below 6.2, we suggest you upgrade the site at first.

2. Install DNN 6 Skins You can follow these steps: a. Login your site b. Go to Host/Extensions c. Hover over "Manage" button. d. Click "Install Extension Wizard" e. Click on browse and select the skin install file f. Ignore the File Restrictions, and the Click Next, Next, Next. g. Return h. Click "Admin/Skins ". You will find the skin in the drop-down list of "Skins".

3. Install DNN 7 Skins You can follow these steps: a. Login your site b. Go to Host/Extensions c. Click "Install Extension Wizard" d. Click on browse and select the skin install file e. Ignore the File Restrictions, and the Click Next, Next, Next. f. Return g. Click "Admin/Skins ". You will find the skin in the drop-down list of "Skins".

4. Import All Page Templates Like Our Demo We provide most page templates in "Page Templates" folder. You follow these steps to add the page template on your site: 1) Install Star skin at first. Because the default skin for each pages is Star skin. 2) Login FTP and Upload all demo images to ../Portals/0/.

( You can find the files in

"Page Templates" folder) 3) Upload the template files to ../Portals/0/Templates. 4) Click Pages >> Import on your site, choose one template and create a page or replace a current page.

5. Build A Site Like Our Demo Site We provide the demo site template for DNN 7.1+ (Only can be used for DNN version 7.1+ ). You can see the template files in â&#x20AC;&#x153;DemoSite Templateâ&#x20AC;? folder. Just do the following steps to build a site like our demo site. 1) Install Star skin. 2) Login your site FTP and upload the template files: Star Skin Demo Site.template, Star Skin Demo Site.template.resources to ../Portals/_default 3) When you build a new site in Host >> Site Management, you can choose the template: Star Skin Demo Site. you will get the site the same as our demo site.

If you want to re-build a site with our demo template , please go to Admin >> Site-Wizard, then click Next, then choose our site template:

6. Use The Style Customized Tool The custom panel is only visible by Administrator. When you click the gear button on the left edge of page, the custom panel will slide out.

1) Set Custom Settings: You can follow the above diagram to set the custom styles. The custom styles will be saved in the browser Cookie. You can click "Reset" button to return all default values. * The Background Pattern will only be visible when you choose boxed width mode. * The Megamenu columns options are only for megamenu layout. 2) Save Custom Settings: After you confirm the custom styles, you can click â&#x20AC;&#x153;Saveâ&#x20AC;? button to save all custom styles. The custom CSS will be saved in CustomStyle.css file in ./Portals/_default/Skins/Star After you save custom styles, we suggest you click "Reset" button to clear all browser cookies, or else the cookies will still take effect and may cause the page confused.

7. Remove The Style Customized Tool If you want to remove the custom panel, please open AddScripts.ascx in “commonparts” folder and remove the following codes: <% if (IsUserAdmin()) %> <% { %> <script type="text/javascript" src="<%= TemplateSourceDirectory %>/js/colorpicker/js/colorpicker.js"></script> <script type="text/javascript" src="<%= TemplateSourceDirectory %>/js/colorpicker/js/eye.js"></script> <script type="text/javascript" src="<%= TemplateSourceDirectory %>/js/colorpicker/js/utils.js"></script> <script type="text/javascript" src="<%= TemplateSourceDirectory %>/js/jquery.cookie.js"></script> <script type="text/javascript" src="<%= TemplateSourceDirectory %>/js/style.customtool.js"></script> <% } %>

8. Add The Slider Banners The skin includes 4 slider JS plugins, we provided 13 banner templates for you. You can find the slider templates in “Banner Sliders Templates” folder. Then, You can follow these steps: a. Add a HTML module to BannerPane. b. Choose “NoTitle” container as the module container. c. Paste the template codes into the HTML module (Choose "HTML" mode in HTML Editor, not "Design" mode). d. Edit the template. 1) Layer Slider When you want to add a Layer Slider, you can add a HTML module, then please choose “LayerSlider” container as the module container at first. We provide 4 different slider templates in “Banner Sliders Templates\Layerslider” folder. You can find them on different pages on our demo site: A. Simple 2D Slider 5

http://demo.bestdnnskins.com/Star2/BannerSlider/LayerSlider/Simple2DSlider B. Simple 3D Slider http://demo.bestdnnskins.com/Star2/BannerSlider/LayerSlider/Simple3DSlider C. Layers 2D Slider http://demo.bestdnnskins.com/Star2/BannerSlider/LayerSlider/MultiLayers2DSlider D. Layers 3D Slider http://demo.bestdnnskins.com/Star2/BannerSlider/LayerSlider/MultiLayers3DSlider You should choose “LayerSlider” container as the module container at first. If you want to create a custom slider based on layer silder, we suggest you edit the codes on our template html pages in "Layerslider Templates" , then you can see the effect directly after you save the codes. After you finish the custom slider, you can copy the template codes to DNN HTML Editor. Please copy the codes between:   If you need more informations about layersilder, please see the "Layerslider Original File.zip" in "UnzipMe_Other Files.zip". You can read “documentation.html” file to learn the usage of the slider, also see more examples about the slider. 2) Flex Slider We provide 10 different slider templates in “Banner Sliders Templates” folder. You can find them on different pages on our demo site: E. FlexSlider - Slide Pictures http://demo.bestdnnskins.com/Star2/BannerSlider/FlexSlider/SlidePictures F. FlexSlider - Fade Pictures http://demo.bestdnnskins.com/Star2/BannerSlider/FlexSlider/FadePictures G. FlexSlider - Left Word Right Image http://demo.bestdnnskins.com/Star2/BannerSlider/FlexSlider/LeftWordRightImage H. FlexSlider - Left Image Right Word http://demo.bestdnnskins.com/Star2/BannerSlider/FlexSlider/LeftImageRightWord 

We provide different class names for different slide effects: class="flexslider" ---- Slide Effect class="flexslider2" ---- Fade Effect class="flexslider_thum" ---- Fade Effect with Thumbnails

You can choose one class name for your custom slider. 

If you want to change some css settings about the slider, please open flexslider.css file in css folder and edit the css settings there.



If you want to change the slide speed, please open custom.js file in js folder and edit the js settings:

We also attach the original files of the slider plugin in UnzipMe_Other-Files.zip. You would see more detailed Instruction and examples about the sliders and learn to customize the slider. 3 Trans-banner Slider A. Slide Pictures: http://demo.bestdnnskins.com/Star2/BannerSlider/Trans-bannerSlider/SlidePictures B. Slide Pictures with Caption: http://demo.bestdnnskins.com/Star2/BannerSlider/Trans-bannerSlider/PictureswithCaptio n 

If you want to reset the size of the slider, you can open trans-banner.css in skin/css folder and find these codes:

.TB_Wrapper { position: relative; background: #EEEEEE url(../images/TB-preloader.gif) center center no-repeat; max-width: 1600px; height: 560px; } Please reset the settings the same as the size of your banner. 

If you want to reset the js settings for the slide banner. Please open custom.js in skin / js folder and see here:

You can reset the slide_delaytime:6 to change the the delay time of each banner. We also attach the original files of the slider plugin in UnzipMe_Other-Files.zip. You can see more detailed Instruction and examples about the sliders and learn to customize the sliders. 4) Unoslider A. Unoslider http://demo.bestdnnskins.com/Star2/BannerSlider/Unoslider/SlidePictures B. Unoslider with Caption http://demo.bestdnnskins.com/Star2/BannerSlider/Unoslider/PictureswithCaption B. Unoslider 1140*440 ( id="slider2" ) http://demo.bestdnnskins.com/Star2/Pages/FullWidth C. Unoslider 840*385 ( id="slider3" ) http://demo.bestdnnskins.com/star2/Pages/LeftSidebar D. Unoslider 570*300 ( id="slider4” ) http://demo.bestdnnskins.com/star2/Pages/AboutUs

We offer four different sizes for the Unoslider: 1) id="slider"

1600 * 560

2) id="slider2"

1140* 440

3) id="slider3"

840* 385

4) id="slider4"

570* 300



If you want to change some CSS settings for this slider, please open unoslider.css file in css folder and edit the CSS settings there.



You can also open custom.js file in js folder and edit some js settings:

You can change the width and height of the slider, also can reset the speed of slider, the value is bigger, the speed is lower. We also attach the original files of the slider plugin in UnzipMe_Other-Files.zip. You would see more detailed Instruction and examples about the sliders and learn to customize the slider.

9. Add CSS3 Animation Effects The skin is embedded a free CSS3 plugin from http://daneden.me/animate There are many CSS animation effects in the plugin. You can learn more about it on the site. Many modern browsers can support the effect, except IE9 and below IE version. You have two ways to add the animation effect: 1) Animation effect Start when page load The effect will Start when page load, we suggest you use this way for the content on page top area. The template codes as follows: <div class="animated scaleUp "> Lorem ipsum dolor sit amet... </div> <div class="animated periodic1"> Lorem ipsum dolor sit amet... </div> 2) Animation effect Start when scroll down The effect will Start when the page scroll down, we suggest you use this way for the content on page middle and area. Or else, the content will not display when the page havenâ&#x20AC;&#x2122;t scrolled. The template codes as follows: <div class="animation scaleUp "> Lorem ipsum dolor sit amet... </div> <div class="animation periodic1"> Lorem ipsum dolor sit amet... </div> The difference in both ways is the css name: animated and animation .

10. Add Carousel Slider We provide the four carousel template in "Content Templates". Just follow these steps: a. Add a HTML module. b. Paste the template codes from "Carousel Two Items", "Carousel Three Items", "Carousel Four Items", "Carousel Six Items" into the HTML module. c. Edit the template. You can also create your custom carousel based on each basic template. 1) Carousel Two Items: http://demo.bestdnnskins.com/star2/Home/HomeVersion3

2) Carousel Three Items:

3) Carousel Four Items:

4) Carousel Six Items:

http://demo.bestdnnskins.com/star2/Home/HomeVersion4

http://demo.bestdnnskins.com/star2/Home/HomeVersion1

http://demo.bestdnnskins.com/star2/Home/HomeVersion5

11. Add Isotope Effect You can the demos in http://demo.bestdnnskins.com/star2/Home/HomeVersion2 http://demo.bestdnnskins.com/Star2/Portfolio/SortablePortfolio/TwoColumns http://demo.bestdnnskins.com/Star2/Portfolio/SortablePortfolio/ThreeColumns http://demo.bestdnnskins.com/Star2/Portfolio/SortablePortfolio/FourColumns We provide the Isotope template in "Content Templates" folder. You can follow these steps: a. Add a HTML module. b. Copy the "Isotope" template into the HTML module. c. Edit the template. When you click "All", all elements will display. When you click "DESIGN", only those which are added css name "design" will display, see the following correspondence:

12. Create Pictures Lightbox We provide the lightbox template in "Content Templates" folder. You can follow these steps: a. Add a HTML module. b. Paste the "Lightbox" template codes into the HTML module. c. Edit the template. The basic frame:

<a href="../xxx.jpg" title="xxx" class="fancybox" data-fancybox-group="group"><img alt="" src="../xxx-thum.jpg" /></a> Please add the big picture path in href="xxx.jpg", add the thumbnail path in <img alt="" src="../xxx-thum.jpg" />

13. Create Accordion We provide the two Accordion templates in "Content Templates" folder. Follow these steps: a. Add a HTML module. b. Paste the "Accordion" template codes into the HTML module. c. Edit the template.

14. Create Tabs We provide the Tabs template in "Content Templates". You can follow these steps: a. Add a HTML module. b. Paste the "Tabs" template codes into the HTML module. c. Edit the template. You can also create your custom vertical slider based on "Tabs Basic". You can find the css settings codes in all.css file under: /*--------- Togglable Tabs Style ----------*/

15. Add Social Media Icons The skin includes three group of major social media icons. You see the demo page: http://demo.bestdnnskins.com/Star2/Shortcodes/SocialIcons You can find the "Social Icons" template in "Content Templates" folder. Follow these steps to add them: a. Add a HTML module. b. Paste the "Social Icons" template codes into the HTML module. c. Edit the template. All social icons settings are set in skin.css. Under /* Social-Links */ .. /* Social-Links2 */.. /* Social-Links3 */ Please choose some css names which you need and add them into the templates.

You can also go to http://demo.bestdnnskins.com/Star2/Components/FontIcon

choose the font social media icons. They are in â&#x20AC;&#x153;Brand Iconsâ&#x20AC;? group.

16. Use Font Icons You can find all font icons on this page: http://demo.bestdnnskins.com/Star2/Components/FontIcon . There are more than 400 icons available. The font icons example as follows: <span class="fa fa-search"></span> <div style="font-size:15px;"><span class="fa fa-search"></span></div> <div style="color:#0033FF;"><span class="fa fa-search"></span></div> <div style="background:#333;"><span class="fa fa-search"></span></div> You can just regard <span class="fa fa-search"></span> as a letter, and you can set the font-size, color and background. If you want to replace the icon, just change fa-search , you can find all icons in the tables.

17. Create A LeftMenu Page If you want to use the LeftMenu layout skin for a page. The page should meet one of following conditions. 1) The page is a level2 page 2) The page is the parent page of level2 page.

18. Add An Icon For The Menu Item Please go to Page Settings >> Advanced Settings >> Icon, you can upload an icon and

choose it, then update page. You will see the menu icon.

19. Upload Your Own Logo Please go to Admin >> Site Settings >> Appearance >> Logo. You can upload an image there and set it as logo.

20. Use The Social Layout On DNN 6.2.x We provide the layout Sketches in "Social Layouts For DNN6.2" folder. When you are using DNN 6.2, please refer to them and move the social modules to corresponding panes.

21. Use All Components From Twitter Bootstrap We have offered the demo use for Typography options and JavaScript plugins on our demo site, please see: Typography: http://demo.bestdnnskins.com/Star2/Components/Typography Alerts: http://demo.bestdnnskins.com/Star2/Shortcodes/Alerts Buttons: http://demo.bestdnnskins.com/Star2/Shortcodes/Buttons Collapse: http://demo.bestdnnskins.com/Star2/Shortcodes/Collapse Drop Downs: http://demo.bestdnnskins.com/Star2/Shortcodes/Dropdowns Font Icon: http://demo.bestdnnskins.com/Star2/Shortcodes/FontIcon Images: http://demo.bestdnnskins.com/Star2/Shortcodes/Images Labels & Badges: http://demo.bestdnnskins.com/Star2/Shortcodes/LabelsBadges Modals: http://demo.bestdnnskins.com/Star2/Shortcodes/Modals Pagination: http://demo.bestdnnskins.com/Star2/Shortcodes/Pagination 15

Panels: http://demo.bestdnnskins.com/Star2/Shortcodes/Panels Popovers: http://demo.bestdnnskins.com/Star2/Shortcodes/Popovers Progress bar: http://demo.bestdnnskins.com/Star2/Shortcodes/ProgressBar Social Icons: http://demo.bestdnnskins.com/Star2/Shortcodes/SocialIcons Tabs: http://demo.bestdnnskins.com/Star2/Shortcodes/TogglableTabs Tooltips: http://demo.bestdnnskins.com/Star2/Shortcodes/Tooltips You can go to http://getbootstrap.com/ learn more about Bootstrap 3.x. The skin imports most components in Bootstrap except "Forms", because "Forms" styles from Bootstrap conflict with DNN default form styles.

22. Some CSS Styles Instruction 1) Google Fonts By default the heading use “Open Sans” and the body text use "Open Sans", but if you want to use another google font, you can edit these codes in skin.css: @import url(http://fonts.googleapis.com/css?family=Open+Sans); You can also use CSS3 font-face to import a new font: http://www.w3schools.com/css3/css3_fonts.asp 2) Content font It’s 'Open Sans',Arial, sans-serif; by default, but if you want to use another font you can open skin.css file and reset the font-family settings. 3) Headings Settings If you want to reset headings, please open skin.css file and find the following codes: h1{font-size:28px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;} h2{font-size:24px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;} h3{font-size:20px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;} h4{font-size:18px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;} h5{font-size:16px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;}

h6{font-size:14px;line-height:1.5em;letter-spacing:0;color:#007AFF;font-weight:normal;fo nt-family:'Open Sans',Arial, Tahoma, sans-serif;} 4) Spacer Settings We have set different spacer settings in skin.css. CSS codes as follows: .pe-spacer.sizS16 { height: 10px;} .pe-spacer.size20 { height: 20px;} .pe-spacer.size30 { height: 30px;} .pe-spacer.size40 { height: 40px;} .pe-spacer.size50 { height: 50px;} .pe-spacer.size60 { height: 60px;} .pe-spacer.size70 { height: 70px;} .pe-spacer.size80 { height: 80px;} .pe-spacer.size90 { height: 90px;} .pe-spacer.sizS160 { height: 100px;} You can get different spacer by the following html codes: <div class="pe-spacer sizS16"></div>  <div class="pe-spacer size20"></div>  <div class="pe-spacer size30"></div>  5) Border Settings We have set different border settings in skin.css. CSS codes as follows: .left_border{ border-left:1px solid #e9e9e9;} .right_border{ border-right:1px solid #e9e9e9;} .top_border{ border-top:1px solid #e9e9e9;} .bottom_border{ border-bottom:1px solid #e9e9e9;} You can get different border by the following html codes: <div class="left_border"></div>  <div class="right_border"></div>  <div class="top_border"></div>  <div class="bottom_border"></div>  6) PC display and mobile display We provide two css settings in skin.css and mobile.css for PC display and mobile display. .pc_display { display:block;} .mobile_display { display:none;} If you want a div/tag display on PC, but not mobile, please add css name pc_display. 17

If you want a div/tag display on mobile, but not PC, please add css name mobile_display. 7) Color Text and Color Background We provide two css name settings in skin.css file: .color_text { color:#007AFF; } .color_bg{ background:#007AFF;} You can add the css name to a div/tag to get the same color as the skin color scheme.

If you have any questions about the skin, please let us know. E-mail: contact@bestdnnskins.com