Jump to content


Photo
- - - - -
Resolved

Social Icon At The Header

social icon

  • Please log in to reply
19 replies to this topic

#1 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 02 November 2012 - 06:33 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 November 2012 - 06:40 PM

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

#3 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 02 November 2012 - 06:58 PM

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?

#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 November 2012 - 05:21 AM

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.

#5 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 03 November 2012 - 02:17 PM

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

#6 batman

batman

    Bat Learning

  • Members

  • 2165 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 03 November 2012 - 03:39 PM

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

Please Login or Register to see this Hidden Content


You can see this links to begin:

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



Here the hook

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content


;)

#7 Danny

Danny

    Is Awesome!

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

Posted 04 November 2012 - 11:15 AM

Did Batman's suggestion resolve your issue ?

#8 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 02:05 AM

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

#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 November 2012 - 02:18 AM

Hi there,

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

Please Login or Register to see this Hidden Content


Then in Pagelines>Site Options>Custom code add

Please Login or Register to see this Hidden Content



#10 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 03:13 AM

Did not see the second part. Let me try again

#11 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 03:51 AM

Hi James.

Social icons still not showing up. Any more advise?

Sung Jin

#12 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 November 2012 - 04:05 AM

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 -

Please Login or Register to see this Hidden Content



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.

#13 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 04:26 AM

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.

#14 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 November 2012 - 04:51 AM

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.

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


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

#15 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 04:57 AM

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

#16 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 November 2012 - 05:04 AM

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.

#17 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 05:12 AM

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.

#18 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 November 2012 - 05:43 AM

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 :)

Please Login or Register to see this Hidden Content



#19 studiohworks

studiohworks

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 November 2012 - 01:28 PM

This topic shall be move to 'RESOLVED' status!!!
Big thanks to James.
Thanks Batman and Catrina.

Sung Jin :)

#20 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 November 2012 - 03:35 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, social icon