Jump to content
Sign in to follow this  
nfp1900

Custom icon alongside social icons

Recommended Posts

nfp1900    29
nfp1900

The link to the docs on adding additional icons to the social icons bar is broken :  http://support.pagelines.me/docs/customization/additional-social-icons/

 

I also found some information that was pasted here from another post: http://paste.pagelines.com/4xp but was for pininterest.

 

add_action('pagelines_branding_icons_end', 'pint_icon');
function pint_icon(){ ?>
<a target="_blank" href="#" class="pintlink" style="opacity: 0.5; ">
<img src="LINK TO ICON/IMAGE" alt="Pinterest">
</a>
<?php
}

 

My question is quite simple: I have been asked to add a custom icon alongside the usual array which is a link to a movie database (imdb.com) for an actor's website. Can I just use the code above and add that the child functions.php file with the url to the relevant image file? Or do I need to create a new class etc?

 

Thanks for any feedback

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

This may be an older doc, but the concept is the same: http://www.pagelines.com/docs/base-child-theme

 

Also, looking at your code above, you didn't wrap the entire link in a div. 

 

Try this:

<div class="pint_icon"><a target="_blank" href="#" class="pintlink" style="opacity: 0.5; ">
<img src="LINK TO ICON/IMAGE" alt="Pinterest">
</a></div>

 

Then, you can apply custom CSS as desired.  So to answer your question, yes. You need a new class. But as easy to do as I've just shown.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Thanks for the response, it looks kind of easy when you get the hang of it ...the code I posted was from Danny in response to something similar so I didn't realise it was incomplete.

 

So if I created a new class with the code it could look like this?

 

add_action('pagelines_branding_icons_end', 'imdb_icon');
function imdb_icon(){ ?>
<div class="imdb_icon"><a target="_blank" href="#" class="imdblink" style="opacity: 0.5; ">
<img src="http://www.whatever.com/wordpress/imdb.png" alt="imdb">
</a></div>
<?php

}

 

Where do I put the code for link class 'imdblink'? Does this also go in the child functions.php?

 

<a class="imdblink" href="http://xxxxx" target="_blank" style="opacity: 0.5;">

Share this post


Link to post
Share on other sites
Rob    547
Rob

It really wasn't incomplete. But it lacked the additional class to give you further options if needed.

 

The CSS could go into one of three places:

1.  Dashboard > PageLines > Site Options > Custom Code in CSS Rules

2.  PageLines Customize plugin in the stylesheet there.

3.  The stylesheet of any child theme you may be using.

 

The hook would go into the functions.php file of the PageLines Customize plugin or the functions.php of a child theme.

 

"<a class="imdblink" href="http://xxxxx" target="_blank" style="opacity: 0.5;">" is not CSS, as I'm sure you know.

 

You'd create some code like (just an example)

.imdblink {color: #999999;}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

I added the code below to functions.php  after line 7 in the pagelines-template-theme folder (the path to the new png file is correct) but just get a blank page when the theme tries to load ( I am using textwrangler and editing via ftp). Did I miss something?

 

add_action('pagelines_branding_icons_end', 'imdb_icon');
function imdb_icon(){ ?>
<div class="imdb_icon"><a target="_blank" href="#" class="imdblink" style="opacity: 0.5; ">
<img src="http://www.angeladixon.com/wordpress/wp-content/themes/pagelines/sections/branding/imdb.png" alt="imdb">
</a></div>
<?php

}

 

<a class="imdblink" href="http://www.imdb.com/name/nm1395864" target="_blank" style="opacity: 0.5;">

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I added the following code to the child theme functions.php file and it worked as intended.

 

add_action('pagelines_branding_icons_end', 'imdb_icon');
function imdb_icon(){ ?>
<a target="_blank" href="#" class="imdblink" style="opacity: 0.5; ">
<img src="http://www.angeladixon.com/wordpress/wp-content/themes/pagelines/sections/branding/imdb.png" alt="imdb">
</a>
<?php
}

http://d.pr/i/dE9F


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Ok, thanks, that works and it now shows up. But it's this which is messing things up - the link from the icon to the actual page. If I  inspect the element I can see the link but the icon is just showing #. Is it in the wrong location?

 

<a class="imdblink" href="http://www.imdb.com/name/nm1395864" target="_blank" style="opacity: 0.5;">

 

 

 

Plus the global CSS setting for the icons is 24 x 24, if I adjust this to 48px to get the correct width they all space out, I can't seem to force to get that one to be 48 x 24 and the others to remain at 24 x 24.

 

.section-branding .icons a {
  1. display: block;
  2. width: 24px;
  3. height: 24px;
  4. margin-left: 8px;
  5. float: right;
  6. text-align: right;
  7. opacity: 0.5;
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

In the code you need to replace the # with the link to the page.

 

The space is that your image is 48px wide, where as the other social images are 24px. So if you wish to reduce the space, You will need to either keep your imdb icon the same size as the other icons or replace all pagelines default social icons with icons that are the same size as your imdb icon.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Thanks for the help in achieving this.

 

I changed the icon width to 48px - they are a bit spaced out but it looks fine being all the same height.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
       
      All other plugins deactivated.
    • jeomiland
      By jeomiland+
      In post 34871-sharebar-issues Danny suggests one can use any of the icons in font-awsome for social share icons. What's the best way to use other images?  Client asked me to implement the icons at http://www.wpbeginner.com/showcase/16-best-free-social-media-icon-sets-for-wordpress/  specifically #20 "20 Social Media Icons". Have downloaded the zip file containing those icons but where/how get them to show up on the site?
      So I am referring to both the icons to send visitors to the site owner social properties AND shar icons so people can Like, share ect.
      Upon further research, I see a discussion on problems with using social icons on SSL (https://...) sites since a warning message comes up complaining about mixed SSL and non-SSL content on the page? Since this site is a shoppingcart site, using Woocommerce, this could be a problem. What's the current wisdom on dealing with this?  Also, I read a while ago there can be a performance hit if one makes their whole site SSL, so since Wordpress and themes adds significant overhead, what's the current wisdom on this issue?  SSL for all pages or just for shoppingcart checkout/account info pages?
      Thanks
      site: http://verdanthomeproducts.com
       
    • pieterbartlema
      By pieterbartlema
      Dear All,
      Somehow the the social icons went missing in the site branding section. please help...
      www.buscafins.com
    • mzhafzah
      By mzhafzah
      Hello
      I am using DMS 2 theme and I want to create a 2 different links on my website; each link should take you to a different blog post category. Although the process is easy, yet I can not figure out how to give each category page a unique design of its own; Any change I make on any page is applied to the other (I'm aware of the universal elements like the header and footer and I a am not talking about these.)
      Since I am new to wordpress in general, I am not sure if my description is sufficient; apologies if it is not.
      TycoonJé
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
×