Align Top.png (go to top) to left in HTML5

[tracym11665964]

Hi Everyone. I've searched the community and web to try and find the answer......

I really want to align the Top icon that currently apprears on the right, on the left-hand side as I think it's more visible/obvious there.

I had assumed it was a question of editing the required css file, which I can't find. In the layout options, there is only the option to replace the top.png file.

Any ideas?

Many TIA

[Peter Grainge]

You haven't said which version of RoboHelp you are using. If 2019 is it Classic or the New UI?

Also We need to know which layout you are using.

A screenshot of the icon you are referring to would help. I think I know the one you mean but want to put it beyond doubt. My guess is it can't be done or would require an in depth knowledge of HTML and CSS but depend on your answers, someone might know.

[tracym11665964]

My apologies. First time posting!

I'm using RoboHelp 2019 New UI. I'm producing Responsive HTML5.

Many thanks.

[Amebr]

I did this with Azure Blue HTML5 skin. If you use a different skin, you might need a different style.

1. Create a new css file. You can just save a blank notepad document and give it the css extension.

2. Paste the following in the blank style sheet:

body.media-desktop div.topic a.to_top {
	right: unset;
}

3. Open the skin in RH, go to the Layout section and click Add Asset.

4. Browse to the css file you just created.

When you generate, the go to top button should be on the left side of the topic panel.

[Amebr]

Oh, I forgot to mention, I'm not targeting IE, and I'm not sure if unset works in IE. If it doesn't, add the following before the closing curly bracket.

left: 0;

[tracym11665964]

You are an absolute star. Thank you very much indeed. Looks much better and works perfectly.

Thank you for taking the time to help me.

Tracy