Search the Community

Hi we are looking to upgrade a clients website from Framework V2.4.4 to DMS but after testing the free version there does not appear to be a social icon section that we can place in the header. Is this possible. The coloured icons on Framework were perfect and need to be kept the same.

I want to insert the social icons into the fixed-navbar using a hook. But instead of inserting a series of images linked to the social networks I need to copy the PHP codes used by Pagelines and paste them into my new hook instead of using manual html. That way whatever set in the admin setting page for the social networks shows up in the fixed navbar. Where can I find the PHP codes for the social icons?

Hello! I'm having trouble placing the social icons in the same "row" as the main navigation (I'm using the classic nav). The ideal result would be the navigation aligned left, the icons right. I tried the function for the customize plugin Danny provided in this post http://www.pagelines.com/forum/topic/19563-how-can-i-add-social-icons-to-the-brand-nav/, and tried to locate the correct position with ActionMap. With this I was able to place the icons anywhere within the page but the same row as the navigation. I thought "pagelines_inside_bottom_nav" would do the job, but all that happens is a line break. You can see my problem here: http://wuoau.org/ My additional function in functions.php looks like this add_action('pagelines_inside_bottom_nav', 'social_icons'); function social_icons(){ ?> <div class="icons" align="right"> I'm an animator, not a web designer. Maybe I just can't see the super-easy & super-obvious solution Greetings from Berlin, Wolfgang

I'm trying to put an Social icon for Linkedin in the Header & Footer. By default icon is placed next to the logo and if it is moved by margin-left or css it's not work and isn't responsive. How I can fix it? Thank you!

Well I'm just a question-asking fool this week! FYI- my site is in maintenance mode. So, I needed to use hooks to add change/add social icons. I didn't have the brain space to figure out hooks, so I bought the hooker plugin. I added the following html to pagelines_before_branding_icons hook: <div class="icons" style="bottom: 12px; right: 1px;"> <a class="facebooklink" href="https://www.facebook.com/khadijaannette"target="_blank"> <img alt="Facebook" src="http://khadija-annette.com/wp-content/uploads/2013/icons/facebook.png"> </a> <a class="pinterestlink" href="http://pinterest.com/khadijaannette/" target="_blank"> <img alt="Pinterest" src="http://khadija-annette.com/wp-content/uploads/2013/icons/pinterest.png"> </a> <a class="twitterlink" href="https://twitter.com/KhadijaAnnette" target="_blank"style="opacity: 0.5;"> <img alt="Twitter" src="http://khadija-annette.com/wp-content/uploads/2013/icons/twitter.png"> </a> <a class="tumblrlink" href="http://tumblr.com/khadijaannette/" target="_blank"> <img alt="Tumblr" src="http://khadija-annette.com/wp-content/uploads/2013/icons/tumblr.png"> </a> <a class="linkedinlink" href="http://www.linkedin.com/in/khadijaoconnell"target="_blank"> <img alt="LinkedIn" src="http://khadija-annette.com/wp-content/uploads/2013/icons/linkedin.png"> </a> <a class="emailink" href="mailto:[email protected]/" target="_blank"> <img alt="Email" src="http://khadija-annette.com/wp-content/uploads/2013/icons/email.png"> </a> <a class="rsslink" href="http://khadija-annette.com/feed/" target="_blank"style="opacity: 0.5;"> <img alt="RSS" src="http://khadija-annette.com/wp-content/uploads/2013/icons/rss.png"> </a> The icons are great and lined up nicely and exactly where they are supposed to be except... 4 of them are repeated on the left side of the page above my fixednav bar. What in the world is going on?? Also, I just noticed that the code for the errant icons actually matches the Pagelines code for the included social icons that you edit in Site Options. WHY? What in the world did I do wrong this time? ***UPDATE*** Weird freaking other thing happened in sync with the extra icons- my logo is no greyed out or has some opacity applied when I'm not hovering on it. This is new. I didn't do this. Well, I obviously did it but I don't know how. Oh god, make it end. Bree

Hi, How can I change the color of the social icons to a uniform gray? I actually like the rollover colors as they are, but want less distraction up there. http://flagstonesearchmarketing.com/ Thanks

Not sure if this is appropriate or not, but I thought it might be useful to some members so I'm sharing it here. The default social icons that come with the PageLines branding section look and "feel" (on hover) great. The only thing I wasn't crazy about was that I didn't want them in the header. I wanted them in the footer. So I did a little bit of fiddling around and managed to find a way to make them somewhat portable and, at the same time, retain the nice hover behaviour. <section class="section-branding"><div class="texture"><div class="content"><div class="content-pad"><div class="branding_wrap fix"><div class="icons" style="bottom: 12px; right: 1px;"><a target="_blank" href="http://YOURURL.com/feed/" class="rsslink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/rss.png" alt="RSS"/></a><a target="_blank" href="http://twitter.com/YOURTWITTERID" class="twitterlink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/twitter.png" alt="Twitter"/></a><a target="_blank" href="http://facebook.com/YOURFACEBOOKPAGEURL" class="facebooklink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a><a target="_blank" href="http://linkedin.com/YOURLINKEDINID" class="linkedinlink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/linkedin.png" alt="LinkedIn"/></a><a target="_blank" href="http://youtube.com/YOURYOUTUBEID" class="youtubelink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"/></a><a target="_blank" href="https://plus.google.com/YOURGOOGLEPLUSID" class="gpluslink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"/></a></div></div> <script type="text/javascript"> jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);}); </script> Just copy and paste the code above into a footer widget (it also appears to work in sidebar widgets) and you'll have those beautiful social icons - with that great hover effect - in your footer. Obviously, in the code above, you'll need to replace YOURURL with the actual URL for your site. You'll also need to replace YOURTWITTERID, YOURFACEBOOKPAGEURL, and other social profile links with your own. If you didn't want to use one of the social icons, then simply select and delete the code for it between the opening <a and closing </a> tags. Note: you may have to add/modify some CSS in order to make them display exactly how you want them to - e.g. I added the following CSS (to remove the absolute positioning and to center-align the icons inside the footer widget): .section-branding .icons { position: static; width: 192px; margin-left: auto; margin-right: auto; } Depending on the number of icons you use, you'll need to adjust the width accordingly (I'm using six, for which 192px seems to be correct). Anyway, hope this is useful.

hi all. i'd like to make some changes to the full width fixed navbar. i'd like to reduce the height. this would require removing or changing the height of the rectangle behind my text link, and any padding in the searchform. it will probably be too small/narrow for the search form, actually. how can i put the search form somewhere else, i.e., on the same line as the site title, and to the right of the social icons? thank you! suzy

I wanted to add the social icons in my footer and can't figure out how to make it work. I found an earlier post with some code, which i put into a full width sidebar but it didn't seem to work (see attachment) Here's the code I used: <section class="section-branding"><div class="texture"><div class="content"><div class="content-pad"><div class="branding_wrap fix"><div class="<span class="searchlite">icons</span>" style="bottom: 12px; right: 1px;"> <a target="_blank" href="https://www.facebook.com/pages/Michelle-Kim-Studio/592412917441733" class="facebooklink"><img src="http://YOURURL.com/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"/></a> </div></div> <script type="text/javascript"> jQuery(&#39;.<span class="searchlite">icons</span> a&#39;).hover(function(){ jQuery(this).fadeTo(&#39;fast&#39;, 1); },function(){ jQuery(this).fadeTo(&#39;fast&#39;, 0.5);}); </script> Is there any other way to do this?

The link to the docs on adding additional icons to the social icons bar is broken : http://support.pagelines.me/docs/customization/additional-social-icons/ I also found some information that was pasted here from another post: http://paste.pagelines.com/4xp but was for pininterest. add_action('pagelines_branding_icons_end', 'pint_icon'); function pint_icon(){ ?> <a target="_blank" href="#" class="pintlink" style="opacity: 0.5; "> <img src="LINK TO ICON/IMAGE" alt="Pinterest"> </a> <?php } My question is quite simple: I have been asked to add a custom icon alongside the usual array which is a link to a movie database (imdb.com) for an actor's website. Can I just use the code above and add that the child functions.php file with the url to the relevant image file? Or do I need to create a new class etc? Thanks for any feedback

On pagelines website - http://www.pagelines.com, how do you center and get the footer social icons and footer tagline "PageLines.com was created with PageLines & WordPress" to showup?

How do I get the footer social icons to showup and be centered? Here is my site: http://curated7.com

Hi I'm new to Pagelines and I've just added some menus to my website and after doing so, my social icons have disappeared. Maybe the reason is that the menus are now in the exact same place where social icons used to be. What should I do to make the icons visible again (not necessarily in the same spot)?

Hi there - I am seeking documentation that would help me customise (add my own images) for the social icon buttons. I have looked around the forum and have seen that there are a few discussions on the topic - but each are very specific to the individuals' needs. I am more designer than coder and so would appreciate a step by step approach to getting results that I can duplicate. What I presently know: Customisations are best completed with the 'Customise plugin' or the 'Base theme' - I am using the later. The new icon images should be uploaded to the media gallery - or online somewhere with a clear URL. It is after this things get muddled. In the post dated 15 Oct 12 - 'Change Social website icons' - I see what I believe to be two methods to change the icon images. However I am not clear which one to use and what the main differences are, or how to go about them fully. For example is it possible to take the method extracted (from the demo theme site in discussion) as stated by Rob (16 Oct @ 10.43pm) and tweak it for general use? And if so where exactly should I place the code 1) if I am using the plugin and 2) if I am just using the base theme. Will I need to ftp to edit the html or can this be done from within Wordpress. I apologise if my request is over simplistic - but I promise to share my findings once I succeed. However if there is documentation already available - please point me in the right direction. Many thanks in advance. newbie to PG

Hovering over the Social Icons and/or clicking them no longer works in Chrome. Chrome: 23.0.1271.64 IE: 9.0.8112.16421 Pagelines Framework: 2.3.5 Not Working: http://tomacor.com Working: http://accuritconsulting.com and http://ginamarotta.com Appreciate the help. Ryan

Hi, On my website (www.janpeeters.nl/welcome) I have at the bottom a row of social icons. I've been trying for an hour now to add more space in between the icons. I've tried adding padding to .icons, to individual icon classes etc etc. I've used Firebug to research it but whatever I try nothing changes. I thought maybe I have custom code that overrules it but deleting various customised classes doesn't give any difference. So hopefully someone can help me out with how I can add padding in between the icons. Thanks and sorry for asking. Jan

I a trying to do a few things that I had before on my site but they dissappeared with the most recent upgrade and the editor is different so I can't find what I need in the CSS. Yes, I have Firebug but I still can't find it. First I want the social icons to be larger. I've added the following many place bit it still isn't working. .icons {text-align: right;position: absolute;bottom: 50%; right:0px;line-height: 20px;height: 24px;} .icons a { display: block; width: 48px; height: 48px; margin-left: 8px; float: right; text-align: right; opacity: 0.8; } Basically I want less opacity and larger icons. Where/what am I doing wrong? Second I have this in my custom CSS .brand-links a{color:#786b5e !important;font-weight:bold;} .brand-links a:hover{color:#663300 !important;font-weight:bold;} .brand-links a {padding: 0 15px;margin: 0 0px;width: auto;} .brand-links { position:absolute;top:-200px;right:5px; width: 980px; } I then in the functions had a file with text links that appeared to the right of my logo above my social icons. I can not locate my previous thread on how to manually add those text links so I'm asking again. Thirdly I've tried to make the header space smaller in order to get more content above the fold but it does not move?

I thought I'd give you a heads-up regarding the Google+ icon in the branding section. The icon that comes with Pagelines is outdated according top the new Google + style guide. thanks kk

Hi all, Since updating from 2.2.5 to 2.3 my social icons have jumped from the right to the left side in the footer on my website http://www.janpeeters.nl. I'm sorry but I haven't got a screenshot of the 2.2.5 version but let me explain. On the left of the footer is the text '© 2012 Jan Peeters, Energiek Leren' aligned to the right were the social icons that are now below the mentioned text. I've not been able to restore this. Hopefully someone can help. I presume it has to do with the full transition to LESS. My custom CSS file I have copied to your paste service: http://paste.pagelines.com/2ed Thanks, Jan