Branding with custom CSS in RoboHelp 2020 version

[jmcclaine]

I'd like to change the responsive sizing of the logo in the header of the Azure layout.  I'd like to change the placement of the Title in the header.  I've tried using CSS overrides but nothing seems to work.  Is there a magic trick to alter the CSS for the header section?  This would be for the Mobile and HTML5 output.  I see a layout.css in the compiled output, but I can't locate the layout.css in the project.

[Amebr]

You have to create your own stylesheet to override specific parts of the one that Robohelp generates automatically for the skin. You add your custom css to the skin in the User Assets section of the skin - the location depends on the skin you select, but for Azure Blue it's in the Layout section.

Your best bet for figuring out what you need to do is play around in the developer tools of your browser - you will need advanced CSS skills or a friendly web developer. 🙂

[jmcclaine]

I did add a custom css file via the layout/ Add Assets.... My question was why it's not showing up on the HTM5 Output, the HTML Output is showing the mobile css, when I've specifically added html5 css to the Azure Blue skin, via Layout Add Assets.  Is this a bug?  I should be able to have two skins, and two different custom css and two different outputs. It doesn't seem to work for me. Can you set up two new skins and two separate css files added to the layout asset section and tell me if you can reproduce? Do you get the correct css applied to the skins on output of mobile and HTML5...you'll have to make a color scheme one different from the other to verify if it actually works.  This is the problem I'm having, it doesn't work.  Also, if I make changes to the css custom file from the css folder it doesn't update in the skin, I have to remove the asset and re-add the asset in the Layout section.

[Amebr]

I created the following setup:

Two output presets: Responsive-HTML5-Desktop and Responsive-HTML5-Mobile

Two skins: Desktop-Azure-Blue and Mobile-Azure-Blue

Two css: desktop.css and mobile.css

In desktop.css I set body.media-desktop div.header { background-color: red;} and added it to Desktop-Azure-Blue.

In mobile.css I set body.media-mobile div.mobilespecialfunctions { background-color: orange;} and added it to Mobile-Azure-Blue.

In Reponsive-HTML5-Desktop I selected the Desktop-Azure-Blue skin and generated. The header displayed as red.

In Responsive-HTML5-Mobile I selected the Mobile-Azure-Blue skin and generated. I resized the browser window to the size of a mobile screen and the header displayed as orange.

If I make a change to the css I do have to delete it from the skin and re-add (I'm using RH2019 New UI, not RH2020, but it sounds like it's the same for you.) You can request features and report issues here: https://tracker.adobe.com/

[jmcclaine]

Ok, thank your for the vast amount of details to reproduce the outcome.  I am sure I know what is happening now... You did something similar to what I did, only you assumed that Mobile, literally means Mobile breakpoint, and not necissarily mobile scheme for all breakpoints. The css for body.media-mobile div.mobilespecialfunctions rendered only for mobile breakpoints is equal to body.media-desktop div.header rendered only for desktop breakpoints, so now I see what is happening, my css doesn't show because the entirely differ div's/classnames are rendered, not just css class definitions swapping.  So, I understand what needs to be done.  This explains why I was not seeing the styles change, I was not resizing the browser to the mobile breakpoint, once I saw styles not being applied for what I thought should have been overwritting was not because I didn't resize the browser. I'll have to use inspector on the mobile breakpoints to be able to properly overwrite them!  THANK YOU so very much!