First of all, thank you for purchasing NOWADAYS template. I hope you like it. And if so, please don't forget to rate it 5 Stars in your account. Thanks.
If you need to customize template, add some features, Front-End, Back-End, etc., i.e. any kind of web work in general, I'm available for freelance work. You can find contacts in Support section.
Once you have downloaded the template and unzipped it, you will find the following folders structure (hit arrow to see what's inside):
Now you can upload files to web server and open template from web server.
Pages can be Onepage or Multipage.
Onepage means that menu items will move you between sections.
In Multipage mode menu links will refer you to specified address.
it is controlled by adding
p-onepage/
p-multipage class to
body. Here is basic page structure:
<html>
<head>
...
</head>
<body class="p-onepage menuMobileClass*">
<div class="preloader"></div>
<div class="p-preloader">
...
</div>
<div class="wrapper">
<header class="header">
...
<ul class="menu">
<li class="menu__item">
<a href="#home" class="menu__link">Home</a>
</li>
...
<li class="menu__item">
<a href="#portfolio" class="menu__link">Portfolio</a>
</li>
</ul>
...
</header>
<div class="wrapper-content">
<section class="section s-main" id="home">
...
</section>
...
<section class="sectionClasses* s-portfolio" id="portfolio">
<span class="section__subtitle">...</span>
<h3 class="section__title">...</h3>
...
</section>
<footer class="footer" id="footer">
...
</footer>
</div>
</div>
</body>
</html>
<html>
<head>
...
</head>
<body class="p-multipage menuMobileClass*">
<div class="preloader"></div>
<div class="p-preloader">
...
</div>
<div class="wrapper">
<header class="header">
...
<ul class="menu">
<li class="menu__item">
<a href="index.html" class="menu__link">Home</a>
</li>
...
<li class="menu__item">
<a href="portfolio-fullwidth-col5-carousel.html" class="menu__link">Portfolio</a>
</li>
</ul>
...
</header>
<div class="wrapper-content">
<section class="section s-main" id="home">
...
</section>
...
<section class="sectionClasses* s-portfolio" id="portfolio">
<span class="section__subtitle">...</span>
<h3 class="section__title">...</h3>
...
</section>
<footer class="footer" id="footer">
...
</footer>
</div>
</div>
</body>
</html>
* - Mobile menu class can be menu-mobile-left/ menu-mobile-right.
** - Sections at the moment may have classes section/ section-2 + section-white/ section-lightgray/ section-darkgray/ section-dark.
Examples of other elements/sections variations you can find easily in HTML files. All blocks are well commented.
To make any changes you can edit build/assets/css/styles.css.
Or if you know SASS, then you can edit _src/assets/sass/*.scss files and compile _src/assets/sass/styles.scss to build/assets/css directory.
Nowadays comes with 13 predefined color schemes. Default color scheme already included in styles.css. If you want to change scheme, then you should include one of CSS files from build/assets/css/theme-colors/ into your markup:
Also you can create your own scheme. To do that you need to create a copy one of the color scheme files ( build/assets/css/theme-colors/) and edit it by replacing color to another one.
If you are familiar with SASS:
RIGHT WAY:
You need to change theme color variable
$theme: #55C594; in
_src/assets/sass/inc/_vars.scss and compile
_src/assets/sass/styles.scss to
build/assets/css.
NOT RIGHT WAY in this case:
You can create a new additional file in
_src/assets/sass/theme-colors/:
/********************************
@ YOURCOLOR THEME
********************************/
@import '../inc/_mixins';
@include theme-color(YOURCOLOR);
and compile it to build/assets/css/theme-colors/. Then don't forget to include it into markup, as described above.
You can choose between text and image logo in header. For text logo use this markup:
<div class="header-logo col-xs-9 col-sm-3">
<a class="header-logo__link" href="./">Nowa<span class="theme-color">Days</span></a>
</div>
For image logo:
<div class="header-logo col-xs-9 col-sm-3">
<a class="header-logo__link" href="./"><img class="header-logo__img" src="assets/img/your-logo.png" alt="Nowadays"></a>
</div>
All background images are set in data-background-image attribute right in HTML markup, so don't try to search it in CSS.
You can parallax not only images, but whatever. Just remember: Parallax element should have a greater height than its parent element.
Just add parallax class to the target element to create parallax effect. Simple example:
<section class="item">
<div class="item__bg parallax" data-background-image="assets/img/282.jpg"></div>
</section>
CSS in this case should be something like this:
.item {
height: 500px;
}
.item__bg {
/**
* Real image height should be greater than 500px in this case
* to make parallax possible
*/
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
Class parallax-wrapper will be automatically added to the parent element. In case above to the .item element. Default styles for these classes:
.parallax {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
will-change: transform;
z-index: -1
}
.parallax-wrapper {
position: relative;
overflow: hidden;
z-index: 0
}
Parallax has a few options which can be set through data-parallax-* attributes:
<section class="item">
<div class="item__bg parallax" data-parallax-speed="0.75" data-parallax-fading="true" data-parallax-min-fading="60" data-parallax-scale="true" data-parallax-max-scale="1.25" data-background-image="assets/img/282.jpg"></div>
</section>
See options in action here
Default value | Possible values | Description | |
---|---|---|---|
data-parallax-speed | 0.5 | [0.0 - 1.0] | 0.0 - No parallax effect. 1.0 - max. possible speed |
data-parallax-fading | true | false/true | Fade element when scroll |
data-parallax-min-fading | 70 | [0 - 100] | Make sense if data-parallax-fading is enabled |
data-parallax-scale | false | false/true | Scale element when sroll |
data-parallax-max-scale | 1.5 | [1 - common sense] | Make sense if data-parallax-scale is enabled |
You can easily animate blocks on scroll by adding class fx and data-animation-* attributes. For example:
...
Options:
Required | Default value | Description | |
---|---|---|---|
data-animation-visible-percent | no | 10 | How much percents of element should be visible to start animation |
data-animation-name | yes | Equals to CSS property | |
data-animation-duration | yes | Equals to CSS property | |
data-animation-delay | no | Equals to CSS property | |
data-animation-fill-mode | no | both | Equals to CSS property |
data-animation-iteration-count | no | 1 | Equals to CSS property |
When element will be in visible area, class animated will be added immediately, so it can be useful to make custom animation, for example.
List of predefined data-animation-names.
In this template used own responsive grid system. It looks like bootstrap v3, but based on display-inline technics and more simplified. We also have 12-columns system with the same classes names.
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Container width | None (auto) | None (auto) | None (auto) | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
# of columns | 12 | |||
Column width | Auto | ~71px | ~90px | ~99px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | yes | |||
Offsets | yes |
For example:
col-sm-3
col-sm-3
col-sm-3
col-sm-3
* - container (max-width: 1170px) or container-fluid (full-width)
will be a four equal columns with 15px inner indents(padding):
More grid examples.
Move columns using
.col-md-offset-left-*/
.col-md-offset-right-* classes. These classes increase the left/right margin of a column by
* columns.
For example,
.col-sm-offset-left-1 moves
.col-sm-4 over one column:
Source:
.col-sm-4 .col-sm-offset-left-1
.col-sm-4 .col-sm-offset-left-3
.col-sm-4 .col-sm-offset-left-2
.col-sm-4 .col-sm-offset-right-2
.col-sm-6
List of some classes about align and indents
How to get an ID.
It goes after "/" in you twitter profile URL e.g. https://twitter.com/likeaprothemes.
Now go to your HTML markup, find the line similar to:
and change likeaprothemes with yours ID.
That's all. Now you should see your tweets. More info about Twitter Post Fetcher options you can get on github
You need to get Google API key for your domain to use it
Follow these steps to get an API key:
Now you need to find maps container in all your pages. It looks like:
And replace AIzaSyBf-JoGKKntvN0K3i7kcta2Luk8okMgFRY with your API key.
Also you should specify your real location on the map.
How to get coordinates of your location?
And then replace 40.751915, -73.982556 with given coordinates.
You need to change e-mail to have feedback with your visitors.
$to = 'email@email.com';
Note: Make sure that your hosting allows mail() function, otherwise it will not work.
All images are from:
Note: Images are NOT included in download package
I'm available for freelance work if you want customize theme or create new pages and elements. So, if you have suggestion, please contact me.
Note: In order to provide you fast and efficient support, please send detailed description of the issue with screenshot/video or provide a direct URL.
Your read it entirely. Thanks!