Highlighted

Is there a way to remove the header (desktop) completely?

New Here ,
Feb 11, 2016

Copy link to clipboard

Copied

Hello,

The Azure_Blue layout that Robohelp 2015 provides works perfectly for my purposes, except the header. The generated content will be embedded in a web portal that already has a header of its own. I can make the background, font, and the logo white - making the header "invisible". But the empty space still looks too awkward. Plus, the sidebar already features a search function, so the search field in the header is unnecessary. Any help would be much appreciated! Thank you.

1.png

-W

The CSS uses positioning to set the header and the other content. So when removing the header, you will also have to fix the positioning.

  1. Get the SCSS source files: RoboHelp screen profiles and layouts
  2. Open the files Azure_Blue\Layout.scss in Notepad++ or any editor of your choice
  3. On line 1371, set the variable $heading-height-desktop to 0em. This will fix all height calculations in the SCSS to make sure everything is now positioned correctly.
  4. On line 1427, add display: none !important;
  5. On line 1628, add display: none !important;

Save the file and generate the CSS file with an SCSS compiler like Koala. Add the CSS to your Screen Layout and you should be good to go.

Topics

Classic, HTML5 layout

Views

609

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is there a way to remove the header (desktop) completely?

New Here ,
Feb 11, 2016

Copy link to clipboard

Copied

Hello,

The Azure_Blue layout that Robohelp 2015 provides works perfectly for my purposes, except the header. The generated content will be embedded in a web portal that already has a header of its own. I can make the background, font, and the logo white - making the header "invisible". But the empty space still looks too awkward. Plus, the sidebar already features a search function, so the search field in the header is unnecessary. Any help would be much appreciated! Thank you.

1.png

-W

The CSS uses positioning to set the header and the other content. So when removing the header, you will also have to fix the positioning.

  1. Get the SCSS source files: RoboHelp screen profiles and layouts
  2. Open the files Azure_Blue\Layout.scss in Notepad++ or any editor of your choice
  3. On line 1371, set the variable $heading-height-desktop to 0em. This will fix all height calculations in the SCSS to make sure everything is now positioned correctly.
  4. On line 1427, add display: none !important;
  5. On line 1628, add display: none !important;

Save the file and generate the CSS file with an SCSS compiler like Koala. Add the CSS to your Screen Layout and you should be good to go.

Topics

Classic, HTML5 layout

Views

610

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Feb 19, 2016

Copy link to clipboard

Copied

The CSS uses positioning to set the header and the other content. So when removing the header, you will also have to fix the positioning.

  1. Get the SCSS source files: RoboHelp screen profiles and layouts
  2. Open the files Azure_Blue\Layout.scss in Notepad++ or any editor of your choice
  3. On line 1371, set the variable $heading-height-desktop to 0em. This will fix all height calculations in the SCSS to make sure everything is now positioned correctly.
  4. On line 1427, add display: none !important;
  5. On line 1628, add display: none !important;

Save the file and generate the CSS file with an SCSS compiler like Koala. Add the CSS to your Screen Layout and you should be good to go.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Apr 20, 2016

Copy link to clipboard

Copied

Thank you for your reply!

Your suggestion worked, but only for when the browser window is maximized...When the window is not maximized, the header still displays and the table of contents only list items in the current chapter.

Further suggestions would be greatly appreciated. Thanks a bunch!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 25, 2016

Copy link to clipboard

Copied

For mobile, it is a setting in the layout whether you want to see the header. (Look in the usersettings.js file, you'll find a variable for that.)

For tablet, you have a similar workflow as for desktop.

  1. In this case, look for: $heading-height-landscape. Set it to 0.
  2. On line 1101, add display: none !important;

Save the file and generate the CSS file with an SCSS compiler like Koala. Add the updated CSS to your Screen Layout and the header should be hidden on tablet as well.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...