RH 2019 Indigo Layout Breadcrumbs and Buttons

[juliec18791782]

Hello, I am using RH 2019 with all updates.
I have created a new Indigo skin and tweaked colors for branding. I notice that the latest Indigo skin includes Expand/Collapse All, Remove Highlight, and Print icons when viewing topics.  However, Indigo also includes Breadcrumbs on the same sub navigation bar. If you drill down several layers into a topic, the Breadcrumbs run long and end up covering those great new buttons.  I know the answer probably lies in the CSS of which, I know very little and would probably do more harm than good. My manager has asked me to determine if I can adjust the Indigo skin to do one or both of the following:

1. Split the Breadcrumbs and buttons into two separate sub-navigation bars (two lines)?

or

2. Hopefully much easier, reduce the font size and spacing of the Breadcrumbs that are in Indigo skin.

See picture.

Many thanks in advance. 

PS. I did spend a better part of the afternoon looking for similar topics in the forum but the majority had to do with RH 2017.  

[Amebr · Accepted solution]

You could try adding the following to a custom css file and adding the css as a user asset to your skin. This is based on the default Indigo in New UI.

Depending on your customisations, I can't guarantee it will work, but I've tried to be very specific in what is targeted.

If you've added or removed buttons, you'll need to update the calc() in the first style.

The text between each /* and */ is comment text, just to explain what's going on and so I have half a chance of remembering what I did and why, later. Should help a friendly web developer fix things if they break.

/* 

This css snippet is based on the default buttons in a new Indigo skin in Robohelp 2019 New UI Update 12.

It HAS NOT been checked with any other skin or Robohelp version (including patches)

*/


/*
 calculate the max width based on the number of icon buttons and their defined widths, padding and margins (extrapolated from CSS code that's in Indigo in 2019 Classic but not New UI)

 Modify this calc if you've added or removed buttons and don't forget the buttons that are included but might not display, such as browse sequence forward and back and favourites - check using the browser dev tools. 
 
 calc(
 [width of content holder] 
 - [total number of buttons behind the scenes] * [defined width of each icon]
 - [number of fixed buttons, brs fav etc] * [width of their margin] 
 - [number of custom buttons in the buttons div] * [width of their margin]
 )
 */
 body.media-desktop div.header div.breadcrumbs {
	max-width: calc(71.25rem - 7 * 3rem - 4 * 0.5rem - 3 * 0.2rem)
}

/* 
reduce the line height of the inner div and remove the fixed container height
*/
body.media-desktop div.header div.breadcrumbs div.breadcrumb-holder {
	line-height: 1.5;
	height: initial;
}

/*
remove the padding between each breadcrumb because I think it looks weird.
Leave this out if you like the spacing
*/
body.media-desktop div.header div.header-align div.breadcrumbs a {
	padding-right: initial;
}

[juliec18791782]

Thank you so much, Amebr, I have been unable to return to this issue in the past week but will try your suggestion.  I am not a CSS or HTML person but we shall soon see if I can follow your clear directions. 

[juliec18791782]

I attached the customized css as an asset on the layout of my Indigo skin. Thank you, I am getting super close to desired outcome. I hate to be a pest, but is it at all possible you could provide a custom css that would reduce the font size of the breadcrumb text? As mentioned before I know nothing of writing CSS code.  

[Amebr]

Try changing this style:

body.media-desktop div.header div.breadcrumbs div.breadcrumb-holder

Add "font-size: 0.8em;" without the quotes on a new line before the closing curly bracket. You could put a point size instead of 0.8em, but the em value should be a bit more responsive, if you need that.

Side note: Very loosely, 1em represents the normal font size of the element. so 0.8em is saying "make the text 80% of the normal font size". So if the font size was normally 10pt, setting it to 0.8em would make it 8pt. It's not quite that simple, but it's a useful approximation.

[juliec18791782]

Thank you so much Amebr not only did that work, I so very much appreciate your willingness to educate me on what I'm actually doing.  Your patience and kindness is appreciated. Stay safe and healthy and thanks again.