Return to previous page

Reply 290658 to: Adding search form

Avatar: Olga Barlow
Olga Barlow
Support staff
June 11, 2021 at 14:46

Hello,

1/ You are having a search button inside the content but you have uploaded hard-colored svg -> http://i.prntscr.com/UD9YE8ZrQKaD49PVrhuP2g.png

I have added custom CSS below to your child theme to fix that and add the bg gradient for the full width search.

/* fix custom svg colors in search popup */
.search-full-width .search-button svg, .search-full-width .search-button svg path {
    fill: currentColor;
}
/* background gradient for search content */
.search-full-width .et-mini-content {
    background-image: linear-gradient( 90deg , var(--e-global-color-primary) 0%, var(--e-global-color-secondary) 100%);
}
/* making transparent select+input of search */
.et_b_header-search.search-full-width .input-row,
.search-full-width input[type="text"] {
    background: transparent;
}
/* transparent background for search results */
.search-full-width .ajax-search-form .ajax-results-wrapper .autocomplete-suggestions, .search-full-width .ajax-extra-content {
    background: transparent;
}
/* text color for search no-results */
.search-full-width .autocomplete-no-suggestion {
    color: #fff;
}

2/ To change texts you can use Loco Translate plugin https://xstore.helpscoutdocs.com/article/30-base-theme-translation and instead of translating to other languages create translation for the existing language for the XStore Core plugin, find the mentioned strings and add your texts in the translation fields. You’ll be able to remove the Loco translate plugin once you finish, it won’t break the transaltion.

3/ We have added few actions/filters for search full-width content
http://i.prntscr.com/wdC2YW3JT7q333zpMggGlg.png

Example:
Create Static block in the backend (http://i.prntscr.com/ZDSOgpMeSPGZc4qgeDD_DQ.png)
You can simply copy shortcode to your child-theme/functions.php (http://i.prntscr.com/r-HPXyJpQL_0nwqMMHCGLQ.png)

Frontend view -> http://i.prntscr.com/gpJ04Mg9TvapPfPvpIGmsQ.png

Regards

#290658
Go To The Whole Conversation In Topic

Useful links WooCommerce & WordPress

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.