Upgrading Webhelp skin?

[GregDaffern]

We have an old project created in RH2019 Classic which used a customised Webhelp skin. We had removed the header and also the search field (we just had a search tab in the left-hand area). The company has upgraded to RH2020, and updating the projects (there are over 100 of them) does not upgrade the customised skins. I have managed to perform most of the customisations, but cannot see how to remove the header and search field. Is there a way to do this?

[Peter Grainge]

By default a responsive skin will have been applied, probably Azure Blue, but retaining your old skin name. If that is what you have used then customisation is limited. Even if I could find the answer it would not be for a couple of weeks as I am travelling. 

Frameless skins have many more customisation options built in. I hid the top section search by setting display to none. I think the header involves removing a div tag. 

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Amebr]

See if this works for hiding the search field. While it's for Classic, I don't think the responsive skins changed much.

https://community.adobe.com/t5/robohelp-discussions/how-do-you-remove-the-search-engine/m-p/12730455

For the header, you'll need to inspect the output and figure out what styles need to change to get the look you want. Once you figure that out you can add them to the custom css as per the post about the search field. If you're not that familiar with css and html I'd recommend asking a friendly developer for help (it's not hard, just confusing if you're not familiar with them already.)

[GregDaffern]

Great, thanks. I have removed the errant search field. Now I just have to work out the header. Thanks for the help :).

[Christine301653386cjz]

Has anyone figured out how to remove the whole header?  I've found some suggestions, such as adding:

.header.header
{
display: none !important;
}

Or adding:

body.media-desktop div.header {
display: none;
}

But both of those only remove the content from the header so it looks like a white banner instead of having a color and title, but it's still there taking up space.  Does anyone have an idea of what code would be needed so it's not there at all?

If that can't be simply done with custom css, could the height be adjusted so it isn't quite as large?  (And if so, any ideas for code there)? 

I'm also wondering if there is similar code to reduce the width of the sidebar (still responsive html).  I could start a new topic for that if it would be better, but changing the width of the sidebar seems similar to changing the height of the header so thought I'd add it here for now and can separate later.  Users can drag the sidebar to make it less wide if they want, so if it can't be done, it isn't that important, but it would be nice.  We'd rather the TOC/index be a little narrower and the topic be a little wider.

Thanks!

[Jeff_Coatsworth]

I suspect you need to find a web developer to do some programming for you.

[Christine301653386cjz]

This might have been the long way, but I have figured out one way to remove the header.  It's not actually removed, but I set the height to 0 so it may as well be.  But once the header height is 0, you have to change the position of the other elements to make up for it.  I used the layout.css in the output to determine what needed to change, and then when I had everything right, I added those lines to a custom.css file using the instructions above.  .

In case anyone wants it, here is the code.  I had found instructions on this forum for Classic, as well as for frameless skins, but not the responsive html skins.  Hopefully this will help someone else.  (I used the Azure Blue responsive html skin in RoboHelp 2022, but based on Amebr's comments I believe this will work for other non-classic versions too.)

The very first segment of code below removes the Search field from the top right (otherwise, I'd need to figure out how to move it around a little bit because it's on top of other content with my other changes).  Also, I wanted to make the sidebar (TOC, index, etc) narrower, so all of the 25em lines are for that - the default in Azure Blue is 35, so you could make it narrower or wider, or just remove my width and left lines below if you like it as is.

body.media-desktop div.searchbar-extra {

    display: none;

}

body.media-desktop div.functionbar {

top: 0em;

}

body.media-desktop div.toc-holder.layout-visible {

top: 4.3em;

width: 25em;

}

body.media-desktop div.idx-holder.layout-visible {

top: 4.3em;

width: 25em;

}

body.media-desktop div.glo-holder.layout-visible {

top: 4.3em;

width: 25em;

}

body.media-desktop div.filter-holder.layout-visible {

top: 4.3em;

width: 25em;

}

body.media-desktop div.searchresults.search-sidebar {

top: 4.3em;

width: 25em;

}

body.media-desktop div.searchbar.search-sidebar {

top: 4.3em;

width: 25em;

}

body.media-desktop div.searchresults.search-content, body.media-desktop div.topic {

top: 0em;

left: 25em;

}

body.media-desktop div.header {

    height: 0em; }

body.media-desktop div.searchresults.search-sidebar {

    top: 8.8em;

}

body.media-desktop div.sidebarsizer {

left: 25em;

}