SwissUpLabs Logo

Argento custom css

When talking about theme customization it very important to be able to easily upgrade Argento in future. That is why Argento brings possibility to create new _argento_custom.less file, that will be automatically included and processed.

Using new file, you’ll guarantee that all Argento files left untouched and you can unpack new Argento version over the old one without losing your modifications

Example

Let’s change product links color from black to blue and update color scheme for homepage and products page tabs. Scroll down to see results.

  1. Navigate to Argento theme css directory, you’d like to modify

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

    // change product links styles
    @product-name-link__color: #039ae4;
    @product-name-link__color__visited: #167fb3;
    
    // change homepage and product tabs styles
    @tab-control__background-color: #ef813d;
    @tab-control__active__background-color: #fff;
    @tab-control__color: #fff;
    @tab-content__border: 1px solid #ef813d;
    
    .product.data.items > .item.title .counter {
        color: inherit;
    }
    
  4. Save the file and run following bash commands to regenerate compiled styles

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

Result

Next up
Edit this Page