Looking to reduce charcoal-grey heading

[anatolew10150054]

Looking to reduce charcoal-grey banner (heading) from 62px to 50 px. Where (not just file, but where in code) do I find the right code for this?

[Captiv8r]

And the output type you are creating is?

WebHelp

WebHelp Pro

FlashHelp

FlashHelp Pro

Multiscreen (And if Multiscreen, which profile?)

Responsive HTML 5

Cheers... Rick

[anatolew10150054]

This is for a responsive HTML 5 application (will be on both PCs and mobile devices). No

[anatolew10150054]

This is for a responsive HTML 5 application (will be on both PCs and mobile devices). No print version of Help.

[Captiv8r]

Ahhh, to make modifications such as those, you will need to be prepared to dig into the CSS and make changes. Likely in more than one spot.

I'll ping somebody that may be able to assist and see how difficult it may be.

Cheers... Rick

[Willam_van_Weelden]

The process of changing the height is quite simple, if you are willing to dabble with the SCSS of the layout.

First, download the source files from Adobe: RoboHelp screen profiles and layouts

Second, download and install Koala: Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

The application allows you to convert the SCSS file into a regular CSS.

Then for the changes:

1. Open the Layout.scss file of the Charcoal layout.
2. Go to line 687. Change the value of the variable to your desired height. This changes the header on mobile phones:
   $heading-height-mobile: 3.125em;
3. Go to line 1179. Change the value of the variable to your desired height. This changes the header on tablets:
   $heading-height-landscape: 4em;
4. Go to line 1530. Change the value of the variable to your desired height. This changes the header on desktops:
   $heading-height-desktop: 7em;

Start Koala and point it to the folder that holds the .scss file. It will convert the file automatically and you can use the CSS file in your output.