Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
VincenzoPace

Customize Styling of Search

Question

Hi, I have a search box in one of my gallery pages and I wanted to style is but I couldn't figure out how to do it. Are there any custom CSS scripts I can use to change...

Border Colour (to black)

Dropdown background (to black)

Dropdown text (to white)

Dropdown image aspect ratio (3:2)

 

Thank you!

Screen Shot 2020-01-12 at 11.01.49 PM.png

Screen Shot 2020-01-12 at 11.02.40 PM.png

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
/* text black */
.sqs-search-container-item .sqs-main-content * {
    color: black;
}
/* dropdown color */
.sqs-search-preview-ui .sqs-search-ui-result {
    background: green;
    border-color: green;
}
/* show only title */
.search-result .sqs-content {
    display: none;
}

 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0
5 minutes ago, tuanphan said:

.sqs-search-ui-button-wrapper.color-dark .search-input {
    border-color: black;
}
.sqs-search-ui-button-wrapper.color-dark .search-input::placeholder {
    color: white;
}

 

Heyy! That fixes most of the problem.. Do you know how I can change the dropdown colour? and only display the title... The text colour is black but there's some white text

Screen Shot 2020-01-12 at 11.50.29 PM.png

Share this post


Link to post
  • 0
7 minutes ago, tuanphan said:

/* text black */
.sqs-search-container-item .sqs-main-content * {
    color: black;
}
/* dropdown color */
.sqs-search-preview-ui .sqs-search-ui-result {
    background: green;
    border-color: green;
}
/* show only title */
.search-result .sqs-content {
    display: none;
}

 

Amazing!! Thank you so much!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...