Create a search hero for your homepage with a search bar and quick links to important resources.
<div id="axero-search-widget-{{WidgetID}}" class="axero-search-block {{CustomCSSClass}}"> <h3>{{{WidgetTitle}}}</h3> <div class="axero-search-block-inner"> <div class="search-container"> <a href="#" title="{{Resources.GlobalSearchText}}" class="btn input-button"><i class="icon-search"></i></a> <div class="search-textbox"> <input type="text" placeholder="{{Resources.GlobalSearchText}}" class="input-search"> </div> </div> </div> <div class="axero-search-block-sub"> <h4>Quick Navigation</h4> <div class="row-fluid axero-search-block-links"> <div class="span4"><a href="/spaces/252/human-resources/wiki">Employee Handbook</a></div> <div class="span4"><a href="/spaces/252/human-resources/forums">Discussions</a></div> <div class="span4"><a href="/spaces/252/human-resources/videos">Training Videos</a></div> </div> <div class="footer-link"><a href="/spaces/252/human-resources/cases/add-edit-case/0">Have a question that we can help you with?</a></div> </div> </div> <script type="text/javascript"> jQuery(function() { Communifire.SearchWidget.init({ context: jQuery('#axero-search-widget-{{WidgetID}}'), searchResultsPageURL: '{{Contents.SearchResultsPageURL}}', searchBox:'.input-search', searchButton:'.input-button' }); }); </script>
/*Search Hero Template Styles*/.axero-community-wrapper { padding: 0;}.cfx-hero { padding: 15px 0 75px; background: #000; margin-top: -30px; margin-bottom: 30px; background-image: url(https://cdn.communifire.com/stock/06.jpg); /*Hero image*/ background-position: 25% 50% !important; background-origin: border-box !important; background-size: cover !important; position: relative; } .cfx-hero:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .1); content: ""; height: 100%; display: block; } .axero-search-block { position: relative; color: #fff; text-align: center; padding: 0px; border-radius: 4px; box-sizing: border-box; } .axero-search-block h3 { font-size: 1.9em; font-weight: normal; margin: 60px 0 15px 0 } .axero-search-block .axero-search-block-inner { max-width: 900px; margin: auto; } .axero-search-block .axero-search-block-inner .search-container a { color: #212b35; } .axero-search-block .axero-search-block-inner .search-container a.btn.input-button { top: 5px; } .axero-search-block .axero-search-block-inner .search-container .search-textbox { height: 45px; } .axero-search-block .axero-search-block-inner .search-container .search-textbox input[type="text"] { font-size: 1.2em; padding: 5px 33px 5px 15px; height: 45px; line-height: 45px; } .axero-search-block .axero-search-block-sub { margin-top: 30px; } .axero-search-block .axero-search-block-sub h4 { font-size: inherit; margin: 0; } .axero-search-block .axero-search-block-sub .axero-search-block-links { max-width: 700px; margin: 15px auto; } .axero-search-block .axero-search-block-sub .axero-search-block-links a { border: 0px solid #444; display: block; color: #fff; line-height: 35px; padding: 4px 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .7); font-size: 1.2em; } .axero-search-block .axero-search-block-sub .axero-search-block-links a:hover { background: rgba(0, 0, 0, .9); text-decoration: none; } .axero-search-block .axero-search-block-sub .footer-link { margin-top: 25px; font-size: 1.2em; } .axero-search-block .axero-search-block-sub .footer-link a { color: #fff; } @media (max-width: 979px) { .cfx-hero { margin-top: 0px; padding-left: 15px; padding-right: 15px; } .axero-search-block .axero-search-block-sub .axero-search-block-links .span4 { margin-bottom: 5px; } }
background-image
The HTML template provided in this wiki uses sample text and links for the buttons. Follow the steps below to replace the placeholders with your own text and links.
<div class="span4"><a href=
href
/spaces/252/human-resources/wiki
Employee Handbook
The layout also needs to be updated to display the additional buttons correctly. Depending on how many buttons you added, this may be as simple as changing span4 to a different class or may require additional CSS overrides. For assistance adjusting the layout, ask a question in the forums.
span4
The layout also needs to be updated to display the remaining buttons correctly. Depending on how many buttons you removed, this may be as simple as changing span4 to a different class, or may require additional CSS overrides. For assistance adjusting the layout, ask a question in the forums..
.cfx-hero { padding: 15px 0 75px; background: #000; margin-top: -30px; margin-bottom: 30px; background-image: url(https://cdn.communifire.com/stock/06.jpg); /*Hero image*/ background-position: 25% 50% !important; background-origin: border-box !important; background-size: cover !important; position: relative; }
<div class="footer-link">
/spaces/252/human-resources/cases/add-edit-case/0
Have a question that we can help you with?
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/27587/search-hero-template?locale=en-US%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525253fact%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525253d1%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525253fSpaceID%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525253d5
Your session has expired. You are being logged out.