Site logo

Archived topic

Search Placeholder PHP Snippet

20 replies · Started by Michael on January 28, 2020

Viewing posts 16–21 of 21

Telling WordPress search (which isn't good in the first place) to do that would be difficult, I think.

I tried to find a plugin to do it, but I wasn't able to unfortunately.

No problem Tom. Thank you for trying.

No problem! Let me know if you find something :)

Will do for sure :)

For anyone who may have need of this... Here is my styling for the Google Custom Search. It took me waaaay longer than I thought to achieve it, so hopefully this can save others some pain. It's an !important fest but it's the only way it would take the styling:

.gsc-control-cse {
	border-width: 0 !important;
	padding: 0 !important;
}

form.gsc-search-box,table.gsc-search-box {
	margin-bottom: 0 !important;
}

.gsc-search-box .gsc-input {
	padding: 0 !important;
}

#gsc-iw-id1 {
	box-shadow: none !important;
	border-width: 0 !important;
	height: auto !important;
	padding: 0 !important;
}

#gs_tti50 {
	padding: 0 !important;
}

#gsc-i-id1 {
	background: none !important;
	color: #666;
	padding: 5px 0 0 10px !important;
	text-indent: 0 !important;
	width: 335px !important;
}

a.gsst_a {
	margin: 0 !important;
	padding: 0 !important;
	transition: opacity 0.3s ease-in-out !important;
	-moz-transition: opacity 0.3s ease-in-out !important;
  	-o-transition: opacity 0.3s ease-in-out !important;
  	-webkit-backface-visibility: hidden !important;
	-webkit-transition: opacity 0.3s ease-in-out !important;
}

span#gs_cb50.gscb_a {
	color: #539c22 !important;
	margin-top: 7px !important;
	padding: 0 !important;
}

.gsst_a:hover {
	opacity: 0.7 !important;	
}

table.gsc-search-box {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	display: inline-block !important;	
	height: 33px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 400px !important;
}

table.gsc-search-box td {
	height: 33px !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
}

table#gs_id50.gstl_50.gsc-input {
	alignment-baseline: middle !important;
	margin: 0 !important;
	padding: 0 !important;	
}

td.gsc-input {
	display: inline-block !important;
	height: 33px !important;
	margin: 0 !important;
	padding: 0 !important;
}

button.gsc-search-button {
	border-width: 0 !important;
	box-shadow: none !important;
	box-sizing: content-box !important;
	cursor: pointer;
	height: 13px !important;
	margin-top: 3px !important;
	outline: none;
	padding: 0 !important;
	width: 13px !important;	
}

.gsc-branding {
	display: none !important;
}

.gsc-control-cse, #gsc-iw-id1 {
	background-color: transparent !important;
}

#search-container {
	align-items: center;
	background-color: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	display: flex;
	height: 33px;
	justify-content: flex-end;
	margin-top: 25px;
	padding: 3px;
	width: 400px;	
}

button.gsc-search-button {
	background-color: #539c22 !important;
	border-radius: 5px !important;
	padding: 10px !important;
	transition: opacity 0.3s ease-in-out !important;
	-moz-transition: opacity 0.3s ease-in-out !important;
  	-o-transition: opacity 0.3s ease-in-out !important;
  	-webkit-backface-visibility: hidden !important;
	-webkit-transition: opacity 0.3s ease-in-out !important;
}

button.gsc-search-button:hover {
	cursor: pointer;
	opacity: 0.7;
}

Glad you got it working - thanks for sharing your code! :)

This archived topic is closed to new replies.