Forum Support

 
Advanced Search


New Posts
FAQs for Wordpress
If you have a question about Wordpress products please read through a list of our most commonly asked questions here.
[1]

Offline ujalal
Free Member
Posts: 69
Posted 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

Offline Tristan Rineer
Free Member
Posts: 3858
Posted 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

Offline ujalal
Free Member
Posts: 69
Posted 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

Offline Tristan Rineer
Free Member
Posts: 3858
Posted 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

Offline ujalal
Free Member
Posts: 69
Posted 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

Offline Tristan Rineer
Free Member
Posts: 3858
Posted 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

Offline ujalal
Free Member
Posts: 69
Posted 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

Offline Tristan Rineer
Free Member
Posts: 3858
Posted 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

Offline ujalal
Free Member
Posts: 69
Posted 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

Offline Tristan Rineer
Free Member
Posts: 3858
Posted 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

Offline ujalal
Free Member
Posts: 69
Posted 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
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.032 seconds with 22 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.