Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1059938

    Hi,

    I need to place the social media icons in the middle footer widget, not in the socket area.

    How can I do this?

    Regards,
    Roger

    #1061173

    Hey Roger,

    You can use 3 footer widget sections and put them on the 3rd one and then center them :)

    Thank should do it for you.

    Best regards,
    Basilis

    #1061436

    Hi Basilis,

    Thank you for your reply, but how do I do that? In the Footer configuration section there’s only a checkbox to place them in the socket, not in the footer. It would be nice if there was a widget type ‘Enfold Social Media icons’

    Regards,
    Roger

    #1061445

    there are plenty of variants on board.
    A fairly quick method is to first allow it to be displayed in the meta header at the top. Then you go into your frontend and examine the source code using Developer Tools. There you can copy the html code from the unordered list. You can copy this into html widget.
    That’s it – it looks like:

    <ul class="noLightbox social_bookmarks icon_count_2">
    	<li class="social_bookmarks_facebook av-social-link-facebook social_icon_1">
    		<a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook">
    			<span class="avia_hidden_link_text">Facebook</span>
    		</a>
    	</li>
    	<li class="social_bookmarks_twitter av-social-link-twitter social_icon_2">
    		<a target="_blank" href="http://twitter.com/#/" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter">
    			<span class="avia_hidden_link_text">Twitter</span>
    		</a>
    	</li>
    </ul>

    in this case this comes to quick css to have a nice view and to have the buttons side by side:

    #footer .social_bookmarks {
        float: left;
        margin: 15px 0 0 ;
        position: relative;
    }
    
    #footer .social_bookmarks li {
        float: left;
        clear: right !important;
        margin-right: 10px;
        border: 1px solid #999;
    }

    But for me i took my social bookmarks widget code to child-theme functions.php
    next post

    #1061447
    /*** custom social bookmarks widget  ****/
    function social_bookmarks_register_widget() {
    register_widget( 'add_social_bookmarks' );
    }
    add_action( 'widgets_init', 'social_bookmarks_register_widget' );
    
    class add_social_bookmarks extends WP_Widget {
    public function __construct() {
      $widget_ops = array(
        'classname' => 'socialbookmarks-widget', 
        'description' => __('A widget that displays the social bookmarks', 'avia_framework') 
        );
      parent::__construct( 'add_social_bookmarks', THEMENAME.' Social Bookmarks', $widget_ops );
    }
    
    public function widget( $args, $instance ) {
      $title = apply_filters( 'widget_title', $instance['title'] );
      echo $args['before_widget'];
      //if title is present
      if ( ! empty( $title ) )
      echo $args['before_title'] . $title . $args['after_title'];
      //output
      echo $before_widget;
      $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
      echo avia_social_media_icons($social_args, false);
      echo $after_widget;
    }
    
    public function form( $instance ) {
      if ( isset( $instance[ 'title' ] ) )
      $title = $instance[ 'title' ];
      else
      $title = __( 'Social Bookmarks', 'avia_framework' );
      ?>
      <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
      </p>
      <?php
    }
    
    public function update( $new_instance, $old_instance ) {
      $instance = array();
      $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
      return $instance;
    }
    }

    for quick css like above:

    #footer .social_bookmarks {
        float: left;
        margin: 15px 0 0 ;
        position: relative;
    }
    
    #footer .social_bookmarks li {
         float: left;
        clear: right !important;
        margin-right: 10px;
        border: 1px solid #999;
    }

    You will then have your own widget for it and can drag it in a widget-area of your choice
    All social Buttons you will define on Enfold Options will be there

    #1061449

    Thank you Guenter,

    I’m gonna give it a try.

    Regards,
    Roger

    #1061451

    third method :
    we create a shortcode for it ( to child-theme functions.php ):

    function social_bookmarks_shortcode() {
      echo '<h3 class="widgettitle socials">Social Bookmarks</h3>';
      $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
      echo avia_social_media_icons($social_args, false);
    }
    add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');

    code to quick css:

    .widgettitle.socials {
        margin: 45px 0 5px !important;
    }
    #footer .social_bookmarks li {
        margin-right: 10px;
    }
    ul.social_bookmarks + .widget {
        display: none;
    }

    the original widget heading is set to display:none
    then you can insert the shortcode into a text-widget or html-widget as : [social-bookmarks]

    #1061991

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.