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

   vendor/swissup/theme-frontend-argento-stripes/web/css/source
   

2. Create _argento_custom.less inside the 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

• Using Argento grid to organize content
• Argento css helpers
• Create Argento based custom theme