Customisation of TopClass

We are using sevaral CSS files in this Template. JWTheme Always follow the latest trends of coding standard. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS File included:

  • Bootstrap css used
  • Fontawesome used
  • Linecons css used
  • JQuery fs boxer css used
  • Owl Carosuel css used etc.

The second file contains all of the specific stylings for the page. Here is the an example of general style. The file is separated into sections using:

/* 1 - Google Font

/* 1 - Google Font End 
/* 2 - General styles
/* 2 - General styles End


/* 29 - Scroll Top Section
---------------------------------------------------------------------- */
/* 29 - Scroll Top Section End
---------------------------------------------------------------------- */


If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

CSS coding standard: We followed css and css3 coding standard. Here is the exampl:


body {
font-family: 'Raleway', sans-serif;
color: #666666;
font-size: 16px;
a {
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
a:focus {
a:hover {
color: #3cc0bf;
text-decoration: none;
p {
color: #545454;
font-size: 0.9375rem;
font-weight: 400;
line-height: 25px;
padding-bottom: 10px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
p a:hover {
border-bottom: 1px dotted #1fb5ac;
mark {
background: #1fb5ac;
padding: 1px 3px;
} {
background: #262626;
img {
max-width: 100%;
height: auto;
audio {
width: 100%;
height: auto;
border: none;
.page-top-height {
height: 80px;
.light-blue {
color: #1fb5ac;
.next-section {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.pattern {
background-color: rgba(0,0,0,.5);
background-image: url(../images/pattern.png);
.white-bg {
background-color: #ffffff;
.gray-bg {
background-color: #f1f2f7;
.carousel-indicators li {
border-radius: 0;
.carousel-indicators .active {
background-color: #1fb5ac;
border: none;
.page {
padding-top: 150px;
padding-bottom: 80px;