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

Community Beginner ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

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

TOPICS
Output presets

Views

246

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
community guidelines
Adobe Community Professional ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

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.

 

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

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 ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

My apologies. First time posting!

 

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

top_icon_query.png

Many thanks.

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
community guidelines
Adobe Community Professional ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

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.

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
community guidelines
Adobe Community Professional ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

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;

 

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
community guidelines
Community Beginner ,
Mar 03, 2020 Mar 03, 2020

Copy link to clipboard

Copied

LATEST

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

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
community guidelines
Resources
RoboHelp Documentation