Skip to main content
s_weng
Known Participant
Jul 20, 2020 1:48 PM UTC
Question

RoboHelp 2019: How to change the Layout of Responsive HTML 5?

Hello,

 

As per my project needs, I need to customize the layout of RHTML5 output.

I am done with all the changes applicable through the skin editor except the following one.

 

 

 

 

Can anyone pls help?

This topic is closed to new replies. Start a new post to keep the conversation going.

14 replies

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
Jul 28, 2020 7:43 AM UTC

Ironically how to do that with Charcoal Grey is on my site. Item 18 at http://www.grainge.org/pages/snippets/snippets.htm#html5

 

It will likely be something similar.

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Community Expert
AmebrCommunity Expert
Community Expert
Jul 28, 2020 12:16 AM UTC

I believe that's the browser scrollbar, so no.

 

But maybe it's possible to create your own with fancy css. I've never tried it, and have no idea how to implement it for RH output. Or how cross-browser and stable it is.

 

https://css-tricks.com/the-current-state-of-styling-scrollbars/

Translate
s_wengAuthor
Known Participant
Jul 28, 2020 7:29 AM UTC

Thanks, will try it out!

 

Any idea on Header Search box labelled in my previous image!

Translate
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
Jul 21, 2020 9:48 AM UTC

Yes I did say you would need to make the change every time. 

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
s_wengAuthor
Known Participant
Jul 21, 2020 1:56 PM UTC

Thanks a lot Peter and Amber,

I got success with Azure Blue screen. Using User Asset option, I am able to change the skin layout.

Thanks once again, for your help!

 

Translate
s_wengAuthor
Known Participant
Jul 27, 2020 2:02 PM UTC

Hi,

I customized the Azure Blue Screen to support dark theme of my project.

But, I got stuck in few things again. Please refer the attached screenshot and help me providing a solution.

Thanks!

 

Translate
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
Jul 21, 2020 8:03 AM UTC

I have an answer from Adobe.

 

In your output locate the folder (template\<skin name>\layout.css), towards the end of the file.

 

By default it will be set to a hex value. Change that as required. I have changed it to an RGB value.

 

 

In other skins you could add the div.topic to a different CSS file and add that to User Assets so that it is applied whenever you generate. That option is not in the charcoal grey skin so you will need to make that change whenever you generate.

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    s_wengAuthor
    Known Participant
    Jul 21, 2020 9:06 AM UTC

    Thanks Peter, this is exactly what I did in the layout.css placed at (template\<skin name>\layout.css). I made the changes in hex value only like this:

    div.topic {
  background-color: #464646; }
  div.topic div.functionholder {
    display: none; }
  div.topic a.to_top {
    display: none; }

    But I believe as the changes are done in the output folder, so we need to replicate it everytime when we generate, hence, making it a temporary solution to the problem.

     

    So, it would be helpful if we get a permanent solution to this problem.

    However, I am trying with Azure Blue. Will post here when done.

    Thanks a lot for your help!

    Translate
    Community Expert
    AmebrCommunity Expert
    Community Expert
    Jul 21, 2020 1:01 AM UTC

    If worse comes to worst, perhaps you could customise the Azure Blue skin to match the charcoal grey colours (I think it's the same otherwise), except that the User Assets section is correctly available. Then you could add a custom css file which contains a div.topic selector with the correct background colour.

    Translate
      Peter Grainge
      Community Expert
      Peter GraingeCommunity Expert
      Community Expert
      Jul 20, 2020 7:45 PM UTC

      That may be the only answer but I have made some enquiries so let's see if anything comes back.

       

      It would be helpful if you could post what you changed.

       

      Translate
      Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
      Peter Grainge
      Community Expert
      Peter GraingeCommunity Expert
      Community Expert
      Jul 20, 2020 2:36 PM UTC

      I have tried everything in the skin editor and some CSS changes but no luck so far.

       

      Translate
      Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
      s_wengAuthor
      Known Participant
      Jul 20, 2020 7:36 PM UTC

      Yup I tried too but couldn't get anything! 

       

      I was wondering if there is any js/css file that we can modify accordingly but couldn't find any in the source. However, if I change layout.css inside the output folder of the skin... I am able to change the frame color.

       

      So, this way I got this temporary solution but I need a permanent one. 

      Translate
      Peter Grainge
      Community Expert
      Peter GraingeCommunity Expert
      Community Expert
      Jul 20, 2020 2:11 PM UTC

      Is that Charcoal Grey?

       

      Translate
      Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
      s_wengAuthor
      Known Participant
      Jul 20, 2020 2:32 PM UTC

      Yes it is.

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices