Search Hero Template | Communifire Documentation

Create a search hero for your homepage with a search bar and quick links to important resources. 

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Search Hero as the Template Name.
4. Select Search as the Widget Type.
5. In Resource Keys CSV, enter GlobalSearchText.
   Example:
   
6. Paste the following code in the editor:

   <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>

7. Replace the links and link text under Quick Navigation with your own links and text. (Refer to the Change Button and Link Text section.)
8. Click Save Template.

Add CSS Overrides

1. Click the gear icon > Control Panel > System > CSS Overrides.
2. In the editor, add the following code, at the bottom.
   

   /*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;
       }
   }

3. To change the search hero background image, find the line that starts with background-image . Replace https://cdn.communifire.com/stock/06.jpg with the URL of your desired image. Do not delete the surrounding parentheses.
4. Click Save CSS Overrides.

How to Use the Template

1. Click the gear icon > Control Panel > System > Page Builder.
2. Add or edit a page.
3. Click Layout.
4. Drag a 12-column layout onto the page.
5. On the layout, click > Edit properties.
6. In Custom CSS class, add cfx-hero.
   
7. Click Save Widget.
8. Click Widgets.
9. Drag a Search widget into the layout.
10. On the widget, click > Edit properties.
11. Update the Widget Title. The title will appear at the top of the search hero.
12. Click Template.
13. Select Search Hero.
14. Click Save Widget.
15. Click Publish changes.
16. Click Go to page.

Customize the Search Hero

Change Button Text and Links

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.

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. In the Widget Types menu, select Search.
3. Click Search Hero.
4. In the editor, find the lines that start with <div class="span4"><a href= . Each line is the code for a single button.
5. The button links appear after href and between the quotes (e.g. /spaces/252/human-resources/wiki ). Replace the links with your own links.
   You can use an absolute or relative URL. (e.g. https://myintranet.communifire.com/spaces/252/human-resources/articles or /spaces/252/human-resources/articles)
6. The button text appears after the URL (e.g. Employee Handbook). Replace the button text with your own text. Do not delete any angled brackets.
7. Click Save Template.

Add Buttons

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. In the Widget Types menu, select Search.
3. Click Search Hero.
4. In the editor, find the lines that start with <div class="span4"><a href= . Each line is the code for a single button.
5. Copy one of the lines.
6. Add a new line after one of the lines.
7. Paste the text you copied.
8. Update the link and URL in the line you pasted.
9. Repeat steps 5-8 to add as many buttons as you desire.
10. Click Save Template.

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.

Remove Buttons

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. In the Widget Types menu, select Search.
3. Click Search Hero.
4. In the editor, find the lines that start with <div class="span4"><a href= . Each line is the code for a single button.
5. Delete the lines containing the buttons you want to remove.
6. Click Save Template.

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..

Change the Background Image

1. Click the gear icon > Control Panel > System > CSS Overrides.
2. Find the following code block.

   .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;
   }

3. In that block, find the line that starts with background-image .
4. Make changes using one of the options below:
   • Replace the image with a different image: Replace https://cdn.communifire.com/stock/06.jpg with the URL of your desired image. Do not delete the surrounding parentheses.
   • Replace the image with a a gradient CSS: Use a tool like Ultimate CSS Gradient Generator to get gradient CSS. Replace the line that starts with background-image with the CSS that's generated.
5. Click Save CSS Overrides.

Change Footer Text and Link

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. In the Widget Types menu, select Search.
3. Click Search Hero.
4. In the editor, find the lines that start with <div class="footer-link"> .
5. Replace /spaces/252/human-resources/cases/add-edit-case/0 with your own link.
6. Replace Have a question that we can help you with? with your own text.
7. Click Save Template.