Highlighted

Changing the position of the homepage buttons

Community Beginner ,
Apr 12, 2017

Copy link to clipboard

Copied

Hello,

I'm using the Indigo layout in RH17 (without the Index), and I'd like to align the Glossary, Filter, and Favorites buttons in the center of the homepage underneath the search bar. Is there a way to do this? The buttons are left-aligned by default, but I'd much rather position them in the middle of the page.

Thanks,

Drew

Adobe hasn't released the SCSS files for this one, so it's a bit tricky.

Please try the linked CSS. There are quite a few changes I made, so test it before using it please.

From a CSS perspective, you can also add the following to  your CSS:

body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(1){margin-left:23.75rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(2){margin-left:17.8125rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(3){margin-left:11.875rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(4){margin-left:5.9375rem}

This CSS selects the number of elements (buttons) you have. And if it is 4 or fewer (the bar can accommodate 5 as the class is grid-5) it amends the margin of the first element to center align.

Topics

HTML5 layout

Views

490

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

Changing the position of the homepage buttons

Community Beginner ,
Apr 12, 2017

Copy link to clipboard

Copied

Hello,

I'm using the Indigo layout in RH17 (without the Index), and I'd like to align the Glossary, Filter, and Favorites buttons in the center of the homepage underneath the search bar. Is there a way to do this? The buttons are left-aligned by default, but I'd much rather position them in the middle of the page.

Thanks,

Drew

Adobe hasn't released the SCSS files for this one, so it's a bit tricky.

Please try the linked CSS. There are quite a few changes I made, so test it before using it please.

From a CSS perspective, you can also add the following to  your CSS:

body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(1){margin-left:23.75rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(2){margin-left:17.8125rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(3){margin-left:11.875rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(4){margin-left:5.9375rem}

This CSS selects the number of elements (buttons) you have. And if it is 4 or fewer (the bar can accommodate 5 as the class is grid-5) it amends the margin of the first element to center align.

Topics

HTML5 layout

Views

491

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
LEGEND ,
Apr 21, 2017

Copy link to clipboard

Copied

Adobe hasn't released the SCSS files for this one, so it's a bit tricky.

Please try the linked CSS. There are quite a few changes I made, so test it before using it please.

From a CSS perspective, you can also add the following to  your CSS:

body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(1){margin-left:23.75rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(2){margin-left:17.8125rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(3){margin-left:11.875rem}body.media-desktop div.frontpage-function-buttons div.grid-buttons>div:first-child:nth-last-of-type(4){margin-left:5.9375rem}

This CSS selects the number of elements (buttons) you have. And if it is 4 or fewer (the bar can accommodate 5 as the class is grid-5) it amends the margin of the first element to center align.

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 ,
May 05, 2017

Copy link to clipboard

Copied

Perfect! After copying that into the linked CSS, the buttons are centered. I also tried it with just two buttons in the layout, and they still remained centered.

buttons aligned.jpg

Thanks Willam! This is the exact solution I was hoping for.

(P.S. Apologies for not checking this sooner. I'll follow up on my other question today as well.)

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 ,
Dec 20, 2017

Copy link to clipboard

Copied

HI,

I need the CSS, but when i am clicking the link above it is showing that the file is moved to bin.

request you to please update it or attach it once again.

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 ,
Dec 20, 2017

Copy link to clipboard

Copied

Link is working for me.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

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 ,
Dec 20, 2017

Copy link to clipboard

Copied

Hi Peter,

when i am clicking on the link it is showing message as a File is in the bin by the owner.

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 ,
Dec 20, 2017

Copy link to clipboard

Copied

You are referring to the link in the post marked Correct Answer?

All I can say is I have now tried it on two machines and it is working just fine.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

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