Change color of Craft Theme box shadow

Store Design
, ,
1

Hello, I’d like to change the current box shadow color that appears when selecting the cart and search tool. Currently it’s a red shadow. Is there a solution that allows for rgba value?

url -

p -

edit: removed url & pw

2

Hi, @vvyan

Sure. How do you want to modify it?

3

Hi, I’d like to change it into a transparent light gray. kind of like rgba (133, 133, 133, 0.3)

4

Hi @vvyan ,
So here is a solution in video . With this you can change the color to whatever you need .

Simply search for component-cart-drawer.css and base.css and as per video adjust the code to your liking .
Below is the sample code .

///// For Cart Drawer ///////

.drawer {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #0000007f;
    transition: visibility var(--duration-default) ease;
}

//// for Search Drawer search for details[open] .modal-overlay in base.css and paste the code in details[open] .modal-overlay::after with this .

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(0 0 0 / 50%);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}
5

Hello @vvyan

Sure! You can change the box shadow color of elements using CSS. If you want to use an RGBA value for the shadow color, you can specify it like this:

.element {
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

  • 0 0 10px indicates the shadow’s horizontal and vertical offset (0px on each side)
  • rgba (255, 0, 0, 0.5) rgba (10px) determines the shadow’s color. The red, green, and blue components are represented by the first three numbers (255 for red, 0 for green, and 0 for blue), while the alpha channel, which determines the shadow’s opacity, is indicated by the final value (0.5).

To achieve the desired color, you can modify the RGBA values; to manage the shadow’s transparency, vary the alpha value. To alter the box shadow color of the cart and search tool elements, apply this CSS.

Thanks.

6

thank you, this ended up working great