Change background color of the search bar

[marmarquez]

Hello community!

Today I need your help because I’m having trouble changing the background color of the search bar without changing the background color of the other inputs on the site.

[andremiani]

Hello Mariana (@marmarquez), perhaps the best way to achieve this result is to follow the documentation on how to use CSS Handles for store customization and use the native inspector tool provide by VTEX.

To do this, while you are viewing your workspace on your browser, adding ?__inspect at the end of the URL of the page, and do enter to load “the VTEX inspector tool” and be able to identify the exact element, the exact class, the exact style file that should be changed in this case.

Using CSS Handles for store customization

[marmarquez]

Hello Andre!

Sure, I know the VTEX inspect. But my problem is that I can’t change the background of that input without changing the background color of the newsletter (for example). I don’t know how to specify just that background.

[georgebrindeiro]

@marmarquez I think what you might have missed in the docs is this part where we talk about blockClass:

blockClass is a property whose value you may define freely. When passed onto a block, it serves as its single identifier for customization.

You can find more information about how to define a blockClass for the search bar and use it to customize only that block in the Using the blockClass property section of the docs shared by @andremiani.

[marmarquez]

Yes, I understand all of that. I already managed to solve it.

It is necessary to put in VTEX.styleguide.css, the input attribute with property background-color: transparent, and then configure each input (the search bar and the newsletter) with the corresponding background-color.

Thanks!!