Archived

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

  • 0

Resolved Social Icon At The Header


Question

Posted · Report post

Hi there.

Under the Site Option for 'Header & Footer', I have checked on for the facebook social icon and added its profile URL, but do not see it on the website. Per the advise from Catrina, I have activated BrandNav section in Drag & Drop > Header template area in order for icons to show. When I activated the BrandNav, it shows the icons, but with the site logo again, therefore two same site logo appears. So I have deactivated the BranNav for now. The site address is www.nyfacs.net.

Please, advise.

Thanks.

Sung Jin

Share this post


Link to post
Share on other sites

19 answers to this question

Posted · Report post

Hi Batman & Danny.

I have followed Batman's suggestion, but do not see any social icon on my header. I watched the recommended video and read all the links that Batman has listed.

This is what I did.

1. Went to Pageline store and download the Pageline Customize Plugin.

2. Click the file pagelines-customize/pagelines-customize.php in Edit Plug-in section of WP.

3. Add the hooks at the end of the file.

4. Reload the website.

But do not see any social icons in the header.

Please, advise.

Sung Jin

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

Batman's code is correct just the wrong hook for the brandnav. Try replacing with the following.


add_action('brandnav_after_brand', 'nav_social_icons');

function nav_social_icons(){?>

<div class="nav_social_icons">

<a target="_blank" href="" class="rsslink"><img src="/wp-content/themes/pagelines/sections/branding/rss.png" alt="RSS"/></a>

<a target="_blank" href="" class="twitterlink"><img src="/wp-content/themes/pagelines/sections/branding/twitter.png" alt="Twitter"/></a>

<a target="_blank" href="" class="facebooklink"><img src="/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a>

<a target="_blank" href="" class="linkedinlink"><img src="/wp-content/themes/pagelines/sections/branding/linkedin.png" alt="LinkedIn"/></a>

<a target="_blank" href="" class="youtubelink"><img src="/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"/></a>

<a target="_blank" href="" class="gpluslink"><img src="/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"/></a>

</div>

<?php }

Then in Pagelines>Site Options>Custom code add

.nav_social_icons {float:right;}

.nav_social_icons img {opacity:0.5;}

.nav_social_icons img:hover {opacity: 1;}


Share this post


Link to post
Share on other sites

Posted · Report post

Did not see the second part. Let me try again

Share this post


Link to post
Share on other sites

Posted · Report post

Did Batman's suggestion resolve your issue ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James.

Social icons still not showing up. Any more advise?

Sung Jin

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Sung, double check the customize plugin is active, I'm using the base theme at the moment to this, but using the above code I've got it working. I've also used the hook for below the nav as well to test it. Screenshot here - http://screencast.com/t/bV4BOloc9F5a

You're meant to be adding the hook to the file that ends functions.php, not customize. Need to take that code out and place in the other file.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James. Yes. the plugin was not activated =P. However, there are two issues. First the icons are not at the same place as the one with the Branding section. I would like to see them right above where the search section. Second, my BrandNav menu bar is not showing up anymore =(.

Help!

One more!!! When I click the facebook icon it does not open the facebook page, but the same www.nyfacs.net page.

Share this post


Link to post
Share on other sites

Posted · Report post

Ah ok, no worries. You'll need to enter the links into the HTML code manually. Place them into the href quotes for each icon. An example is shown below.


<a target="_blank" href="" class="facebooklink"><img src="/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a>

<a target="_blank" href="www.facebook.com" class="facebooklink"><img src="/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a>

To get the icons looking like in the previous set up, change the top line of the hook from

add_action('brandnav_after_brand', 'nav_social_icons');


to


add_action('brandnav_after_nav', 'nav_social_icons');

This will also return the menu. Then paste in the css I gave you earlier into Pagelines>Site options>Custom Code and that will align the icons to the right

Share this post


Link to post
Share on other sites

Posted · Report post

James,

Thank you for your patient guidance. Yes, BranNav Bar has showed up! But, the location of the facebook icon is in still odd place. How can I place them right above the right side of the Main Menu (right above search section)?

Sung Jin

Share this post


Link to post
Share on other sites

Posted · Report post

Sung have you taken some of the code out of the hook? It should be wrapped in a div called

<div class="nav_social_icons">

You won't be able to move it using css if that's not in there, I can't see it in the source code. If you don't want the other icons in the example that's cool, just delete them but leave the code before and after then that css will align the icon.

Share this post


Link to post
Share on other sites

Posted · Report post

I see. Sorry. My bedtime has way passed. I have put the mission code back, but the icon is still way up from where it should be.

For the social icon at Branding section it was set as 12 pix from bottom and 1 pix from right.

Share this post


Link to post
Share on other sites

Posted · Report post

Cool, ok you can manipulate the position to wherever you want now its there. Using the below css (which i've added fixed position so you can set where you want the icon), just change the figures in 'top' and 'right' and it will move the position of the icon for you accordingly until you get it into the location you want it :)


.nav_social_icons {

    float: right;

    position: absolute;

    right: 40px;

    top: 64px;

}

Share this post


Link to post
Share on other sites

Posted · Report post

This topic shall be move to 'RESOLVED' status!!!

Big thanks to James.

Thanks Batman and Catrina.

Sung Jin :)

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

BrandNav section shouldn't be activated - Branding should be.

Share this post


Link to post
Share on other sites

Posted · Report post

Okay. first let me correct my inqury. I did activated Branding. That is when I see the site logo twice. And, I need BrandNav on for the the BrandNav Bar that is a part of the website feature. Are you saying that in order to show the social icon with the site logo, I can't have the BrandNav Bar at the header?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes I'm afraid that's correct, the social icons are only coded into the branding section. You could add them to the brandnav using a hook, if you know your way round some coding. Otherwise you could put them in a full width sidebar and then align them using css.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James.

I do not know my way around coding. Can you possibly provide me some guidance for the second option of putting social icon in a full width sidebar to align them at the top right of the header with CSS? Especially the part with CSS? I am putting brandnav back without social icon, so you will see where the brandnav bar and social icon should be at where the standard location with branding. www.nyfacs.net

Sung Jin

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Sun Jin

Like said James B

You can add an action for add meta setting below.

Some comment give the action: pagelines_branding_icos_end

You can find at

http://api.pagelines.com/hooks

You can see this links to begin:

http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Customize_Plugin

http://codex.wordpress.org/Plugin_API

Here the hook


add_action('pagelines_branding_icons_end', 'nav_social_icons');

function nav_social_icons(){?>


<a target="_blank" href="" class="rsslink"><img src="/wp-content/themes/pagelines/sections/branding/rss.png" alt="RSS"/></a>

<a target="_blank" href="" class="twitterlink"><img src="/wp-content/themes/pagelines/sections/branding/twitter.png" alt="Twitter"/></a>

<a target="_blank" href="" class="facebooklink"><img src="/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a>

<a target="_blank" href="" class="linkedinlink"><img src="/wp-content/themes/pagelines/sections/branding/linkedin.png" alt="LinkedIn"/></a>

<a target="_blank" href="" class="youtubelink"><img src="/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"/></a>

<a target="_blank" href="" class="gpluslink"><img src="/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"/></a> 

<?php }

I suppose that you will not need CSS. First try with this and then we help with the CSS when you have the icons in the web.

Please read first the link, specially http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Customize_Plugin

;)

Share this post


Link to post
Share on other sites