By default on the left side of every article there is box with author Gravatar and short info.

To hide article box from single article view you have to do 2 steps:

1.  Articles > Options > Show Author [No]
2.  Then in Custom CSS field (template settings) or inside custom.css file please add following code: 

body.view-article div.article-details-wrap .col-sm-3 {display:none;}
body.view-article div.article-details-wrap .col-sm-9 {width:100%}

Article view after using above tips:

Floox template use its own collection of 17 addcional icon fonts, list of them include that file: templates\shaper_floox\css\floox-icon.css

.floox-wave:before {content: "\e910"; }
.floox-builder:before {content: "\e900";}
.floox-chat:before { content: "\e901";}
.floox-clock:before { content: "\e902"; }
.floox-edit-tools:before { content: "\e903"; }
.floox-headphones:before { content: "\e904";}
.floox-love-fill:before { content: "\e905";}
.floox-love-line:before { content: "\e906"; }
.floox-minus:before {content: "\e907";}
.floox-paper-plane:before {content: "\e908";}
.floox-pen-tool:before {content: "\e909";}
.floox-picture:before {content: "\e90a"; }
.floox-plus:before { content: "\e90b";}
.floox-promotion:before {content: "\e90c"; }
.floox-search:before { content: "\e90d"; }
.floox-smartphone:before { content: "\e90e"; }
.floox-structure:before { content: "\e90f"; }

Example of icons usage

<i class="floox-icon floox-pen-tool">floox-pen-tool</i>

Probably you have seen search  icon (feature) in this same row as menu.

You can recreate this effect very easy:

1. Add new module type: Search
2. Search Button : Yes
3. Search Button Image: No
4. Position: menu
5. Show title: Hide
6. Menu Assignment > Module Assignment: On all pages
7. Advanced > Layout: topsearch
8. Advanced > Module Class Suffix:  pull-right floox-top-search
   *remember to add one space before class name

In demo content which you have from QuickStart you might seen that most of subpages have page Titles and Subtitles located below the menu. Beside there is also background image.

Those two design elements you can easily replace with your content.

1. Go to Menu Manager
2. Find MainMenu
3. Find menu item which you are going to customize, for example, About us
4. Choose tab named "Helix Page Title"
5. Change used Page Title and Page Subtitle
6. Upload your own background image. For demo purpose we used jpg files, 1920 × 432 px
7. Play with different options.

Many users ask us: How to replace/change background color used under menu and logo (header) when you'd scroll down the page. Default color there is navy blue with transparency level.

We understand that in many cases you want to use your own background color based on colors taken from logo or corporate identity manual. It's very easy to change. Header use background color based on RGBA colors (CSS rule). Here is example custom CSS code modification to replace from navy blue into green:

#sp-header.menu-fixed {background: rgba(32,112,41,0.95);}

Custom CSS code in Helix3 based templates should be used in one of following locations:

1. custom.css file  (a new file) must be located here: templates\shaper_floox\css\custom.css
2. In Custom CSS code field inside Floox Template settings.

I guess you are wondering: How to change background color overlay for headers used on subpages.

We used an extra background layer based on CSS rules only. It means that you can use your own background color, based on HEX and opacity level. 

Here are example modifications (different bg color), look at the screenshot below:

 div.sp-page-title::before {
    opacity: 0.7;
    background: #83BB35;}