MdstTheme utilize LESS for easy customization of visual aspects of our theme. For more information about LESS, we recommend to visit

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.


@bgColor: #222222;
@textColor:  #E4E4E4;
@highlightColor: #30C0F7;
@headerColor: #30C0F7;
@headerSliderColor: #249FE4;

@secondBg : #292929; 
@secondHeader : @highlightColor;
@secondBorder : #222222;;
@secondText : #E4E4E4; 

@blogHoverBg : @highlightColor; 
@blogHoverText : #444; 

@portfolioHoverBg : @highlightColor; 
@portfolioHoverText : #444; 

How to change fonts?

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

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MdstTheme 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=',400,700,900' 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>
// Typography
// ----------------------------------------

@text-font-family:                "Lato", Helvetica, Arial, sans-serif;
@header-font-family:              "Lato", 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>

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 settings. We thought it would be nice easy find elements so all of them are commented.



.dropcap { color: @highlightColor; font-size: 34px; float: left; padding: 0 10px 0 0; line-height: initial;}


.tooltip-inner { text-transform: uppercase; border: 1px solid @highlightColor; border-radius: 0;}
.tooltip-arrow { border: none}


.notice { background: transparent; padding: 30px; color: @textColor; border: 1px solid @bgColor2; overflow: hidden; margin-bottom: 30px; 
	h3 { margin-top: 0 !important;}
	.text-notice { margin-bottom: 15px;}
	&.notice-outline-light { 
		h3 { color: @textColor !important;}
	&.notice-align-center { text-align: center;}
	&.notice-none-border { border: none; background: transparent; box-shadow: initial}
	&.notice-light { background: @bgColor2; color: @textColor2; overflow: hidden;
		h3 { color: @textColor2 !important;}
		.button { float: right;}
	&.notice-vertical { display: table;
		.text-notice { display: table-cell; vertical-align: middle;}
		.button { display: table-cell; vertical-align: middle; padding-left: 15px;}


.section-scroll { overflow: hidden; overflow-y: scroll; height: 100% }
.nicescroll-rails { right: 5px; left: initial !important;
	div { background-color: lighten(@bgColor, 20%) !important; border: 1px solid darken(@bgColor2, 60%) !important}



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 "home.less";
@import "contact.less";
@import "about.less";
@import "team.less";
@import "portfolio.less";
@import "simple-line-icons.less";
@import "fontello.less";
@import "navbar.less";
@import "blog.less";
@import "elements.less";
@import "responsive.less";