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

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

108

Likes

translate

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

Copy link to clipboard

Copied

Is that Charcoal Grey?

 

Please 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

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

Copy link to clipboard

Copied

Yes it is.

Likes

translate

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

 

Please 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

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

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

 

Please 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

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

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

 

Please 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

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 ,
Jul 21, 2020 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

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

Copy link to clipboard

Copied

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

 

Please 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

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 ,
Jul 21, 2020 Jul 21, 2020

Copy link to clipboard

Copied

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!

 

Likes

translate

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 ,
Jul 27, 2020 Jul 27, 2020

Copy link to clipboard

Copied

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.

Search.jpg

Thanks!

 

Likes

translate

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

Copy link to clipboard

Copied

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/

Likes

translate

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 ,
Jul 28, 2020 Jul 28, 2020

Copy link to clipboard

Copied

Thanks, will try it out!

 

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

Likes

translate

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

Copy link to clipboard

Copied

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.

 

Please 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

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