Oslo Html Template

Welcome to Oslo!

We are pleased that you have chosen Oslo template for your site and we will not disappoint you with your choice. Oslo is an excellent template develop with a concise approach. The code written is a clean and well structured.

Oslo is the most powerful & responsive template with all the modules and functions involved with an attractive design.

Oslo template is build focusing on HTML and CSS3 and works perfectly fine in all the browsers and it base on javascript.

Oslo template include total 61 html pages which include 6 demo page, 6 product pages, 8 shop pages, 7 portfolio pages, 3 blog pages, 14 element pages.

We request to have a look at our Oslo Doc to know brief about the template! We have included each and every detail for you in this doc that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the doc before jumping to start!

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

  1. Documentation - Documentation for Oslo HTML site template
  2. TEMPLATE - Oslo Main Folder
  • Template
    • assets
      • css
        • all css files
      • icons
        • all icons files
      • images
        • all images
      • js
        • all js files
      • png
        • all png images
      • scss
        • base
          • all scss files
        • components
          • all scss files
        • layout
          • all scss files
        • pages
          • all pages scss files
        • utils
          • all scss files
        • vendor
          • all vendor files
        • dark.scss
        • style.scss
      • svg
        • all svg files
      • video
        • all video files
    • html
      • all Html Pages
    • landing index html file
    • gulp file
    • package.json file
  • Documentation
    • documentation assets file
    • documentation index html file

Installing Node.js

First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.

Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org

You can check it in your terminal window using these commands node --version and npm --version.

Installing Gulp

GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

NPM use the package.json file and automatically install the required local dependencies listed in it.

dependencies are : gulp, browser-sync, gulp-autoprefixer, gulp-livereload, gulp-pug, gulp-sass, livereload

We have added all necessary gulp task in gulpfile.js, for more details about plugin refer this link https://gulpjs.com/plugins/

How to set live reload path

Go to Gulpfile.js

proxy: "localhost/Your project name"

If you want RTl template, changes is below:

<!-- Add dir rtl in html tag -->
<html dir="rtl">
<!-- Change Bootstrap Style Css -->
<link id="rtl-link" rel="stylesheet" type="text/css"href="assets/css/vendors/bootstrap.rtl.css">

If you want Dark template, changes is below:

<!-- Add class dark in html tag -->
<html class="dark">
<!-- Change Style Css -->
<link id="change-link" rel="stylesheet" type="text/css"href="assets/css/dark.css">

In Oslo Template has used 6 colors,following are the colors:

if you want to change demo color you have to add class in body tag theme-color{2,3,4,5}. by default it take demo 1 color

<!-- Add class to body tag -->

<body class="theme-color2">

Oslo have mainly used Feather Icons. this icons available in https://feathericons.com/

how to use Feather?

For Example:

<i data-feather="heart"></i>

<i data-feather="home"></i>

<i data-feather="moon"></i>

<!-- feather icon js -->
<script src="assets/js/feather.min.js" ></script>

Oslo have mainly used 3 type of Font 1) Jost, 2) Monsterrat and 3) Leckerli. all are available on google font, https://fonts.google.com/

<!-- Google Jost Font -->
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Google Monsterrat Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
<!-- Google Leckerli Font -->
<link href="https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap" rel="stylesheet">

Ratio Classes: Change your image proportion by just adding class

If you use image as background than add class ".bg-img" in image and add below class in parent.

without this plugins and products, our theme will be incomplete.

open source plugins

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards, Pixelstrap