'Contact header info' customisation


#1

Hi - all my queries here relate to the Sydney Pro Contact Header Info (Theme > Customisation > Sydney Pro Options > Contact Header Info).

Can you please advise on code changes for the following:

1 CSS font size reduction - it currently uses the default font but I would like this to be much smaller than body text, please advise if I can change it?

2 Right alignment - it defaults left and can see centre alignment as an option, but I’d actually like right alignment, can this be applied?

3 Adding shortcode for user login and register - just want to know if I can add it here? I would assume a PHP change, is this the case?

Thank you.


#2

Hello there,

Thank you for reaching out to us here.

> 1 & 2

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.header-contact{
  font-size: 14px;
  text-align: right;
}

Adjust the font size as needed.

> 3

To avoid PHP code modification, you can use wp_footer action to insert your shortcode in the footer of your site and move it into contact header line by using jQuery code. Please do the following steps:

  1. Add this function into your child theme’s functions.php file or you can use Functionality plugin without a child theme:

function sydney_insert_shortcode_in_footer(){
	echo '<div class="new-top-contact-content" style="display:none;">';
	echo do_shortcode('[your_shortcode]');
	echo '</div>';
}
add_action('wp_footer', 'sydney_insert_shortcode_in_footer', 5);

Replace [your_shortcode] with your shortcode.

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following code into the “Scripts in footer:” box:


<script type="text/javascript">
(function($){
      

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

      var userMenu = $('.new-top-contact-content').html();

      $('.header-contact .container').append('<div class="user-menu" style="display:inline-block;">'+userMenu+'</div>');
      
    }

})(jQuery);
</script>

  1. Save settings
  2. You would clear your web browser’s cache before reloading your site to see the jQuery code addition takes affect

Regards,
Kharis


#3

thank you Kharis, you are a huge help!


#4

You are always welcome here.

I am marking this thread as resolved. 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