Jump to content

'Search' from footer to header? Editing the /search?

Recommended Posts

  • Replies 15
  • Views 1.5k
  • Created
  • Last Reply

Thank you derricksrandomviews!
I would like to place the icon here in the header just beside the social icons. The text Search should be white instead of grey. I would also like to place the Danish Word 'Søg' instead of 'Search'
https://static1.squarespace.com/universal/images-v6/icons/icon-searchqueries-20-light.png

I have added the following CSS to remove everything else but the icon and the text. It seems to work but I need the code to change the grey color to white.
.sqs-search-ui-button-wrapper.color-light .search-input {
background-image: url(/universal/images-v6/icons/icon-searchqueries-20-light.png);
color: #ffffff!important;
border: 0px!important;
transition: none!important;
opacity: 100!important;
}

The section in the header only has few configurations like one button option and the social links. There is no way to put anything else here. Do you know which query code I can use to place search beside the social links in the header?

The problem is also that I can't edit the https://julehjaelpen.dk/search - I would like to place and image in the top like all other pages. Otherwise my menu is not visible. How can I edit the search page?

I would appreciate your help. Look forward to hear from you.

All the best,
 

Link to comment

I have no problem writing in own languages. It is only this little string "Search" which I can not translate because it is pre filled text field from backend.
And I can't move the Search icon from footer to the header.

Hope someone can help me with the jQuery code? @Tuanphan, do you have a suggestion please? Hope to hear from you.

 

Link to comment

sorry, I charged this for 2 clients so I can't share detail code.

- Moving the Search icon from footer to the top?

With these, if you need, I can give code for free

  •  Change the color of the text 'Search' to white?
  • Translate the 'Search' text 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks. I understand now. I thought you were from the Squarespace support.

I would be happy if you will share the code for 

  • Change the color of the text 'Search' to white?
  • Translate the 'Search' text 


 Best regards,

Link to comment
8 hours ago, Brahe said:

Thanks. I understand now. I thought you were from the Squarespace support.

I would be happy if you will share the code for 

  • Change the color of the text 'Search' to white?
  • Translate the 'Search' text 


 Best regards,

I am not a Squarespace employee. Search color/text on Search Page or Footer Search Block?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 6/4/2020 at 2:17 PM, Brahe said:

Hi Tuanphan

The Search color/text in footer and the translation for both. 

Thank you so much in advance.

Hi. Add to Home > Design > Custom CSS

footer.sections .search-input::placeholder {
    color: white;
}

and add to Home > Settings > Advanced > code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(function($){
    $("footer.sections .search-input::placeholder").html(function() { 
          return $(this).html().replace("Search", "New Text");  
    });
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.