Forum Support

Shape 5
March 28, 2024, 06:37:32 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: Adding Yelp Icon  (Read 1074 times)
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« on: February 15, 2016, 02:16:35 AM »

Hi there,

Where/How would I go about adding a yelp icon to the social media icons on the upper right of the website?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: February 16, 2016, 09:57:28 AM »

Those icons are custom HTML in a text widget located in the Custom 1 position.  You can add whatever icons you want by editing the contents of that widget.
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #2 on: February 26, 2016, 02:51:58 AM »

Hi there,

Can you elaborate a bit more? I would like to add this icon - https://www.iconfinder.com/icons/287517/yelp_icon#size=20

I see social_icon ion-social-facebook for example refers to entries in a few css files - editor.css and ionicons.css but adding the icon doesn't seem very straightforward to me. I have done this using a template for joomla and adding an icon was much simpler/easier to understand or at least seemed to be for someone who doesn't have much front end experience.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: February 26, 2016, 08:17:43 AM »

This code may give you the results you are looking for:

Code:
<a class="social_icon" href="http://link.to/wherever"><img src="http://url.to/your/icon.png"></a>
« Last Edit: February 26, 2016, 08:26:36 AM by Tristan Rineer » Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #4 on: February 28, 2016, 02:15:17 PM »

Thank you this worked for me. Here is the code I used:

...
<a class="social_icon ion-social-twitter" target="_blank" href="https://twitter.com/CrossFit">[/url]
<a class="social_icon" target="_blank" href="http://www.yelp.com/biz/zain-elmarouk-crossfit-415-san-francisco"><img src="[siteurl]/images/yelp.png">[/url]
<a class="social_icon ion-social-linkedin" target="_blank" href="https://www.linkedin.com/in/zain-elmarouk-7a684027">[/url]
..

Now the only problem is the yelp icon is not exactly aligned with the rest. The diameter of the icon, however, seems to match up with the rest. What is the best way to fix this?

Attached an image showing the problem.
« Last Edit: February 28, 2016, 02:24:34 PM by ujalal » Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: February 29, 2016, 08:58:32 AM »

The following code may work:

Code:
<a class="social_icon" target="_blank" style="margin-top:-2px;" href="http://www.yelp.com/biz/zain-elmarouk-crossfit-415-san-francisco"><img src="[siteurl]/images/yelp.png"></a>

If that doesn't align it the way you need, then you can adjust the margin until it aligns correctly.


Technically, this is considered custom coding, and isn't officially covered by support. 

I recommend checking out the Codecademy HTML and CSS course to learn the basics of how HTML and CSS work; it's free, and if you combine that with Firebug, you should be able to figure a lot of things out on your own, which is generally faster than waiting on support.
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #6 on: March 30, 2016, 11:14:00 AM »

<a class="social_icon ion-social-facebook" target="_blank" href="https://www.facebook.com/CrossFit-415-49231125378/">[/url]
<a class="social_icon ion-social-twitter" target="_blank" href="https://twitter.com/CrossFit">[/url]
<a class="social_icon" target="_blank" style="margin-top:-50px;" href="http://www.yelp.com/biz/zain-elmarouk-crossfit-415-san-francisco"><img src="[siteurl]/images/yelp.png">[/url]
<a class="social_icon ion-social-linkedin" target="_blank" href="https://www.linkedin.com/in/zain-elmarouk-7a684027">[/url]
<a class="social_icon ion-social-rss"
target="_blank" href="http://www.crossfit.com/">[/url]


I have tried padding-top and margin-top and both do not work. Though padding on its own or margin on its own does affect horizontal positioning which is not what I want to achieve. Any other pointers that could quickly address the issue?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #7 on: March 31, 2016, 08:20:15 AM »

I managed to find a link to your site in one of the other threads you've posted, and the Yelp circle looks fine to me.  Did you figure out what needed to be done?
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #8 on: March 31, 2016, 08:37:41 AM »

Hi there,

Sorry the link is - http://crossfit-415.com/ as you probably already know now..

No the yelp icon is still a few pixels or so down. Look carefully...and it bugs me so much....I did a quick search yesterday and i noticed that margin-top and padding-top can get ignored unless you have display:inline or inline block put in..but neither of those helped me...

Based on the way you have coded this,  is there anything else i can try?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #9 on: March 31, 2016, 08:44:36 AM »

Using the following code for the image tag works fine for me: 
Code:
<img style="margin-top: -3px;" src="//crossfit-415.com/images/yelp.png">
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #10 on: March 31, 2016, 08:54:33 AM »

Yes! that did it. I wasnt putting the code in the right place!

Thanks so much!
Logged
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.