HOW to format the Search Bar on mobile with white text as it has blue background

  • Resolved kristinubute

    (@kristinubute)


    1 year, 10 months ago

    Hi, On my client site I have installed your plugin and added the shortcode to a page. I am using Divi Theme so I have made sure in Divi that it is ONLY visible for MOBILE devices. I don’t want just the ICON displayed so currently it is showing the Search Bar which is fine on mobile except for the formatting.

    Some things I need help with:

    • Search bar for “Search for Products” where you input your product is written in grey and background is blue. I need the TEXT in here WHITE and NOT grey as you cannot read it . Tried to find the correct CSS code to fix this
    • I tried this code but didn’t work.
    • .dgwt-wcas-search-form {
    • border-color: #000;
    • color: #fff;
    • When I type the product in, and I see it AUTOCOMPLETES and gives product results which is great. It shows the Product image and Title etc. Then when I click no issues to open. The issue I’m having is if you DON’T click on one of the products in the AUTOcomplete area, and just click on button ENTER for the full search, then it goes back to the Home Page and displays all those relevant Products from the search but very differently. It has a drop down menu called “Show Post Results” and “Show Page REsults” .. then it shows the Products with date added I assume ) and TITLE of product and an arrow. There is NO image on this page. You can scroll down and find the other products in this list, but it is ONLY a list, and NO image and all show a date which we don’t want. I dont’ want it to show the date and don’t want the drop down menu NOT needed at all.
    • How can I fix this view on this section ? I would prefer it to look like the other Search area where it shows the Product Image, and Title and Info.

    Thanks in advance

    Regards

    Kristin

Viewing 1 replies (of 1 total)
  • Plugin Support Kris

    (@c0nst)

    Hi @kristinubute

    Use this CSS to change placeholder text color in FiboSearch input:

    .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-webkit-input-placeholder {
	color: red;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-moz-placeholder {
	color: red;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-input:-ms-input-placeholder {
	color: red;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-ms-input-placeholder {
	color: red;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::placeholder {
	color: red;
}

    And this to change the color of input text:

    .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input {
	color: red;
}

    Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at?this video.

    The second may be fixed by:

    Go to WP Admin -> WooCommerce -> Customize -> Product Catalog and check if you have a default ordering set (see screenshot).

    This ordering can be also changed by page builder/themes or other plugins.

    Also, check your SEO or Redirect plugin it may redirect search results to the homepage and causes these weird results. Maybe one of our code snippets that were used may cause that? For example:

    add_filter( 'dgwt/wcas/scripts/disable_submit', '__return_true' );

    Regards,
    Kris

Viewing 1 replies (of 1 total)
  • The topic ‘HOW to format the Search Bar on mobile with white text as it has blue background’ is closed to new replies.