1. Home
  2. Marco HTML
  3. Getting started
  4. Styles

Styles

MarcoTheme utilize SASS for easy customization of visual aspects of our theme. For more information about SASS, we recommend to visit http://sass-lang.com/.


Variables and customization

 
We recommend change all styles in .scss files. Main settings styles you find in assets/scss –> _settings.scss.


How to change fonts?

 

html files

Visit GoogleFonts, select font you want to use in your site and change link in markup presented below.

 

<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Marco - Restaurant HTML5 Responsive Template</title>
      <meta name="description" content="">
      <meta name="msapplication-tap-highlight" content="no" />
      <link rel="stylesheet" href="less/custom.css">
      <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Lora:400,400i" rel="stylesheet" >
    </head>

 

SCSS/CSS

_settings.scss– replace a font family in 65, 105 and 106 line.

 

   
    ...
// 1. Global
// ---------

    $body-font-family: 'Lato','Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    ...

// 4. Base Typography
// ------------------

   $header-font-family: 'Lato';
   $subheader-font-family: 'Lora';

 

app.css– search current font for example “Lato” and change to your font family.

 

  
 ... 

 body {
  padding: 0;
  margin: 0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  background: #fefefe;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

  ...


How to change colors?

 

SCSS

Each color scheme you find in _settings.scss (line: 58-65). To change colour, simply replace color variable to the appropriate color.

 

  
 ... 

 $light-gray: #ddd;
 $medium-gray: #cacaca;
 $dark-gray: #8a8a8a;
 $black: #111;
 $white: #fff;
 $body-background: #fefefe;
 $body-font-color: #333;
 $accent-color: #f10a4a;

  ...

 

CSS

To change color, search element in app.css with color change and replace it to your own.

 

Example:

(line 6510 in app.css)
  ...
  .food-menu-item-header.food-menu-featured:after { background: #f10a4a; }
  ...

How to change icons?

 

SVG icon

MarcoTheme makes use of SVG icons. To add or change icon, we recommend using SVG icons for style consistency and page-speed reasons. There are many website offering SVG icon (eg. FlatIcon). Simply paste code of icon to the appropriate place.

 

(gallery.html)
  ...
  <div class="gallery-icon">
    <svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" x="0px" y="0px" style="" viewBox="0 0 100 90" xml:space="preserve">
      <circle cx="35" cy="25" r="5" stroke="#111" fill="none" stroke-width="4"/>
      <path d="M 0,100 0,80 20,60 40,70 70,40 100,70 100,100 z"/>
      <rect x="0" y="0" width="100" height="100" stroke="black" fill="transparent" stroke-width="10"/>
    </svg>
  </div>
  ...

 

Other icons pack

If you’re not familiar with SVG, use of the icon web font for example Font Awesome. Here you will find guide, how to add icons pack on your website.
 

Was this article helpful to you? Yes No