Jump to content
Sign in to follow this  
studiohworks

Social Icon At The Header

Recommended Posts

studiohworks    0
studiohworks

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
studiohworks    0
studiohworks

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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
batman    389
batman

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

;)


Life is too short to remove USB safely ...

Share this post


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

Did Batman's suggestion resolve your issue ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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
James B    436
James B

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



Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

Did not see the second part. Let me try again

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

Hi James.

Social icons still not showing up. Any more advise?

Sung Jin

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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
James B    436
James B

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;

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studiohworks    0
studiohworks

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

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

    • diretornak
      By diretornak
      Hey guys. I am having problems updating the social icon links in this website: www.essbrasil.com.br
       
      For some reason, even though I have pointed both links to http://www.essbrasil.com.br using the "header and footer" site options, they are linking to whatever page is currently open. So if I click on any icon in the homepage, they will link to the homepage, and if I click on any icon in the "contato" page, they link to the "contato" page.
       
      Any ideas on how I could fix this?
       
      I am using latest versions on both Framework and Wordpress.
    • janpeeters
      By janpeeters+
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

×