Custom Search Bar

3 replies · opened Aug 11, 2016

Jjasonfan1203Aug 11, 2016

I'm just wondering if this support site is using your own canvas template. And if yes, how can I make a search bar that looks just like the one we see on the main support page? Or as attached with this message. Thanks!

-Jason

SSemicolon WebSTAFFAug 17, 2016

Hello,

[sb_private_reply]We Really Apologize about the Delay in replying to your Support Query and Truly Truly appreciate your Patience with us![/sb_private_reply]

We are indeed using Canvas for Our Support Forum but the Search Bar is Custom. Consider using the following custom CSS Code:

.big-search {
	position: relative;
	clear: both;
}

.big-search i {
	position: absolute;
	top: 0;
	left: 10px;
	width: 60px;
	height: 60px;
	font-size: 24px;
	line-height: 57px;
}

.big-search .border-form-control {
	font-size: 25px;
	height: 60px;
	padding: 16px 4px;
	padding-left: 55px;
	border-bottom: 2px solid #DDD;
}

.big-search .border-form-control:focus { border-bottom-color: #666; }

.big-search .border-form-control::-moz-placeholder {
	color: #BBB;
	font-weight: 400;
}

.big-search .border-form-control:-ms-input-placeholder {
	color: #BBB;
	font-weight: 400;
}

.big-search .border-form-control::-webkit-input-placeholder {
	color: #BBB;
	font-weight: 400;
}

and then the following HTML Code:


	
	

This should definitely work fine.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

SSemicolon WebSTAFFSep 16, 2016

Hello,

This is Definitely Possible and you can surely use the Codes directly from the Bootstrap: http://getbootstrap.com/components/#input-groups-buttons-dropdowns .

Example Code:


	
	
		Action 
		
			
- [Action](#)
			
- [Another action](#)
			
- [Something else here](#)
			
- 
			
- [Separated link](#)
		
	

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard