Forum Support

Shape 5
April 20, 2021, 04:04:54 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Social Icons  (Read 924 times)
dtierney19
Jr. Member
**
Offline Offline

Posts: 22



« 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
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 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

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dtierney19
Jr. Member
**
Offline Offline

Posts: 22



« Reply #2 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
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 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

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dtierney19
Jr. Member
**
Offline Offline

Posts: 22



« Reply #4 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
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #5 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

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dtierney19
Jr. Member
**
Offline Offline

Posts: 22



« Reply #6 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
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 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

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dtierney19
Jr. Member
**
Offline Offline

Posts: 22



« Reply #8 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
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #9 on: June 29, 2018, 10:54:12 AM »

Most welcome Smiley
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
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.