18 replies to this topic

[ttownsend]

Hi all,

 

I've read through this thread 

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

 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

[James B]

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

 

Please Login or Register to see this Hidden Content

[Rob]

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.

[ttownsend]

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...

[Rob]

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

Please Login or Register to see this Hidden Content

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.

[ttownsend]

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.

[Rob]

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.

[ttownsend]

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.

[ttownsend]

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.

Edited by Simon_P, 24 December 2012 - 07:37 PM.
Fixed screenshot.. carry on.

[Simon_P]

This does not happen by default, as seen here: 

Please Login or Register to see this Hidden Content

 

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

[ttownsend]

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.

[ttownsend]

This does not happen by default, as seen here: 

Please Login or Register to see this Hidden Content

 
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?

[Simon_P]

You keep mentioning dannys code, what code?

[ttownsend]

You keep mentioning dannys code, what code?

Hi Simon (Merry Christmas, by the way),

 

Rob and I are referring to Danny's code ( 

Please Login or Register to see this Hidden Content

 ) 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

[James B]

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

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content

[ttownsend]

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

[James B]

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

[ttownsend]

Many thanks James, will do!

[James B]

Anytime :-)