Forum Support

 
Advanced Search


[1]

Offline dtierney19
Free Member
Posts: 22
Posted on: June 23, 2018, 11:02:36 AM

Hello,

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

Thanks!
« Last Edit: June 23, 2018, 12:02:32 PM by dtierney19 »
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: 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
Logged

Offline dtierney19
Free Member
Posts: 22
Posted on: 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.
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: 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
Code:
.social_icon {
Logged

Offline dtierney19
Free Member
Posts: 22
Posted on: 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!
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: June 27, 2018, 10:26:15 AM

You just need to add a background color to:

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

Offline dtierney19
Free Member
Posts: 22
Posted on: June 27, 2018, 12:17:07 PM

I added this to the editor.css, but nothing.

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

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

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: June 28, 2018, 11:08:59 AM

I took a look at your CSS file and its not the same. I see:

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

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

The class has "outline" added to it.
Logged

Offline dtierney19
Free Member
Posts: 22
Posted on: 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!
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: June 29, 2018, 10:54:12 AM

Most welcome Smiley
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.024 seconds with 20 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.