Sidney FP: Contact - Add a line

Hello, we’re using sydney pro and the Sidney FP: Contact Widget to display our contact informations in the footer. It looks pretty good, but we want to add telefax so that it better fits with the menu next to it.

Is there a way to add another line and a symbol?

Thank you allready :slight_smile:

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
jQuery(function($) {

  if( $('.widget_sydney_contact_info').length ) {

    $.fn.addContactInfo = function(icon, text) {

      var html = '<div class="contact-info-custom"><span><i class="fa '+icon+'"></i></span>'+text+'</div>';

      $('.widget_sydney_contact_info .panel-widget-style').append(html);

    };

    // New contact item definition
    $('body').addContactInfo('fa-home', 'My new contact');

  }

});

In this line of code, specify the icon and contact item.

$('body').addContactInfo('fa-home', 'My new contact');

fa-home is a class name of Font Awesome that’ll be returning a home icon. To know what class name to use, visit this cheatsheet.

To add more contact info, you can use multiple lines like this:

$('body').addContactInfo('fa-home', 'My new contact 1');
$('body').addContactInfo('fa-heart', 'My new contact 2');
  1. Update
  2. To add more space among items, add this CSS code to Appearance > Customize > Additional CSS from dashboard.
.widget_sydney_contact_info .panel-widget-style > div {
  margin-bottom: 30px;
}

Regards,
Kharis

Hello, thank you for your answer. But it didn’t worked and nothing showed up.

There are two plugins, is it maybe for the otherone?

We’re using “Sidney: Kontakt-Informationen”.

image

Or is there maybe a problem with the javascript, im using another code aswell:

jQuery(function($) {
       var myButton = '<a href="/ueber-uns" class="roll-button border">ÜBER UNS</a>';
       $( '.slide-inner' ).append(myButton);
});
​
// Kontaktfelder hinzufügen
​
jQuery(function($) {
​
  if( $('.widget_sydney_contact_info').length ) {
​
    $.fn.addContactInfo = function(icon, text) {
​
      var html = '<div class="contact-info-custom"><span><i class="fa '+icon+'"></i></span>'+text+'</div>';
​
      $('.widget_sydney_contact_info .panel-widget-style').append(html);
​
    };
​
    // New contact item definition
    $('body').addContactInfo('fa-fax', 'Fax');
​
  }
​
});

Can you help?

Best regards,
Gunnar

Hello Gunnar,

Please try replacing all of your code with this one:

    jQuery(function($) {

      var myButton = '<a href="/ueber-uns" class="roll-button border">ÜBER UNS</a>';
      $( '.slide-inner' ).append(myButton);

      if( $('.widget_sydney_contact_info').length ) {

        $.fn.addContactInfo = function(icon, text) {

          var html = '<div class="contact-info-custom"><span><i class="fa '+icon+'"></i></span>'+text+'</div>';

          $('.widget_sydney_contact_info .panel-widget-style').append(html);

        };

        // New contact item definition
        $('body').addContactInfo('fa-home', 'My new contact');

      }

    }); 

Regards,
Kharis

Hello Kharis,

It still does nothing:

Do you know what is the problem?

Best regards,
Gunnar

I did some research and found this topic:

I needed to change to code a little bit to this:

;(function($) {

  if( $('.contact-address').length ) {

      var address     = $('.contact-address').text();
      var addressArr  = address.split("//");
      var newAddress  = addressArr.join("<br/>");



      // Second phone 
      var phoneNumber = '123456';
      var phoneHTML   = '<div class="contact-phone"><span><i class="fa fa-fax"></i></span>'+phoneNumber+'</div>';
      $('.contact-phone').after(phoneHTML);
      
  }

})(jQuery);

But I have one more question. Is there a way to put the items from the contact in line with the items of the menu to the left?

Would great if you have a solution.

Thank you allready.

Hello there,

Please try adding the below CSS code:

    .sydney_contact_info_widget div {
      margin-bottom: 3px;
    } 

Regards,
Kharis

1 Like

10px worked fine. Thank you for your help :slight_smile:

Great!

You’re welcome! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis