Shafla Team Theme

/////////////////

Please visit our demo site:

http://custom-lms.shafla.pl/

Documentation:

http://custom-lms.shafla.pl/shafla_theme_docs/

/////////////////


Indtroduction

Dear Customer,

Thank you for choosing Theme Shafla. When designing our theme, we wanted it to be as flexible as possible by adding a large variety of style options, at the same time making it slick and feel modern. We hope this theme will meet your needs and expectations.

In this documentation we will help you the installation process and introduce you to our custom options and give your theme a unique feel.

Let’s get to it, starting with the installation process.

/////////////////


Instalation
===========

- Install process
- Login to your site as an admin user.
- Go to Administration > Site administration > Plugins > Install plugins.
- Open the Theme folder from your ThemeForest downloaded package and select the file FILE_NAME.zip
- Upload the ZIP file, tick the acknowledgement checkbox, then click the button 'Install plugin from the ZIP file'.
- You should get a validation passed message. Next, click the button 'continue'
- After that you should be asked to upgrade your Moodle database. Select the “Upgrade Moodle database now” button to finish the installation process.
- Changing the theme
- Log in as admin and go to Administration > Site administration > Appearance > Themes > Theme Selector
- Click on "Clear theme caches" button.
- Click on the "Select theme" button on the right of the current theme being used for the device.
- Scroll down to find the theme you wish to use.
- Click the "Use theme" button next to that theme.


You may have to refresh your browser to see the new theme.

/////////////////


Settings
========

Slideshow

- Amount of pictures that will display in your slideshow (1)
- Remember that if you select a larger amount of slides, options for attaching additional photos will be available after you save settings first.
- Text colour for slide title (2) and slide additional text (3)
- Text colour for slide displayed on a mobile device (4)
- Picture that will be displayed in the slideshow (5)
- Title text displayed in the slideshow (6)
- Additional text displayed in the slideshow (7)
- Custom link displayed in the slideshow (8)

/////////////////


Social Icons

- This where you can add links for four, selected by us, social media platforms (1)
- It is also possible to choose the colour of the social media section background (2) and icons (3)

/////////////////


Header

- Here you can upload your logo that will be displayed at the top right hand side corner of the site (1)
- and the actual colour of header section (2)

/////////////////


Copyrights

- Here you can add a copyrights text to the footer area (1),
- adjust its colour (3)
- and change the background colour of the whole section (2)

/////////////////


Footer

- Here you can use a colour picker to set the colour of the footer area.
- This will not affect the copyrights section background colour.

/////////////////


Top Grid

- Here you can set blocks and their content for the middle section. We decided to split this area into a top and bottom grid.
- First, you can set the amount of elements (blocks) in the grid (1).
- Now select the amount of elements in a row for the grid (2). For that we prepared 3 types of settings. Amount of elements in a row for a desktop application, tablet (max. width 1100px), and phone (max. width 699px).
- Finally, depending on the amount of grid elements selected, for each element, you can add a headline text, main content text, and set a link. Remember to start your link with “http://“. (4)

/////////////////


Bottom Grid

- Just like in the top grid section you can set all the features presented in the top grid section of this document. With one difference - additionally you can also add an image that will be displayed in the block for each element. Go ahead and try it out.

/////////////////


Parallax Section

- This section allows you to upload an image for that fancy parallax part of your site (1).
- Just remember to set the correct height and margin (2)
- The margin value is the area that separates the parallax section from the Top Grid section.
- If you wish the blocks from the top grid to be overlapping the parallax section for a cool visual effect, you can set the value to a negative one (e.g. -100px)

/////////////////


Menu

- This where you can use a colour picker to set the colour for the right hand side menu.

/////////////////


Login Page

- Want a personalise login page? Here you can upload an image and set it as a background for your login page.

/////////////////


Settings
========

Admin Block

- This section is visible only to an admin user.
- You can freely add as many different types of blocks in this region and be sure that anyone else but the admin can see them and make adjustments to them.

/////////////////


Footer Blocks

- Similar to the parallax block, we added a region with footer blocks that is located above your social media area.
- Again, these blocks are fully customisable just like the one in your parallax section.

/////////////////


Parallax Block

- This block will be displayed on top of your parallax section.
- When in editing mode you can change its location, and because this is a html block, you can stylise it to your needs.

/////////////////


Credits
=======

Resources

Icons from Flat Icon | http://www.flaticon.com/
Font by Google Fonts | https://fonts.google.com/
Parallax effect - Simple Parallax Scrolling | http://pixelcog.github.io/parallax.js/
Default images from Pexels | https://www.pexels.com/
Slider - jQuery FlexSlider v2.6.1 | https://woocommerce.com/flexslider/
Font Awesome 4.6.3 by @davegandy @fontawesome | http://fontawesome.io/
jQuery v2.2.4 (c) jQuery Foundation | https://jquery.com/

Authors

Shafla Team | http://shafla.pl/

Visit Us

facebook | https://www.facebook.com/shaflasolutions/
LinkedIn | https://www.linkedin.com/company/shafla
Goldenline | https://www.goldenline.pl/firma/shafla/

/////////////////