Recent
Categories
View Replies (8)

Grafik Social Icons

0
Votes
Undo
  1. MangeSWE
    MangeSWE
  3. Commercial Templates
  4. Tuesday, 03 June 2014
  5.  Subscribe via email
Hello guys,

And thanks again for a fantastic template.

I just bought the Grafik template - still using the Cashmere template on my site.
But I'm thinking of switching over to Grafik template.

Anyways - one of the things I really like with Cashmere template is the social icons.

On my original site these works perfekt - also on iPad and iPhone they work great.

Tried to keep this on the Grafik template (bottom of page - sort of footer).

If you look at my original site http://www.eskerfeldt.se - you'll see all of the social icons on bottom of page centered and perfect.

But if you look at my test/demo site they refuse to be centered of page.

http://eskerfeldt.se/demo-001 (please scroll down to bottom of page).

Is it possible to make them centered - also on iPhone they overlap each other - is is possible to make them not do this?

BR

Magnus
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Magnus

Our Icons module extensions differs slightly from one template to the next. One option would be for you to install the icons module that was included with your Cashmere template to the Joomla installation using your Grafik template.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
MangeSWE
MangeSWE
Accepted Answer Pending Moderation
0
Votes
Undo
Nope - didn't work!

It changed top icons also - that I don't want since I like the "new" with captions.

All I want is for the social icons at bottom of screen to be centered.

Or... If I could use both that would work - but that seems not be the case - install one - the other one gets run over.

BR

Magnus
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Magnus

You appear to have found a solution by adding padding to the left of each of your icons. An alternative solution would be to add something like the following to the Custom CSS field of your templates parameter..


.j51_icons381 {

    left: 200px;

    position: relative;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
MangeSWE
MangeSWE
Accepted Answer Pending Moderation
0
Votes
Undo
Super thanks for your help Ciarán,

We're almost there.

Well - that makes it look great on PC - but on my iPhone and iPad it looks not so great.
On iPhone/mobile the icons are all pushed to the right wall if you will, and they are more or less overlapping each other.
It doesn't look good.

I've changed my site to the new template Grafik so if needed please visit http://www.eskerfeldt.se .

Is there any way to have both mobile and PC look good with the social icons?

BR

Magnus
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Magnus

Try something like the following which will align your icons back to the left on smaller screen devices...


@media only screen and (max-width: 767px) {

.j51_icons381 {

    left: 0;

}}


You may wish to edit the 767px to your own taste. 767px will cover most mobile phones.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
MangeSWE
MangeSWE
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for your reply Ciarán,

Yes that would work - still the issue with icons overlap each other - would be perfect if it could be at least some px between the icons.

BR

Magnus
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Magnus

The following CSS will add a margin below each of your icons, increasing the vertical spacing..


.j51_icons381 .j51_icon {

    margin-bottom: 10px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
MangeSWE
MangeSWE
Accepted Answer Pending Moderation
0
Votes
Undo
Superb!

That fixed it all.

Thanks again Ciarán,

BR

Magnus
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!