By Paul Murray on Tuesday, 12 June 2018
Posted in General
Likes 0
Views 872
Votes 0
Hi SI Team

I have activated the Social Media Icons Module from the Vanilla template.
The best place I can find for it is in the one of the bottom positions eg bottom 01, bottom 02 bottom 03.
The thing is that the alignment is always off.
eg in bottom 01 the icons are squished up against the left hand edge of the bottom section.
In bottom 01, bottom 02,bottom 03 the icons are not aligned horizontally with my legal menu in bottom 04.
Please NOTE that what ever happens I need my legal menu to stay exactly where it is.
https://stackideas.com/forums/getting-menu-to-show-up-bottom-right-in-vanilla

Any way can you kindly provide me with some code that will help me customise the exact position of my social items.

eg
Move item in bottom module position
X amount of pixels horizontal
and
Y amount of pixels vertical
and
Add a custom color

The easiest way to see this is to go here:
https://www.finalbug.net/
And scroll down….

hope this makes sense

thanks

Paul
Hi Paul,

You can try using the following custom css to increase the spacing between social icons and change the color respectively.

ul.social-icons > li {
margin: 5px 20px;
}

body ul.social-icons > li a {
color: #999999;
}
·
Tuesday, 12 June 2018 18:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Raymond

Sorry about the slow reply but it takes me for ever to figure out these things.
Have tried out a bunch of things and am still kind of confused.


margin: 5px 20px;


Just want to check that

a)
The first value in the code above...
Is the distance between the left edge of the module position & where the item (social media icons) are displayed in module position1?
I am trying to get a value of 100 to work!

b)
The second value in the code above...
Is the distance between the social Media icons?
I am trying to get a value of 10 to work!
(Basically anything that looks kind of nice and does not divide the icons up into rows)

c)
Is there a way to move the icons up and down horizontally
eg move the icons down 80px so that they align up with the top of the legal menu.


/* Helps tweak the exact position and colour of Social Media icons */
ul.social-icons > li {
margin: 100px 10px;
}

body ul.social-icons > li a {
color: #2BB673;
}



I think I have 2 problems, (1) some think of thinking mistake and also (2) having to clear cache in so many places

thanks

Paul
·
Thursday, 14 June 2018 18:25
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Paul,

Perhaps you can try the following values. margin: 15px 30px;

You can play around with the values in the browser's element inspector(http://take.ms/9wUVA). Do note that this is the space that is available for the social icons so the distance between them cannot be too huge(http://take.ms/K6rsl).

The first value is the top and bottom distance(http://take.ms/w4DZA). The second value is the left and right distance, which also defines the distance between them(http://take.ms/Qk7MF).
·
Thursday, 14 June 2018 18:49
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Raymond

Ahhhh.

The first value is the top and bottom distance


This is the bit that was confusing me. At least I now understand what and how things should work!

Will play with this some more.

thanks

Paul
·
Thursday, 14 June 2018 19:02
·
0 Likes
·
0 Votes
·
0 Comments
·
You're most welcome Paul.

By the way, you can also use 4 values if you want, which would be, top right bottom left in their respective order. http://take.ms/mC60x
·
Thursday, 14 June 2018 19:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Raymond

Thanks for your patience and attention to detail.

Works as expected

all the best

Paul
·
Tuesday, 19 June 2018 05:00
·
0 Likes
·
0 Votes
·
0 Comments
·
You're most welcome Paul and glad to know it's working as expected.

Regards.
·
Tuesday, 19 June 2018 14:20
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post