Ability to make "Social integration" icons vertical (on the right)

[georgemilosh]

I find that there is too much clutter on top left of the my about page with all the social integration icons. Some users make like this, but I doubt it. So basically I wam wondering how I can move this whole social integration icon bar let's say to the right panel and make it vertical.

[george-gca]

You are probably using an older version of the template. Currently it looks like this. You can disable the social links in the navbar by setting enable_navbar_social to false in your _config.yml.

And you can always customize it a little further, for example, in mine I made the font for the socials smaller, so it looks better. If you set the width property inside .contact-icons in _base.scss, it will automatically vertically organize the icons in social. You can start working from there.

[georgemilosh]

So when I set width property inside .contact-icons in _base.scss to a small number the icons in social at the bottom are organized indeed vertically. But I would like them to go to the right of the page, so that the user does not need to scroll down to see them. This is actually unused part of the website. Basically I am wondering how to put stuff into margins.

[george-gca]

It all depends on when you want this bar to be visible. Will it be fixed when you scroll down? Will it scroll with the page? Will it only be visible in the about page?

If you want it to only be visible in the about page, you'll probably want to add this to your _layouts/about.html. If not, _layouts/default.html is probably the way to go. Note that you'll want to add some kind of constraint on how/when to display this, probably like some of the code already on that page.

You can get some inspiration of how it is done when the table of contents sidebar is on the right, for example.

[georgemilosh]

Sorry I didn't quite understand what you meant to "add this to your _layouts/about.html. " Add what?

I don't mind if the stuff scrolls or doesn't scroll. I think there should be a way to put stuff on the right, where it is still empty also in the version of the website. I think people would appreciate it as it would make the website more customisable.

Indeed my website was a bit outdated. I updated the _layouts/default.html but nothing changed.

[george-gca]

By "this" I meant the code that draws the social part.

I am not sure it would look nice to have the social icons in the right, but feel free to send a PR. Maybe you could add an option in _config.yml where the user would set up where to display the social icons (bottom, left, right, header).

[georgemilosh]

Ok, so the the left sidebar solution probably can be made to work, I will think about it. But I would prefer if social would appear basically outside of the content block that includes everything else. On most monitors there is a lot of empty space because the website is narrow. It can be made wider, I guess, but then the menu will also get wider. Also everything else will change. Is there a way to utilize space that is outside of the standard container?

[george-gca]

There is a max_width option in _config.yml. You can simply increase that to make the page wider.

As to use space outside the container, check how it is used in _layouts/default.html. The code is commented, indicating <!-- Content -->. Maybe you'll want something that is either a child (like done with the sidebar) or a sibling of that div. Check the bootstrap grid system.