1

Example

I creat my theme, same as luma, parent Blank.

I try change style for search (add background-color and change opticaly. I see in less file: app\design\frontend\Vendor\default\Magento_CatalogSearch\web\css\source\_module.less only this code (need make changes here):

.action.search {
    display: inline-block;
    .lib-button-icon(
    @_icon-font-content: @icon-search,
    @_icon-font-size: 24px,
    @_icon-font-text-hide: true,
    @_icon-font-color: @header-icons-color,
    @_icon-font-color-hover: @header-icons-color-hover,
    @_icon-font-line-height: 24px
    );
    .lib-button-reset();
    position: absolute;
    right: @indent__s;
    top: 0;
    z-index: 1;

I found .lib-button-reset(); on magento\lib\web\css\source\lib\_buttons.less

.lib-button-reset() {
    background-image: none; // Reset unusual Firefox-on-Android default style
    background: none; // >>> Need change <<<
    -moz-box-sizing: content-box; // Hack: fix Firefox button line-height problem
    border: 0;
    box-shadow: none;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-shadow: none;
    .lib-css(font-weight, @font-weight__regular);

    &:focus,
    &:active {
        background: none;
        border: none;
    }

    &:hover {
        background: none;
        border: none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: not-allowed;
        pointer-events: none; // Disabling of clicks
        .lib-css(opacity, @button__disabled__opacity); // >>> Need change <<<
        // >>> Need add z-index: -1; <<<
    }
}

So, to correctly add background, change opticaly and add z-index in app\design\frontend\Vendor\default\Magento_CatalogSearch\web\css\source\_module.less?

0

You don't say if you are using a theme or a module where you need this change made, so i will assume that you need this in a theme as it's a little more straight forward. You want to make a file in your theme here: app/design/frontend/{{vendor_namespace}}/{{theme_name}}/web/css/source/_extend.less The code you are looking for is:

.block-search .action.search {
  .lib-button(
    @_button-background: tomato;
  );
}

.block-search .action.search[disabled] {
  opacity: 1;
}

This will change the background color and set the disabled state to a full opacity. This button is greyed out by default until there is text is in the search. This is to prevent people from searching a null value. But this code will override that appearance. As you will see, the background for this element will change the layout a bit, as the button was not designed to have one, but you can play with the values till you get the right results.

enter image description here

For more info on the ui library, you can read here:

http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/buttons.html

  • Thank you! But I wrote that I'm making a change in the module Magento_CatalogSearch. Use _extend.less not good when need make a lot changes. In the end, you will have many sets of css for the same blocks. Correctly need make changes in module. – Sylon Jul 20 '17 at 20:30
  • Your module should have its own namespace. Are you editing the core code? If so you can just make a module with the overrides in your own dir in the app/code folder. When you do, you will just have to rename the file to _module.less in the view/web/css/source folder. – circlesix Jul 20 '17 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.