Hello,

It can be achieved with some customization.

First you must make the icon 32x32px size and upload in your wp site.

Edit the file \specular\includes\widgets\codeless_socialwidget.php
Find this code:

echo '<ul class="footer_social_icons '.esc_attr($style).'">';
            
            if( !empty($cl_redata['facebook']) )
               echo '<li class="facebook"><a href="'.esc_url($cl_redata['facebook']).'"><i class="icon-facebook"></i></a></li>';
            if( !empty($cl_redata['twitter']) )
                echo '<li class="twitter"><a href="'.esc_url($cl_redata['twitter']).'"><i class="icon-twitter"></i></a></li>';
            if( !empty($cl_redata['flickr']) )
                echo '<li class="flickr"><a href="'.esc_url($cl_redata['flickr']).'"><i class="icon-flickr"></i></a></li>';
            if( !empty($cl_redata['google']) )
                echo '<li class="google"><a href="'.esc_url($cl_redata['google']).'"><i class="icon-google"></i></a></li>';
            if( !empty($cl_redata['dribbble']) )
                echo '<li class="dribbble"><a href="'.esc_url($cl_redata['dribbble']).'"><i class="icon-dribbble"></i></a></li>';
            if( !empty($cl_redata['foursquare']) )
                echo '<li class="foursquare"><a href="'.esc_url($cl_redata['foursquare']).'"><i class="icon-foursquare"></i></a></li>';
            if( !empty($cl_redata['linkedin']) )
                echo '<li class="foursquare"><a href="'.esc_url($cl_redata['linkedin']).'"><i class="icon-linkedin"></i></a></li>';
            if( !empty($cl_redata['youtube']) )
                echo '<li class="youtube"><a href="'.esc_url($cl_redata['youtube']).'"><i class="icon-youtube"></i></a></li>';
            if( !empty($cl_redata['email']) )
                echo '<li class="email"><a href="'.esc_url($cl_redata['vk']).'"><i class="icon-envelope"></i></a></li>';
         

and add this one below the above code:

   if( !empty($cl_redata['vk']) )
                echo '<li class="vk"><a href="'.esc_url($cl_redata['email']).'"><img src=""  width="32" height="32"></a></li>';

Add between the quotes

src=""

the image url of the icon you uploaded.
Then edit the file specular\includes\core\codeles_options.php, find the lines:

$this->sections[] = array(
                'icon' => 'el-icon-twitter',
                'title' => __('Social Media', 'codeless-admin'),
                'fields' => array(
                    array(
                        'id'       => 'facebook',
                        'type'     => 'text',
                        'title'    => __('Facebook Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'twitter',
                        'type'     => 'text',
                        'title'    => __('Twitter Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'flickr',
                        'type'     => 'text',
                        'title'    => __('Flickr Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'foursquare',
                        'type'     => 'text',
                        'title'    => __('Foursquare Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'google',
                        'type'     => 'text',
                        'title'    => __('Google Plus Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'dribbble',
                        'type'     => 'text',
                        'title'    => __('Dribbble Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'linkedin',
                        'type'     => 'text',
                        'title'    => __('Linkedin Link', 'codeless-admin')
                    ),

                    array(
                        'id'       => 'youtube',
                        'type'     => 'text',
                        'title'    => __('Youtube Link', 'codeless-admin')
                    ),

                    array(
                        'id'       => 'email',
                        'type'     => 'text',
                        'title'    => __('Email Link', 'codeless-admin')
                    ),

and add this one below it:

array(
                        'id'       => 'vk',
                        'type'     => 'text',
                        'title'    => __('VK Link', 'codeless-admin')
                    )

Now you can refresh the general options and you can see there at Social Media section a new field for the VK social.

Let us know if you need further help.

Best regards!

Hello,

I don’t understand what’s the additional row about. Please can you give me your site credentials (in a private reply) so I can check, also the icon to change color on hover?

Best regards!

Hello,

It’s difficult to find out where the ‘+’ sign is coming from. It’s not part of the theme. You must check the code on debugging mode and try to find it out.

For the VK icon change o hover, you must add another image at the same folder with different color icon.
Then add this css code on custom css field on general settings:

.social_widget .vk img:hover {
background: url("");//put between quotes the image url.
}

Best regards!