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
3 replies · opened Aug 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
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. :)
Hi :)
How would I integrate this custom search bar with a dropdown action button inline on right?
Like here:
http://v4-alpha.getbootstrap.com/components/input-group/#buttons-with-dropdowns
Is there an example in the Demo pages already?
I did look at many pages to find an example.
Thanks :)
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