CSS/LESS Style Changes in Pearl

Follow

Mike Latzky

• March 30, 2022 18:35

I'm new to customizing our Pearl Theme - we've had it for a while now, but just getting to work on style changes... I understand I need to make additions to the:

app/design/frontend/Pearl/weltpixel_custom/web/css/source called wp_custom.less 

file to make them effective and durable against upgrades.

My question: if I'm looking to start with a simple change, I'm not sure what needs to be done. I want to put a border around each Layered Nav link for non-anchor catalog pages. My intent is to make them stand out more with our standard color.

According to Chrome Developer tools, it seems like I want to add

.sidebar-main {
border: 2px solid #f11e26
}

to get the red 2 px solid border I'd like. But I tried that and regenerated LESS files and Flushed the Magento Cache. No go.

Can someone guide me a bit here, please?

Thank you!

0

• 

  Jesse Williams

  • May 10, 2022 13:59

  You usually have to also regenerate the static files.... which can be done via the admin if you are in "developer" mode. 

  

  If you don't see the button, then change your /app/etc/env.php file from 

  'MAGE_MODE' => 'production',
  to 
  'MAGE_MODE' => 'developer',

  0

  Comment actions Permalink

Please sign in to leave a comment.