Highlighted

Modify default TOC pane width in HTML5?

Community Beginner ,
Jun 16, 2016

Copy link to clipboard

Copied

Is there a way to edit css file so that my default desktop TOC/Search pane width is a little wider?  I've tried editing several elements in CSS, but to no avail.

Thanks in advance!

The best way to do this is through the SCSS files and compile the CSS file from that. There are many different elements that use the sidebar width for correct positioning.

In the SCSS files, you find the variables:

$sidebar-width

$sidebar-width-landscape

$sidebar-width-desktop

By updating these in the SCSS, the sidebar will be shown correctly. You can get the SCSS files (and instructions) here: https://helpx.adobe.com/robohelp/robohelp-screen-profiles-layouts.html

Topics

HTML5 layout

Views

829

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

Modify default TOC pane width in HTML5?

Community Beginner ,
Jun 16, 2016

Copy link to clipboard

Copied

Is there a way to edit css file so that my default desktop TOC/Search pane width is a little wider?  I've tried editing several elements in CSS, but to no avail.

Thanks in advance!

The best way to do this is through the SCSS files and compile the CSS file from that. There are many different elements that use the sidebar width for correct positioning.

In the SCSS files, you find the variables:

$sidebar-width

$sidebar-width-landscape

$sidebar-width-desktop

By updating these in the SCSS, the sidebar will be shown correctly. You can get the SCSS files (and instructions) here: https://helpx.adobe.com/robohelp/robohelp-screen-profiles-layouts.html

Topics

HTML5 layout

Views

830

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
Adobe Community Professional ,
Jun 16, 2016

Copy link to clipboard

Copied

You might try having a look at this thread - https://forums.adobe.com/message/2007076#2007076 – to get some ideas…

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...
Community Beginner ,
Jun 16, 2016

Copy link to clipboard

Copied

Thanks Jeff...that one is specific to WebHelp, whereas I'm looking to edit CSS for Responsive HTML. I watched Willam van Weelden​'s webinar on the topic, which is for RH11.

RH2015 seems to have additional elements that need to be modified, as modifying only the sidebar width and main topic pane width doesn't do the trick. The show/hide sidebar icon doesn't shift with the sidebar itself, for example.  It's not a 1 to 1 match, so I was wondering if anyone has actually done this for RH2015 and if so, exactly which elements get changed?

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 ,
Jun 23, 2016

Copy link to clipboard

Copied

The best way to do this is through the SCSS files and compile the CSS file from that. There are many different elements that use the sidebar width for correct positioning.

In the SCSS files, you find the variables:

$sidebar-width

$sidebar-width-landscape

$sidebar-width-desktop

By updating these in the SCSS, the sidebar will be shown correctly. You can get the SCSS files (and instructions) here: https://helpx.adobe.com/robohelp/robohelp-screen-profiles-layouts.html

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...
DirkD007 LATEST
Explorer ,
Nov 01, 2017

Copy link to clipboard

Copied

The download link on that page to the SCSS 2017 zip files (scss-files-2017.zip) is visible but the one for 2015 (scss-files.zip) is hidden. I had to view the page source code to find the link.

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