Jumbotrons customization

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

Contents

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

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>
</div>
<div class="jumbotron hero">
    <div class="container">
        <!-- Content goes here -->
    </div>
</div>
<div class="jumbotron hero">
    <!-- "Stub" will be rendered at the top of current element -->
    <div class="stub"></div>
    <div class="container">
        <!-- Content goes here -->
    </div>
</div>

Class modifiers

Less variables

See the next paragraph on how to use these variables.

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
   

Result

Next up

• Create Argento based custom theme
• Theme editor
• Page structure manuals
  • Homepage
  • Product page