Resolved Assistance on finishing custom social media icon hook

[illinimatt81 21]

I added the following hook to the pagelines customize plugin functions.php after following this post in the forum: http://www.pagelines.com/forum/topic/22659-change-social-website-icons

add_action('pagelines_inside_top_branding', 'my_unique_icons');

// function name

function my_unique_icons(){

?>

<div class="my_unique_icons"><a href="http://itunes.apple....551103126"><img src="http://runneracademy...ial24.png"></a>

</div>

<?php }

// end function

I also added the following to my custom CSS

#branding .my_unique_icons {

float: right;

z-index: 10;

position: relative;

}

Two issues I am trying to resolve.

1) How do I get it positioned to the left of the Google + Social Icon? Currently it is at the top left of the header.

2) I have 2 versions of the icon one for mouseover and one for non-mouseover. How do I reference these to have the same effect as the other social media icons?

[batman 389]

Hi, one question

Do you want to аdd the icon in the text widget in footer?

If it is right, you can add a HTML on it.

[illinimatt81 21]

Here is what I want to accomplish:

[batman 389]

Hi, now I understand sorry

Please, you can try with:

add_action('pagelines_branding_icons_start', 'my_unique_icons');

// function name

function my_unique_icons(){

?>

<div class="my_unique_icons"><a href="http://itunes.apple....551103126"><img src="http://runneracademy...ial24.png"></a>

</div>

<?php }

// end function

[James B 436]

Hi there, which browser are you using? I can't see any duplicate on hover (i'm using firefox)

You can align next to the other icons using the following css

#branding .my_unique_icons {

    right: 160px;

    top: 106px;

}

[illinimatt81 21]

Hi, now I understand sorry

Please, you can try with:

add_action('pagelines_branding_icons_start', 'my_unique_icons');

// function name

function my_unique_icons(){

?>

<div class="my_unique_icons"><a href="http://itunes.apple....551103126"><img src="http://runneracademy...ial24.png"></a>

</div>

<?php }

// end function

I have implemented this code and now the iTunes logo is aligned correctly and the mouseover is working as it should. However the Google + icon is now below the iTunes logo almost off the screen. Any ideas?

[James B 436]

Hi there, to move the icon so it's not pushing the other item down you'll need to align it with css. Please try the following, let us know if this works for you. The should show up link this

http://imgur.com/w2OVu

.my_unique_icons

{

float: left;

margin-left: -25px;

opacity: 0.5;

}

[illinimatt81 21]

Hi there, to move the icon so it's not pushing the other item down you'll need to align it with css. Please try the following, let us know if this works for you. The should show up link this

http://imgur.com/w2OVu

.my_unique_icons

{

float: left;

margin-left: -25px;

opacity: 0.5;

}

This worked! Thank you!

[Rob 547]

The topic was marked as resolved.