Is it possible to make the following cosmetic changes?

  • Resolved josesg95

    (@josesg95)


    3 years, 5 months ago

    Hello! I really appreciate this amazing plugin, just that I would like to make some cosmetic changes, would it be possible?
    1.- Change the magnifying glass icon for another icon that I download.
    2.- That the text inside the search box is not inclined.
    3.- Make the edge a little wider and have a little more radius.
    4.- Let the color of the letter be black (black is selected in the settings, but it appears gray).
    Thanks!!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello,

    Yes, you can replace the search icon by using this snippet: https://bitbucket.org/damian-gora/workspace/snippets/knGyqe/asfw-replace-the-search-icon-icon-layout

    Can you share your site address for the other changes?

    Thread Starter josesg95

    (@josesg95)

    Hi Clint, thanks for responding!
    Should I put the icon url in that code?
    I share the site address for the other changes industreys.com
    Thanks!

    Hello,

    Yes, something like below:

    $html = '<img src="https://www.industreys.com/wp-content/uploads/2021/06/icon.png" />';

    Can you try adding the following CSS to your Theme Customizer > Additional CSS:

    .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	color: #000 !important;
	border-radius: 23px !important;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	font-style: normal !important;
}
    Thread Starter josesg95

    (@josesg95)

    Hi Clint! That worked, only the magnifying glass icon appears above the search bar and is a bit big. Can the pixels be adjusted?

    Plugin Support Marta

    (@martadella)

    Hi @josesg95,

    Please try adding a class to your img tag:

    $html = '<img class="fibo-icon" src="https://www.industreys.com/wp-content/uploads/2021/06/icon.png" />';

    And then style the class with the following CSS:

    .fibo-icon {
  position: absolute;
  max-width: 20px;
  top: 10px;
  left: 15px;
}

    Let us know if it works for you!

    Regards,
    Marta

    • This reply was modified 3 years, 5 months ago by Marta.
    Thread Starter josesg95

    (@josesg95)

    Thanks Marta!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Is it possible to make the following cosmetic changes?’ is closed to new replies.