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%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1
Your session has expired. You are being logged out.