Jump to content
Sign in to follow this  
hugoaguiar

EcoPro Social Media Icons

Recommended Posts

hugoaguiar

Hi guys! 1 - I tried to place the search bar with the social media icons.and I did it. However, I want the social media icons independent of the page type. At the moment if I change the page to a "full width page style" they disappear. How can I do this? 2 - I also want to have the social media icons free from the box. I just want to have the icons there with no box around them. 3 - When the mouse is over a social media icon I want it to change to a color mode like in this site. What do I need to do? Thank you in advance guys. This is the page I'm trying to "design" - www.fazer-avancar.com/supla

Share this post


Link to post
Share on other sites
bryan-hadaway

Hmm, I think the biggest problem is that you have it behind the header div. Please post the code you used to position the social icons and I'll update it. Thanks, Bryan

Share this post


Link to post
Share on other sites
hugoaguiar

.socialicons { top:-710px; float:right; margin-bottom:-30px; position:relative; right:0px; } ty

Share this post


Link to post
Share on other sites
hugoaguiar

Point 2 is solved. I deleted the code: .socialicons .socialeffect { height: 24px;--> border-top: 1px solid #fff; border-left: 1px solid #fff; padding: 7px 12px; } in theme.css and I updated the code in Custom CSS for: .socialicons { background-color: transparent; border: 0px; top:-110px; float:right; margin-bottom:-30px; position:relative; right:0px; } I still need help in point 1 and 3 of the first entry of this post. I moved the icons back to the side bar so you can inspect it (it was behind the header..).

Share this post


Link to post
Share on other sites
cmunns

I can't inspect anything on your site bc it says it's under construction. To get the colored hover on the icons you would need an image sprite. Basically you have two versions of an image stacked on top of each other as one image then shift the background property using CSS upon hover.

Share this post


Link to post
Share on other sites
hugoaguiar

Hello guys, The page is now public (here) due to that I can't leave the icons there now... Can you explain what do I need to do to have the social media icons independent of the side bars? I want to have the icons always on the top, without having to add the widget to a sidebar.. At the moment if I change the page type to "full width" the social icons disappear because they belong to a side bar type... How can I do that? Thank you in advance.

Share this post


Link to post
Share on other sites
hugoaguiar

Ok. I've added the icons here 1) The widget is inside the content sidebar. However I want it free from the side bars. I want the icons on the header. 2) When the mouse is over a social media icon I want it to change to a color mode like in this site. Cmunns already addressed this issue but I didn't understood :( Thank you guys

Share this post


Link to post
Share on other sites
cmunns

You would have to change a file. _spotlight.php would need to have the social icons like this ` <?php global $pagelines_ID;?> <?php if( !pagelines('hide_spotlight') && !m_pagelines('hide_spotlight',$pagelines_ID) ):?>

<?php if(is_page_template('page-highlight.php')) { get_template_part('pro/template_highlight'); }else{?>

<?php global $bbpress_forum;?> <?php if($bbpress_forum):?> <?php bb_option('name'); ?> <?php elseif(is_page()):?> <?php the_title(); ?> <?php elseif(is_home() || is_single()):?> <?php if(get_option('page_for_posts')){ echo get_the_title(get_option('page_for_posts')); }else{ e_pagelines("blog_title_text",__('The Latest', TDOMAIN)); } ?> <?php elseif(is_search()):?> <?php if(is_search()):?> <?php _e('Search Results For:',TDOMAIN);?> "<?php the_search_query(); ?>" <?php endif;?> <?php elseif(is_category()):?> <?php single_cat_title(''); ?> <?php elseif(is_404()):?> <?php _e('Error 404', TDOMAIN);?> <?php elseif(is_archive()):?> <?php _e('Archives', TDOMAIN);?> <?php endif;?>

<?php _e('Connect with us:',TDOMAIN);?> <?php if(pagelines('rsslink')):?> feed <?php endif;?> <?php if(VPRO):?> <?php if(pagelines('twitterlink')):?> twitter <?php endif;?> <?php if(pagelines('facebooklink')):?> facebook <?php endif;?> <?php if(pagelines('linkedinlink')):?> linkedin <?php endif;?> <?php endif;?>
<?php } ?>
<?php endif;?> ` Then when you've done that we can position it with a little css change

Share this post


Link to post
Share on other sites
hugoaguiar

Thank you guys. The code works perfectly. The icons appear in all pages except in the home page. If possible, let me know what do I have to do to have the social icons also in the home page.

Share this post


Link to post
Share on other sites
cmunns

that's because there is no "spotlight" area in the home page. You could also have pasted this social icons code `

<?php _e('Connect with us:',TDOMAIN);?> <?php if(pagelines('rsslink')):?> feed <?php endif;?> <?php if(VPRO):?> <?php if(pagelines('twitterlink')):?> twitter <?php endif;?> <?php if(pagelines('facebooklink')):?> facebook <?php endif;?> <?php if(pagelines('linkedinlink')):?> linkedin <?php endif;?> <?php endif;?>
` Into the header.php file near the code that mentions the search bar. Then again we'd have to modify some css to position it correctly but that would definitely get it on every page.

Share this post


Link to post
Share on other sites
wairoa

This post seems to answer a question I just asked at the bottom of another post... but, cmunns, when I drop the above code into header.php it chokes on the part towards the end... `<?php } ?>` Could you please double-check the code? Thanks. If you'd like me to paste in my complete header.php file in here, let me know.

Share this post


Link to post
Share on other sites
bryan-hadaway

Hi Murry, Adam should be back tomorrow with that answer, bump your topic too just in case. Everyone else, I can help with the positioning of the icons if you're ready for that step, please make sure to remind me of your link with your reply. Thanks, Bryan

Share this post


Link to post
Share on other sites
hugoaguiar

Thank you cmunns but this time I didn't got the right result. Please find below my heade.php - let me know which code and where should I insert it so I'll have the icons in every page. header.php <?php do_action('pagelines_before_html');?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <!-- Title and External Script Integration --> <?php global $bbpress_forum; if($bbpress_forum ):?> <title><?php bb_title() ?></title> <?php bb_feed_head(); ?> <?php bb_head(); ?> <link rel="stylesheet" href="<?php bb_stylesheet_uri(); ?>" type="text/css" /> <?php else:?> <title><?php if(is_front_page()) { echo SITENAME; } else { wp_title(''); } ?></title> <?php endif;?> <!-- Meta Images --> <?php if(pagelines('favicon')):?><link rel="shortcut icon" href="<?php echo pagelines('favicon');?>" type="image/x-icon" /><?php endif;?> <?php if(pagelines('touchicon')):?><link rel="apple-touch-icon" href="<?php echo pagelines('touchicon');?>" /><?php endif;?> <!-- Stylesheets --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php get_template_part ('library/dynamic_css'); ?> <?php wp_enqueue_style('ie7-style', THEME_CSS . '/ie7.css'); global $wp_styles; $wp_styles->add_data( 'ie7-style', 'conditional', 'lte IE 7' ); ?> <!-- Wordpress Stuff --> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_single() ) wp_enqueue_script( 'comment-reply' ); ?> <!-- This makes the comment box appear where the ???reply to this comment??™ link is --> <?php wp_enqueue_script("jquery"); ?> <!-- Modules w/ Javascript --> <?php if((is_page_template('page-carousel.php') || is_page_template('page-carousel-full.php')) && VPRO) get_template_part ('core/inits/init_carousel');?> <?php if((is_page_template('page-feature.php') || is_page_template('page-feature-page.php') || is_page_template('page-feature-blog.php') || is_page_template('page-feature-fullwidth.php') || (is_home() && pagelines('featureblog'))) && VPRO) get_template_part ('core/inits/init_feature');?> <?php if(pagelines('enable_drop_down') && VPRO) get_template_part ('core/inits/init_dropdown');?> <!-- Font Replacement --> <?php if(VPRO) get_template_part('library/_font_replacement');?> <!-- Fix IE --> <?php get_template_part('library/_ie_fixes');?> <?php if (pagelines('headerscripts')) echo pagelines('headerscripts');?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php if (pagelines('asynch_analytics')) echo pagelines('asynch_analytics');?> <div id="site"> <div id="header" class="fix"> <div class="content fix"> <?php get_template_part("library/_brand");?> <?php if(!pagelines('hidesearch')) get_template_part ( 'library/_searchform'); ?> <?php function nav_fallback(){?> <ul class="mnav dropdown clearfix"> <?php wp_list_pages('exclude='.$frontpage_id.$forum_exclude.'&depth=3&title_li=&link_before=<span>&link_after=</span>');?> <?php }?> <div id="nav" class="clearfix"> <?php if(function_exists( 'wp_nav_menu')):?> <?php wp_nav_menu( array('theme_location'=>'primary','container_class' => '', 'menu_class' => 'mnav dropdown fix', 'link_before' => '<span>', 'link_after' => '</span>', 'container' => null, 'depth' => 3, 'fallback_cb'=>'nav_fallback' ) ); ?> <?php else:?> <?php nav_fallback();?> <?php endif;?> </div> </div> </div> <div id="main" class="fix"> I also would like to use sprite image to have diffrent icons when hovering the icon. How can I do this? I already have a image prepared here but I don't know how to implement this. My icons are still here for tests :)

Share this post


Link to post
Share on other sites
bryan-hadaway

Bumping for developers guys, go ahead and bump again. Thanks, Bryan

Share this post


Link to post
Share on other sites
hugoaguiar

Hello Bryan, what do you mean? My english is not perfect :) I didn't understand your last comment.

Share this post


Link to post
Share on other sites
cmunns

@Murray you are right, this should not be included ` <?php } ?>

Share this post


Link to post
Share on other sites
wairoa

Instructions are too confusing now. I'll open a new question about positioning social icons in the header area (near search box) of EcoPro, similar to PlatformPro social icon placement.

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  

×