SwissUpLabs Logo

Jumbotrons customization

Jumbotrons — are the wide colorful blocks at the Argento Flat homepage.


  1. Markup examples
  2. Class modifiers
  3. Less variables
  4. Customization example

Markup examples

<div class="jumbotron jumbotron-image no-padding">
    <!-- "Cover" will be rendered at the bottom of current element and will partially cover its content -->
    <div class="cover"><div class="left triangle"></div><div class="right triangle"></div></div>
    <div class="container">
        <!-- Content goes here -->
<div class="jumbotron hero">
    <div class="container">
        <!-- Content goes here -->
<div class="jumbotron hero">
    <!-- "Stub" will be rendered at the top of current element -->
    <div class="stub"></div>
    <div class="container">
        <!-- Content goes here -->

Class modifiers

Type Class name Description
  jumbotron-image Use image as a jumbotron background
  jumbotron-pastel Use pastel background color
  jumbotron-pastel-alt Use alternative pastel background color
  jumbotron-pattern Use pattern background
  jumbotron-bright Use bright background
  jumbotron-dark Use dark background
  hero Use large titles inside jumbotron
  jumbotron-inverse Use white text and title colors
  no-padding Do not use default paddings
  no-padding-top Do not use default top padding
  no-padding-bottom Do not use default bottom padding

Less variables

See the next paragraph on how to use these variables.

Variable Default value
@jumbotron__padding 25px 0 20px
@jumbotron__background #fff
@jumbotron-bright__background #f15922
@jumbotron-pastel__background #229392
@jumbotron-pastel-alt__background #a5205f
@jumbotron-pattern__background url(../images/pattern.jpg) 50% 0
@jumbotron-image__background url(../images/bkg_sky.jpg) 50% 0
@jumbotron-dark__background #222337
@jumbotron-dark__text-color lighten(@jumbotron-dark__background, 60%)
@jumbotron-inverse__text-color #fff
@jumbotron-cover-triangle__z-index 2

Customization example

Let’s change default colors. Scroll down to see results.

  1. Create _argento_custom.less inside app/design/frontend/Swissup/argento-flat/web/css/source folder.
  2. Add your custom styles:

    @jumbotron__background: #fff;
    @jumbotron-bright__background: #22a0f1;
    @jumbotron-pastel__background: #842293;
    @jumbotron-pastel-alt__background: #6820a5;
    @jumbotron-dark__background: #222;
    @jumbotron-pattern__background: url(../images/custom/seigaiha.png) 50% 0;
    @jumbotron-image__background: url(../images/custom/noisy.png) 50% 0;

    If you would like to replace pattern or image backgrounds — place them into app/design/frontend/Swissup/argento-flat/web/images/custom folder.

  3. Save the file and run following bash commands to regenerate compiled styles

    cd magento/root/folder
    rm -rf var/view_preprocessed
    bin/magento setup:static-content:deploy


Next up
Edit this Page