Archived

This topic is now archived and is closed to further replies.

  • 0

Custom icon alongside social icons


Question

Posted · Report post

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

8 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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;}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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