BergTheme Documentation

Styles

BergTheme utilize LESS for easy customization of visual aspects of our theme. For more information about LESS, we recommend to visit http://lesscss.org.

Variables and customization

All changes of colors can be done within a file custom.less. It aggregates every other LESS stylesheets into one.

How to change colors?

You need to change colors your website, but you don't know how? On the top in custom.less you find basic colors used by us. Defined colors are listed below and can be edited in custom.less.

    //Colors
    //-----------------------------------------
    @bgColor:             #fff;
    @bgColor2:              #111;
    @textColor:             #333;
    @textColor2:            #fff;
    @highlightColor:          #ca293e;

How to change fonts?

If you want to change fonts, can be done within header all html files and custom.less. Only need to change bold lines in markup presented below the text.

html files

<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Berg - BergTheme HTML</title>
      <meta name="description" content="">
      <meta name="msapplication-tap-highlight" content="no" />

      <meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <link href='http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,600,700' rel='stylesheet' type='text/css'>
      <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
      <link rel="stylesheet" href="less/custom.css">
      <script src="js/jquery-2.1.0.min.js"></script>
      <script src="js/modernizr-2.6.2.min.js"></script>
      <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false&ver=3.0'></script>
    </head>

custom.less

    // Typography
    // ----------------------------------------

    @text-font-family:                'Cabin', Helvetica, Arial, sans-serif;
    @header-font-family:              'Cabin', Helvetica, Arial, sans-serif;

How to change icons?

We used icons made by FontAwesome, MFG Labs and Simple Line Icons. Only need to changed by adding class of icon in markup. All classes and more information you find here.

<i class="fa fa-facebook"></i>

Background image opacity

We created special class to change opacity background image. Only you need to add class "opacity-..." and insert opacity value ( for example: "opacity-20"). Classes you find in custom.less.

    .opacity-0 { .lh-opacity(.0)}
    .opacity-10 { .lh-opacity(.1)} 
    .opacity-20 { .lh-opacity(.2)}  
    .opacity-30 { .lh-opacity(.3)} 
    .opacity-40 { .lh-opacity(.4)} 
    .opacity-50 { .lh-opacity(.5)} 
    .opacity-60 { .lh-opacity(.6)} 
    .opacity-70 { .lh-opacity(.7)} 
    .opacity-80 { .lh-opacity(.8)} 
    .opacity-90 { .lh-opacity(.9)}
    .opacity-100 { .lh-opacity(1)}

Other elements

You want to edit font size, margin etc.? It's simply. All elements you can find in less files. If you need to change basic element made by us, only need to find chosen element in custom.less and edit styles.

    ...

    //Blockquote
    //-----------------------------------------
    blockquote { font-size: 16px; font-style: italic; 
      i { color: #eee; font-size: 40px; position: absolute; z-index: -1; left: 30px; }
    }
    ...

    //Dropcap
    //-----------------------------------------
    .dropcap { color: @textColor2; background: @bgColor2; text-align: center; font-size: 2em; float: left; padding: 0 10px; line-height: 1.5em; margin-right: 0.3em; }

    //Form
    //-----------------------------------------
    .message-success { position: absolute; top: 0; opacity: 0; text-align: center; right: 0; width: 100%; background: #63C55F; 
      i { color: #fff; font-size: 30px; display: block; line-height: 1.5em; width: 100%; height: 100%; display: block;  }
    }
    .message-error { border: 1px solid #E43832 !important; .lh-placeholder(#E43832) !important; background: #fff !important; }

    .form-control {
      &.input-row-1 { height: 2.5em }
      &.input-row-2 { height: 6em }
      &.input-row-3 { height: 9.4em }
      &.input-row-4 { height: 12.8em }
      &.input-row-5 { height: 16.25em }
      &.input-row-6 { height: 19.7em }
    }
    ...

    //Highlights
    //-----------------------------------------
    .highlight-color { color: @highlightColor; font-weight: 700;}  
    .highlight-txt { color: @textColor2; background: @bgColor2; padding: 0 2px} 
    .highlight-outline { color: @highlightColor; border: 1px solid @highlightColor; padding: 0 2px}

    ...

Includes

This section lists all included LESS files in stylesheet. You can create your own and include it right here or find less files responsible for other section. We put a lot of work to separate every section into different LESS file to create opportunity for easy customization and creation of new elements.

    @import "bootstrap-3.1.1/bootstrap.less";
    @import "lesshat-prefixed.less";
    @import "font-awesome/font-awesome.less";
    @import "simple-line-icons.less";
    @import "fontello.less";
    @import "home.less";
    @import "navbar.less";
    @import "blog.less";
    @import "post.less";
    @import "reservation.less";
    @import "menu.less";
    @import "restaurant.less";
    @import "shop.less";
    @import "product.less";
    @import "contact.less";
    @import "cart.less";
    @import "gallery.less";
    @import "overlay.less";
    @import "footer.less";
    @import "owl-carousel.less";

Media queries

In some files are separate styles for different devices. More information about media queries you can find here.

    @media (min-width: @screen-sm-min) { 
      body { height: 100%; }
      .section-fullscreen { width: 100%; height: 100%;  display: table; .lh-transition(top .7s); z-index: 2; }
      .no-intro { padding-top: 80px;  
        .section-scroll { position: relative; top: 0; z-index:3; }
      }
      ...
    }

Berg HTML documentation