Jump to content


Photo
- - - - -

Custom icon alongside social icons

social icons custom

Best Answer Danny , 07 February 2013 - 11:03 AM

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.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 nfp1900

nfp1900

    Advocate

  • Members

  • 285 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 06 February 2013 - 10:55 PM

The link to the docs on adding additional icons to the social icons bar is broken : 

Please Login or Register to see this Hidden Content

 

I also found some information that was pasted here from another post:

Please Login or Register to see this Hidden Content

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 11:25 PM

Hi,

 

This may be an older doc, but the concept is the same:

Please Login or Register to see this Hidden Content

 

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.



#3 nfp1900

nfp1900

    Advocate

  • Members

  • 285 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 06 February 2013 - 11:49 PM

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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" target="_blank" style="opacity: 0.5;">



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 11:57 PM

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="

Please Login or Register to see this Hidden Content

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



#5 nfp1900

nfp1900

    Advocate

  • Members

  • 285 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 07 February 2013 - 09:50 AM

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="

Please Login or Register to see this Hidden Content

" alt="imdb">
</a></div>
<?php

}

 

<a class="imdblink" href="

Please Login or Register to see this Hidden Content

" target="_blank" style="opacity: 0.5;">



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 February 2013 - 10:09 AM

Hi,

 

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

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#7 nfp1900

nfp1900

    Advocate

  • Members

  • 285 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 07 February 2013 - 10:33 AM

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="

Please Login or Register to see this Hidden Content

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


#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 February 2013 - 11:03 AM   Best Answer

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.



#9 nfp1900

nfp1900

    Advocate

  • Members

  • 285 posts
  • LocationLondon (the original one)
  • Framework Version:The Latest
  • Country: Country Flag

Posted 07 February 2013 - 11:23 AM

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.







Also tagged with one or more of these keywords: social icons, custom