Page 1

Website Responsive DNN Manual By WebSitesCreative

1


Tables of contents Tables of contents Part 1: Skin installation and setup Skin and required modules installing Part 2: Content importing Home page reproducing using Page Template Contact us form Part 3: Customization Custom styles Using shortcodes Setting up your branding color Changing headers font Changing paragraphs font Changing website slogan Changing Top Navigation links Part 4: PostIT Blog module Benefits of using Responsive + PostIT Module installing Adding posts DISQUS comments Additional blog settings Additional latest posts feed settings Part 5: SlideMe Banner/Portfolio/Gallery DNN module Benefits of using Responsive + SlideMe Module installing Home page banner slider implementing Home page banner slider content management Using gallery/portfolio mode Portfolio content management Switching to plain image gallery Using Tabs mode Part 6: Additional services Custom development by WebSitesCreative

2


Part 1: Skin installation and setup Skin and required modules installing 1. Install Skin.WebsiteResponsiveInstall_xx_xx_xx.zip skin via Host –> Extensions –> Install

Extension wizard.

2. After the installation has been completed navigate to Admin –> Site Settings –> Basic

Settings (tab) –> Appearance (section) and specify portal and edit skins and containers like shown in the screenshot below. It should be done, for your DNN admin UI to look correctly and readable. Click “Update” button.

3. The skin uses lots of jQuery effects, that is why you need to turn on jQuery navigation to

Host –> Host Settings –> Advanced Settings (tab) –> jQuery Settings (section). Check Use Hosted jQuery Version as shown in the screenshot below and click Update button at the bottom of the page.

3


4. Download WebsiteResponsiveContent.zip package using this link or contact

wsc.zendesk.com if you have any problems with downloading. This package contains all images and exported live demo page templates. Unzip content and templates folders from WebsiteResponsiveContent.zip package into your portal root (e.g <dnn root>/Portals/0/). These folders contain all default images and live demo page templates which will be required during the content importing. 5. Synchronize your root files via Admin â&#x20AC;&#x201C;>File Manager so that DNN could detect the

recently added files and folders.

New folders should appear in folders tree. 6. Now you can for example specify default live demo logo via Admin â&#x20AC;&#x201C;> Site Settings

which you can find in the <dnn root>/Portals/0/content/logo.png directory.

4


7. You can also already able to start using page templates to reproduce live demo pages.

Have a look at Part 2: Content importing for details.

5


Part 2: Content importing Exported page templates will allow you to reproduce our live demo pages. We’ll reproduce the home page as an example.

Home page reproducing using Page Template 1. As you’ve already unzipped Templates folder of WebsiteResponsiveContent.zip

package into your portal root (e.g. Portals/0/Templates/) at the previous chapter and synchronized your folders you are able to start using page templates to clone live demo pages. 2. Navigate to the Home page and click Pages -> Import.

3. Find a proper page exported content file navigating to Templates folder and choosing

for example Home page.

4. Choose “Replace the current Page” and the redirect mode you need. 5. Click Import button if everything is correct.

6


6. Specify page settings according to your needs (necessarily apply WebsiteResponsive –

index skin to the home page) and click “Update Page”. The home page is ready. 7. Following the same procedure, you can reproduce all the live demo pages. Of course you are always welcomed to contact our support team at wsc.zendesk.com if you experience any difficulties.

Contact us form Contact us form is the default DNN Feedback module that can be installed via Host – Extensions – Available Extensions (tab) – Modules (section) – c. You only need to install this module and add it to the page.

7


Part 3: Customization Custom styles If you would like to modify the skin with minor amount of custom styles, add them to the <skin root>/custom.css file. They will override default skin styles. Also youâ&#x20AC;&#x2122;ll be able to make a backup of this file while updating the skin to the newest version.

Using shortcodes Please navigate to shortcodes page where you can find a large variety of available shortcodes to use on your website.

Setting up your branding color The default color of such elements as links, background of selected text etc. is setted up as blue with the following code: #089bc3. You will definitely need to change it to your own color regarding to your branding. In order to accomplish that open <skin root>/data/css/color.css for editing and change all instances of #089bc3 color to the desired one.

Changing headers font To change the font-style of the headers you should edit the <skin root>/data/css/parts.css file in line 379. /* Headers ----------------------------------------------------------------------------- */ .post .content h1, .post .content h2, .post .content h3, .post .content h4,

8


.post .content h5, .post .content h6 { margin: 0 0 11px !important; font-family: Rokkitt, â&#x20AC;&#x153;Times New Romanâ&#x20AC;?; font-weight: normal; }

Change the default Rokkitt font family to the desired one.

Changing paragraphs font You can also change default Arial font-family of the main content in <skin root>/data/css/ base.css in line 63: /* BODY element ----------------------------------------------------------------------------- */ body { font: normal 12px/22px Arial, Helvetica, sans-serif; }

Changing website slogan

To change website slogan responsive dotnetnuke skin by websitescreative navigate to <skin root>/CommonParts/Slogan.ascx and edit itâ&#x20AC;&#x2122;s content to the desired one.

Changing Top Navigation links

To change Top Navigation links open for editing <skin root>/CommonParts/NavTop.ascx file. Find and modify the code, which is responsible for it. It is locating between the following tags: <nav id="nav-top"> .... </nav>

9


Part 4: PostIT Blog module Benefits of using Responsive + PostIT Using Website Responsive skin, you are getting a great chance to add an awesome wordpress-like blog right to your DNN website! We’ve created it specially to match skin’s styles perfectly. Just apply it to the page and it’ll look like the one in our live demo. The following information will guide you through the blog installation process.

Module installing 1. Download WebSitesCreative.PostIt_xx.xx.xx_Install.zip module package and install it via Host –> Extensions –> Install Extension Wizard. Make sure you’ve completed the installation.

10


2. Navigate to Host â&#x20AC;&#x201C;> Host Settings â&#x20AC;&#x201C;> Advanced Settings (tab) â&#x20AC;&#x201C;> jQuery Settings (section) and make sure that jQuery is turned on.

3. Add WSC_PostIT module to the page.

Tags, archive and comments modules will be automatically added to the page along with the main module. Move tags and archive to the RightNarrowPane or delete them if 11


you are not going to use them right now (you can always add them again later).

In our demo you can also find the latest posts feed added to the RightNarrowPane. You can do the same by adding WSC_PostIT_Feed module there. After the module titles have been renamed you should get the following:

4. You will definitely want to rename or hide â&#x20AC;&#x153;Main PostIT moduleâ&#x20AC;? header. Rename it using module settings or apply NoTitle container in order to hide this header.

Adding posts 1. The most difficult part is already behind and you can start adding your first posts. Click new post link and you will be redirected to the posts adding/editing

UI. 2. Fill the required fields. To save your time we are specifying the content from our demo below. You can just copy it and use as the content for your first post.

12


Title: Sed

quis massa eros, egestas sollici mauris

URL: generating automatically depending on title. Image: select any image requiring your needs. Summary: In non tellus non nibh pulvinar gravida aliquet ut nisl. Nunc volutpat molestie ipsum nec convallis. Sed ultricies pellentesque sapien, a venenatis ligula lobortis a. Duis sit amet arcu vitae turpis ultricies facilisis. Phasellus dolor massa, gravida quis volutpat in, imperdiet ut tortor. Aliquam dictum ornare tincidunt. Quisque mauris magna, consectetur sit amet volutpat nec, volutpat vitae enim. Praesent semper imperdiet elit, a sodales elit faucibus eu. Integer ac luctus lorem. Praesent a risus non tellus egestas pharetra eu id libero. Sed quis massa eros, egestas sollicitudin mauris. Nunc aliquam leo id sapien scelerisque pulvinar lobortis eros cursus.

Post body (switch editor to â&#x20AC;&#x153;htmlâ&#x20AC;? mode and copy following content to it): <p>In non tellus non nibh pulvinar gravida aliquet ut nisl. Nunc volutpat molestie ipsum nec convallis. Sed ultricies pellentesque sapien, a venenatis ligula lobortis a. Duis sit amet arcu vitae turpis ultricies facilisis. Phasellus dolor massa, gravida quis volutpat in, imperdiet ut tortor. Aliquam dictum ornare tincidunt. Quisque mauris magna, consectetur sit amet volutpat nec, volutpat vitae enim. Praesent semper imperdiet elit, a sodales elit faucibus eu. Integer ac luctus lorem. Praesent a risus non tellus egestas pharetra eu id libero. Sed quis massa eros, egestas sollicitudin mauris. Nunc aliquam leo id sapien scelerisque pulvinar lobortis eros cursus. Suspendisse porta porttitor nisl ac congue. Praesent velit purus, luctus euismod facilisis dictum, adipiscing eu risus. Vestibulum posuere tellus at risus ullamcorper tincidunt. Sed mollis nunc id eros porttitor non mattis dui congue.</p> <p>Maecenas et lacus in mauris pellentesque vulputate vitae vel lacus. Duis lacinia dapibus ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vestibulum, quam vitae aliquam varius, erat magna eleifend odio, vitae eleifend est ligula id neque. Vivamus id dolor in nisi euismod pretium. Nullam leo urna, tristique sit amet condimentum quis, dapibus sed risus. Duis in faucibus ipsum. Quisque laoreet urna vitae felis dictum imperdiet. Suspendisse ut pretium neque. Ut eleifend urna quis metus feugiat convallis. Fusce pellentesque turpis vitae justo consequat non aliquet dolor congue. Nam ut sodales leo. Aenean sed est sed sapien auctor gravida eget in diam. Morbi sem turpis, mollis a imperdiet eu, interdum at lacus. Aliquam aliquet venenatis libero, suscipit varius orci pellentesque vel. Ut mollis, sem sed molestie commodo, tortor augue ultricies arcu, dignissim vehicula magna enim a nisl.</p>

Tags: You should specify tags manually by putting comma at the end of every tag.

13


Meta keywords (they will be used in the keywords header <meta> tag): postit, responsive, websitescreative

Meta description (itâ&#x20AC;&#x2122;ll be used in the description header <meta> tag): Here is my first post!

Page header tags: You can specify any tags which will be added to the <head></head> section of post html body. These are usually some additional <meta> tags. Click save and publish button after completing. At the end you should get the following:

Notice that tags, archive and latest posts feed are filling automatically.

DISQUS comments Youâ&#x20AC;&#x2122;ve probably noticed that comments feature requires configuration first. Please navigate to the Configuration link and follow the DisqusCommentsManual.pdf. Download it here.

Additional blog settings

14


You can find additional blog settings, navigating to the settings page of the PostIT main module.

1. Size of feedâ&#x20AC;&#x2122;s thumbnail sets width and height for the thumbnails in latest posts feed module. Notice: after changes this value will be applied to all newly created posts. 2. Title format specifies how the title should be displayed for every particular post. 3. Page size specifies the amount of posts which can be placed on the page before the paging settings appear. 4. Paging settings specify the way paging should be displayed.

Additional latest posts feed settings Navigating to the latest posts feed settings, you can find the additional settings which should be clarified.

15


The first one (Feed Page) sets the page from which the latest posts module should grab posts. This can be helpful if you for example would like to place the latest posts on the home page while blog is actually located on some other page. This page should be specified. The same setting is available for all modules.

The second one (Feed Size) is quite clear. This value sets the amount of latest posts that should be displayed.

16


Part 5: SlideMe Banner/ Portfolio/Gallery DNN module Benefits of using Responsive + SlideMe If you or your client would like to use Responsive banner, galleries or portfolio on the websiteâ&#x20AC;&#x2122;s pages, you have a great chanc e to get these all in our one SlideMe DNN module! This will allow you to add new images, customize their sizes, speed, styles, effects etc. using clean and user-friendly admin UI. Moreover our module has been specially skinned to match Responsive design perfectly.

17


Module installing 1. Download WebSitesCreative.Banner_xx.xx.xx_Install.zip module package and install it via Host –>Extensions –> Install Extension Wizard. Make sure you’ve completed the installation.

2. Navigate to Host –> Host Settings –> Advanced Settings (tab) – > jQuery Settigns (section) and make sure that the jQuery is turned

on.

18


Home page banner slider implementing

1. Apply WebsiteResponsive â&#x20AC;&#x201C; index skin to the page.

2.

Add WSC_Banner module to BannerPane. 3. Having added the module to the page youâ&#x20AC;&#x2122;ll need to switch from the default banner themes to the ones created for Responsive skin. Go to Theme Settings and switch Theme Location Mode to Skin location. 19


You should come up with the result shown in the picture below.

4. 5. 6. 7.

Specify BannerSlider as Skin Theme. Choose Caption Location according to your needs: Top or Center. Choose Animation Type you like (we use Slide by default). Enable Slideshow if you want slides to rotate automatically or unable if you need slides to be rotated manually by clicking on arrows. 8. Use Slideshow Speed to set the time between slides rotating. 9. Use Animation duration to set the time of rotating an image. Click Update Preview and you’ll preview the changes you’re going to make. Click Update Website, the changes will be saved and you’ll automatically return to the page. 10. Go to module settings and apply PlainContainer to it. This will guarantee that there will be no additional margins or paddings, title will disappear and banner will look good.

20


Home page banner slider content management 1. Now you can proceed to the stage of filling banner with content. Click manage slides link and youâ&#x20AC;&#x2122;ll be redirected to the slides management admin UI. 2. From the right control panel you can delete, edit specific slide or change their sequence by moving them.

3. Click the first slideâ&#x20AC;&#x2122;s Edit link and start filling necessary fields using the tips provided below.

Fill content from template:

21


You can quickly fill all fields choosing content template. After that you’ll only need to edit necessary fields or click Apply button right away, leaving everything as it is. Here are the details regarding other fields though: New image: Choose a desired image. Quick TIP: We do not recommend uploading images which dimensions are smaller than those specified in Settings, due to the quality degradation during their resizing. If the image is bigger, it will be resized to fully fit the specified dimensions. Title: Switch to HTML mode of the editor and specify description for this specific slide.

On-image click URL: Specify the URL to which the user will be directed by clicking on a particular slide image. Tags: Specify tags for the images separating them by comma. 4. After clicking Apply button a slide will be added to banner. You can return to the page and check it by clicking Go to view button.

Using gallery/portfolio mode 1. Let’s create one, two, three or four columns portfolio pages. 2. Add WSC_Banner module to ContentPane of the page, where WebsiteResponsive skin is applied. Notice that you can add it only to full width panes like ContentPane. In other cases layout may be broken. 3. Having added the module to the page you’ll need to switch from default banner themes to the ones created for the WebsiteResponsive skin. Go to the Theme Settings and switch the Theme Location Mode to the Skin location.

22


You should come up with the result shown in the picture below. Weâ&#x20AC;&#x2122;ve switched to the portfolio view.

4. Use Items in row setting to choose amount of thumbnails you would like to show in one row. This way you can switch between one, two, three or four columns portfolio. You also need to specify right thumbnails width and height because they vary depending on the Items in row option. Use the following table to grab corresponding thumbnails dimensions. Items in row

Width

Height

4 Items

220px

140px

3 Items

300px

190px

2 Items

460px

290px

1 Item

940px

390px

For example at the picture below we are choosing 3 Items in row so weâ&#x20AC;&#x2122;ve specified 300x190 dimensions. This needs to be done in order for your thumbnails to save their original proportions. You can also always refer to dimensions hint (look at the screenshot below):

23


The following moment should also be mentioned: until youâ&#x20AC;&#x2122;ll add all the slide of the next row the existing items will be distributed according to the amount of content of the previous row, see the example below:

24


5. Use Description setting to create portfolio (Show the description) or gallery (Hide the description). We’ll Show the description as long as we’re going to create a portfolio. 6. Set Display mode setting as Tags to organize your portfolio items using tags like shown at the picture below...

…or set Display mode as Paging to organize your portfolio items using paging like shown at the picture below. 25


7. Page limit setting is responsible for the amount of items visible on one page in Paging mode. But if you are using Tag mode - set page limit as 99 in order all items to be shown on the one page. Click Update Preview and youâ&#x20AC;&#x2122;ll preview the changes youâ&#x20AC;&#x2122;re going to make. Click Update Website, the changes will be saved and youâ&#x20AC;&#x2122;ll automatically return to the page. Your portfolio is ready.

Portfolio content management Everything is the same as described in Home page banner slider content management section. We also recommend to use Default Item template to automatically fill all fields with default content.

Switching to plain image gallery

26


The only difference of this image gallery from portfolio gallery is invisible item’s description. So this will look more like image’s grid. You can switch to this type of gallery selecting Hide in Description option in Theme Settings.

Click Update Preview and you’ll preview the changes you’re going to make.

27


Click Update Website, the changes will be saved and youâ&#x20AC;&#x2122;ll automatically return to the page.

Using Tabs mode Our Banner module makes working with tabs more convenient. Via moduleâ&#x20AC;&#x2122;s admin you are able to add different content slides and organize them tabbed way like at the screenshot below.

1. To switch to tabs functionality navigate to the Theme Settings and switch the Skin Theme to the Tabs under the Skin Location option. Ignore width and height settings and click Update Website right

away. 2. Click Manage Slides and then use Add Text Slide button to add new tabs.

28


3. Fill Title and Text fields automatically using Default Item template and click Save.

4. A tab will be added to the banner. You can return to the page and check it by clicking Go to view button.

29


Part 6: Additional services Custom development by WebSitesCreative We are providing a wide range of high-quality custom services using standard-compliant code and the latest trends in the sphere of design at affordable prices. The services vary from custom PSD design, PSD to DNN converting, customization of our products to turnkey websites development â&#x20AC;&#x201C; we are always glad to help you in implementing your ideas. Donâ&#x20AC;&#x2122;t hesitate to contact us for a free quote!

30

Websiteresponsivednnmanual  
Advertisement