• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Looking to reduce charcoal-grey heading

New Here ,
Mar 15, 2018 Mar 15, 2018

Copy link to clipboard

Copied

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?

Views

243

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
community guidelines
LEGEND ,
Mar 15, 2018 Mar 15, 2018

Copy link to clipboard

Copied

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

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
community guidelines
New Here ,
Mar 15, 2018 Mar 15, 2018

Copy link to clipboard

Copied

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

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
community guidelines
New Here ,
Mar 15, 2018 Mar 15, 2018

Copy link to clipboard

Copied

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

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
community guidelines
LEGEND ,
Mar 15, 2018 Mar 15, 2018

Copy link to clipboard

Copied

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

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
community guidelines
LEGEND ,
Mar 17, 2018 Mar 17, 2018

Copy link to clipboard

Copied

LATEST

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.

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp