Highlighted

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

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

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.

 

FrameLayout.jpg

 

 

 

Can anyone pls help?

Topics

New UI

Views

79

Likes

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

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

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

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.

 

FrameLayout.jpg

 

 

 

Can anyone pls help?

Topics

New UI

Views

80

Likes

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
Adobe Community Professional ,
Jul 20, 2020

Copy link to clipboard

Copied

Is that Charcoal Grey?

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

Yes it is.

Likes

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
Reply
Loading...
Adobe Community Professional ,
Jul 20, 2020

Copy link to clipboard

Copied

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

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

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. 

Likes

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
Reply
Loading...
Adobe Community Professional ,
Jul 20, 2020

Copy link to clipboard

Copied

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.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Adobe Community Professional ,
Jul 20, 2020

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Adobe Community Professional ,
Jul 21, 2020

Copy link to clipboard

Copied

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.

 

image.png

 

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.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Community Beginner ,
Jul 21, 2020

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...