Archived

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

  • 0

Social Icons On Same Line As Nav Menu?

Question

Posted · Report post

Hi all,

 

I've read through this thread http://www.pagelines.com/wiki/How_to_Use_the_PageLines_Menus and followed it exactly to create my menus.

 

I want to put the social icons at the top of the page on the same line/aligned with the nav menu.  I've read through this thread to try to get clues (I know, it's for nav classic): http://www.pagelines.com/forum/topic/23871-social-icons-in-classic-nav/ This code throws an LESS error stating parse error: unclosed block.

 

Since I've started using the custom menus I cannot get the social icons to load.

 

Also, in my Custom Code section, I have made no additions and it is empty except for body{} - where should I put the code in relation to that.

 

Can anyone help me figure this out?

 

Cheers,

Trevor

Share this post


Link to post
Share on other sites

18 answers to this question

Posted · Report post

The code Danny provided in the other topic is a hook.  It's supposed to be placed in one of two places:

 

1. If using a child theme, it would be placed at the end of your child theme's functions.php.

2. If not, then using the PageLines Customize plugin, it's placed at the end of that functions.php.

 

Either way, it's added via FTP or by the built in editors in WordPress such as Dashboard > Plugins > Editor (select PageLines Customize, then functions.php) for that method.

 

I can't share my IP, but it would help greatly if we could see a screenshot of your icons as they appear now, as well as the code you've applied, as well as your CSS code for those icons.

Share this post


Link to post
Share on other sites

Posted · Report post

Many thanks James, will do!

Share this post


Link to post
Share on other sites

Posted · Report post

Anytime :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

Learning that Danny provided is used that way is new to me, and thanks!  I'm going to try it.

I have added zero custom code to my site and the icons simply look like they would from a stock install.

 

I'll let you know how I make out with functions.php since using negative numbers in Pagelines > Page Options > Header and Footer had no effect.

Navigation menu is provided by the Nav Classic section, which is using a custom menu so that I could hide top-level pages off the menu (Branding and Nav Classic are the only sections in Header).

 

Cheers,

Trevor

 

EDIT:  Okay, following Rob and Danny's advice I've gotten the social media icons exactly on par/the same level with my nav menu.  Many thanks everyone.

Share this post


Link to post
Share on other sites

Posted · Report post

Okay - I've just spotted a problem; the social media icons now show up in all widgets where there is a search bar - between the widget title text and the search bar itself.  

 

Does anyone know what this could be?

 

EDIT:  Here's a screenshot.Screen%20Shot%202012-12-24%20at%208.09.3

Share this post


Link to post
Share on other sites

Posted · Report post

This does not happen by default, as seen here: http://screencast.com/t/UhoEgl2u

 

So maybe is a good time to show us exactly what custom code you have added.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Simon,

 

I have to correct myself - the only code I added is:

 

 
body {}  <- this was already in the Custom Code section after installation
#site .section-nav .searchform { display: none; }   <- I added this following Danny's post in another thread.

Share this post


Link to post
Share on other sites

Posted · Report post

This does not happen by default, as seen here: http://screencast.com/t/UhoEgl2u   So maybe is a good time to show us exactly what custom code you have added.
I don't know how to write code like Danny's, but I can see that there is reference to "search_form" - no doubt this has some effect on producing the what I see. In fact, I tested this by putting search forms in a few section and the social icons showed up each time the search bar was visible. Perhaps Danny's code worked in earlier versions? Maybe it's hooking into location of the search bar?

Share this post


Link to post
Share on other sites

Posted · Report post

You keep mentioning dannys code, what code?

Share this post


Link to post
Share on other sites

Posted · Report post

You keep mentioning dannys code, what code?

Hi Simon (Merry Christmas, by the way),

 

Rob and I are referring to Danny's code ( http://www.pagelines.com/forum/topic/23871-social-icons-in-classic-nav/ ) that I identified in the opening post of this thread.  His code seems to hook a location at/near the search bar and inserts the social media icons, or at least I think that's what it does.  Perhaps it hooks the location of ALL search bars, as I described above...I don't know.

 

I am trying to put my site live as soon as possible, but I've been delayed by this, so I'm hoping that you might be familiar with the challenge and can suggest a fix.

 

 

Rob, James - have you ever seen a problem like this before?  Can you think of any fixes?

 

And Happy Holidays to all!!

 

Cheers,

Trevor

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Trevor, unclosed block means you've left the } off the end of the code, like in the example below, must have a closing bracket :-)

 

#foo {background:blue;}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Trevor

 

The hook add_action('get_search_form', 'social_icons') is adding the social icons to anything that calls the inbuilt search form in place of the search form.

 

You could the following options to resolve

 

1. Try using a third party plugin/widget to provide the search function for your site in the sidebar (this would probably be the easiest and would leave the above code intact and working in the header)

2. Use a different hook from http://api.pagelines.com/hooks

3. try inserting the search bar html (from bootstrap) into a blank text widget as per below

 

    <form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
    </form>

Share this post


Link to post
Share on other sites

Posted · Report post

Trevor, the regular social icons have settings that allow you to position them with numeric values... how far from the right, and how far up you want them. That writes the CSS for you. 

 

Go to Dashboard > PageLines > Site Options > Header and Footer and scroll down to Branding Section - Social Icon Position

 

There you'll see the boxes. It's possible to use positive or negative values for Distance From Bottom but I don't recommend using negative values for the next option as it can throw out your alignment and make the icons vanish.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James - many thanks indeed! While I was searching for a fix I began reconsidering my social media strategy, and I came across the Janrain plugin. This is a particularly awesome plugin for adding "sign in with you fave social media tool". I'm trailing it now in sandbox, and my site will be going live in the next few days, so I can see how it works in the real world. For the time being, I've removed all icons from the header and disabled the appropriate code. I feel good that, at least as a novice, I was able to recognize a hook and figure out what it does. A wee dram for my efforts! Cheers, Trevor

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent, I'll check it out haven't heard of that one before.

 

Keep us posted, we'll leave this thread open for you in case you require further assistance, if you manage to get the new plugin working and everything's good, hit the 'marked solved' tab to close the thread :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob - at present, that doesn't work for me as the icons don't line up on the same line as the menu without using negative numbers (like -20 or so). Is there a way to get that code snippet from my OP working? It seemed to for that original poster...

Share this post


Link to post
Share on other sites

Posted · Report post

Trevor,  I use -20 to position the icons on my own site. Works a charm. There's nothing wrong with using a negative value there. All it does is write a margin negative value to the dynamic CSS.

 

The way to identify the CSS element is to use a tool like Firebug for Firefox or Chrome's Inspection Tool. With your site in maintenance mode, I can't identify the CSS on your site or see your layout.

 

I'm actually trying to help you avoid having conflicting code in your CSS by using a built-in setting, which is always preferred.

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Rob, if you pm me your IP I'll whitelist you past the maintenance mode. That okay?

 

EDIT:  At present, setting a negative value has no apparent effect on vertical placement of the icons.

Share this post


Link to post
Share on other sites