Shape 5

Joomla Templates => Light Church - Club => : dtierney19 June 23, 2018, 11:02:36 AM


: Social Icons
: dtierney19 June 23, 2018, 11:02:36 AM
Hello,

Is it possible to add Vimeo to the social icons on the template?

Thanks!

: Re: Social Icons
: jonahh June 25, 2018, 10:44:31 AM
Hello,

Yes this is possible. You would just need to copy one of them and swap out the class to the vimeo one found here:

https://ionicons.com/v2/cheatsheet.html

: Re: Social Icons
: dtierney19 June 25, 2018, 02:39:46 PM
But it has no background color behind it. The other social icons have a colored circle behind it, but the Vimeo one is just the ionicon.

: Re: Social Icons
: jonahh June 26, 2018, 10:17:45 AM
Ah I forgot, yes this is because there is no CSS for it in the editor.css file. You would need to add some. Its quite easy to do so just open up the file and look for the below social_icon class. Below this class you will see the other ones and just copy their format and change out the class to the vimeo one:

editor.css line 775
:
.social_icon {

: Re: Social Icons
: dtierney19 June 26, 2018, 08:28:53 PM
I added the class for Vimeo; however the social icon remains completely white on the website, even though I have added different background colors in the class. Is there another file that needs to be edited?

hgctest1.tothnj.com


Thanks!

: Re: Social Icons
: jonahh June 27, 2018, 10:26:15 AM
You just need to add a background color to:

.ion-social-vimeo

This is the class you added to get the icon to output but it needs a specific CSS entry just like the others have in the editor.css file

: Re: Social Icons
: dtierney19 June 27, 2018, 12:17:07 PM
I added this to the editor.css, but nothing.

.social_icon.ion-social-vimeo {
background:#00afe9;
}

.social_icon.ion-social-vimeo:hover {
background:#0878a4;
}

: Re: Social Icons
: jonahh June 28, 2018, 11:08:59 AM
I took a look at your CSS file and its not the same. I see:

:
.social_icon.ion-social-vimeo-outline {
background:#00afe9;
}

.social_icon.ion-social-vimeo-outline:hover {
background:#0878a4;
}

The class has "outline" added to it.

: Re: Social Icons
: dtierney19 June 28, 2018, 03:13:07 PM
Oh wow. I had mistakenly uploaded the wrong file. Thank you so much for your help. I greatly appreciate it!

: Re: Social Icons
: jonahh June 29, 2018, 10:54:12 AM
Most welcome :)