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

Upgrading Webhelp skin?

Community Beginner ,
Apr 08, 2022 Apr 08, 2022

Copy link to clipboard

Copied

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?

Views

183

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
Community Expert ,
Apr 08, 2022 Apr 08, 2022

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
Community Expert ,
Apr 10, 2022 Apr 10, 2022

Copy link to clipboard

Copied

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

Votes

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
Community Beginner ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

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

Votes

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
Explorer ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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!

Votes

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
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

Votes

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
Explorer ,
Apr 15, 2024 Apr 15, 2024

Copy link to clipboard

Copied

LATEST

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;
}

Votes

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