Additional Social Icons

Hey!

I’d like some more options added to my social thingies (header, vc elements etc)

I’d like to add LinkedIn and SnapChat icons in 🙂 If you do it in the child theme, please just use “#” as the Link for now, I have to get the right links from the clients!

Im also having an issue adding Basel Banner to the SHOP page sidebar. When I add the widget and then upload my image and set the settings and save it, the image disappears. Weird as its working fine in the main side bar on the blog!

Coming along nicely 🙂

Thanks!

Oh feature requests:

1. Would be rad to have more control over header. IE, i have the “simplified” header, which on sticky has a white bg. In the page options i noticed an option to change the header from dark to light. This made all my menus / logos on the simplified menu not visible, but on scroll gave me a black sticky, which looked kinda cool. Ultimately – give the option to be able to custom the sticky menu styling / colours no matter what main navigation is selected!

2. Better Typograhy controls! I like how you’ve grouped them, but I wish i had more control without having to custom css it. Ie full titles/feature section type, the full h1-h6 custom (ie different fonts and weights per h tag) etc..just a bit more!

3. Would be sick if you could make your own slider with bg, bg overlay, text (subtitle, title, text) and buttons, then font stylings for each. Simply because REV slider, while powerful, is so SHIT haha and out of all my clients who have been hacked, its always rev slider!!

thanks

Hello,

Thank you for creating a topic here.

If you want to add new links to the social buttons shortcode you can paste the following code snippet to your child theme functions.php

function basel_shortcode_social($atts) {
	extract(shortcode_atts( array(
		'type' => 'share',
		'align' => 'center',
		'tooltip' => 'no',
		'style' => 'default', // circle colored 
		'size' => 'default', // circle colored 
		'el_class' => '',
	), $atts ));

	$target = "_blank";

	$thumb_id = get_post_thumbnail_id();
	$thumb_url = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);

	ob_start();
	?>
	
		<ul class="social-icons text-<?php echo esc_attr( $align ); ?> icons-design-<?php echo esc_attr( $style ); ?> icons-size-<?php echo esc_attr( $size ); ?> social-<?php echo esc_attr( $type ); ?> <?php echo esc_attr( $el_class ); ?>">
			<?php if ( basel_get_opt( 'social_email' ) != ''): ?>
				<li class="social-email"><a href="mailto:<?php echo ($type == 'follow') ? basel_get_opt( 'social_email' ) : basel_get_opt( 'social_email' ) . '?subject=' . __('Check this ', 'xtemos') . get_the_permalink(); ?>"  class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-envelope"></i><?php _e('Email', 'xtemos') ?></a></li>
			<?php endif ?>

			<?php if ( $type == 'share' || basel_get_opt( 'fb_link' ) != ''): ?>
				<li class="social-facebook"><a href="<?php echo ($type == 'follow') ? basel_get_opt( 'fb_link' ) : 'https://www.facebook.com/sharer/sharer.php?u=' . get_the_permalink(); ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-facebook"></i><?php _e('Facebook', 'xtemos') ?></a></li>
			<?php endif ?>

			<?php if ( $type == 'share' || basel_get_opt( 'twitter_link' ) != ''): ?>
				<li class="social-twitter"><a href="<?php echo ($type == 'follow') ? basel_get_opt( 'twitter_link' ) : 'http://twitter.com/share?url=' . get_the_permalink(); ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-twitter"></i><?php _e('Twitter', 'xtemos') ?></a></li>
			<?php endif ?>

			<?php if ( $type == 'share' || basel_get_opt( 'google_link' ) != ''): ?>
				<li class="social-google"><a href="<?php echo ($type == 'follow') ? basel_get_opt( 'google_link' ) : 'http://plus.google.com/share?url=' . get_the_permalink(); ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-google-plus"></i><?php _e('Google', 'xtemos') ?></a></li>
			<?php endif ?>

			<?php if ( $type == 'follow' && basel_get_opt( 'isntagram_link' ) != ''): ?>
				<li class="social-instagram"><a href="<?php echo ($type == 'follow') ? basel_get_opt( 'isntagram_link' ) : '' . get_the_permalink(); ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-instagram"></i><?php _e('Instagram', 'xtemos') ?></a></li>
			<?php endif ?>

			<?php if ( $type == 'share' || basel_get_opt( 'pinterest_link' ) != ''): ?>
				<li class="social-pinterest"><a href="<?php echo ($type == 'follow') ? basel_get_opt( 'pinterest_link' ) : 'http://pinterest.com/pin/create/button/?url=' . get_the_permalink() . '&media=' . $thumb_url[0]; ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'basel-tooltip'; ?>"><i class="fa fa-pinterest"></i><?php _e('Pinterest', 'xtemos') ?></a></li>
			<?php endif ?>

				<li class="social-LinkedIn"><a href="http://LinkedIn.com/YOUR_LINK" target="<?php echo esc_attr( $target ); ?>"><i class="fa fa-linkedin"></i><?php _e('LinkedIn', 'xtemos') ?></a></li>

				<li class="social-SnapChat"><a href="http://SnapChat.com/YOUR_LINK" target="<?php echo esc_attr( $target ); ?>"><i class="fa fa-snapchat"></i><?php _e('SnapChat', 'xtemos') ?></a></li>
		</ul>

	<?php
	$output = ob_get_contents();
	ob_end_clean();

	return $output; 
}

add_shortcode( 'social_buttons', 'basel_shortcode_social' );

Just added banner widget to your shop page area and it works just fine.

Thank you so much for trying to help us improve our theme and give us your feedback and feature requests. As for header backgrounds and typography seettings we don’t want to overload our theme with dozens of options. If we will add header color options for sticky header so will have to duplicate it for each page and we don’t think it is really necessary. The same thing with typography, sometimes it is much easier to add a few lines of codes to the custom CSS like h3 { font-size: 24px; } than adding huge number of options that make site’s typography look inconsistent and sometimes ugly. As for Revolution Slider we absolutely agree with you and maybe try to find some better “light” solution for that.

Kind Regards,
Xtemos

Hey!

Thanks for the social code, will try that out now 🙂

RE Shop banner..WEIIIIRD!! I swear I tried chrome and Firefox and it was working in all other side bars.

RE Header – i get you for sure. But – I think the header one you’ve done is actually a bug/broken/not quite thought out, see below:

This is my lovely header:
https://dl.dropboxusercontent.com/u/12161070/Screen%20Shot%202016-07-26%20at%2011.23.39.png

This is the option I enable:
https://dl.dropboxusercontent.com/u/12161070/Screen%20Shot%202016-07-24%20at%2001.41.19.png

This is what my header becomes:
https://dl.dropboxusercontent.com/u/12161070/Screen%20Shot%202016-07-26%20at%2011.24.23.png

But now I have a dark sticky:
https://dl.dropboxusercontent.com/u/12161070/Screen%20Shot%202016-07-26%20at%2011.25.00.png

See what I mean? I need more control so I can have a LIGHT main menu and Dark sticky if client chooses 🙂

Re Fonts: Yes I know and for me I don’t mind doing CSS for typography BUT client cannot do this and more and more they want more control. Just letting you know what my clients (users) ask for! Even maybe a style selector drop down in text editor would suffice! just saying 🙂

Re sliders: Hope you bring one out native to theme! The best selling theme ever (salient) nailed the slider, check it out for you next theme 🙂

Hey Bro,

Tried that functions code – not quite working.

In header social – the Snap chat icon missing. In general shortcode in pages, snap chat icon broke. You can see on this page on right below that quote / signature:

http://www.tonicpit.com/ciencia/about/

Can you login and fix that up please? Logins are already provided.

Thanks

Hello,

Snapchat is not showing because it’s icon was added in the new update for font awesome icons. We will include it in our next theme release (probably in one-two weeks). Or you can update it by your own. Download it here http://fontawesome.io/. Place all fonts to the folder /basel/fonts/ and replace this css file /themes/basel/css/font-awesome.min.css. Please make a back up before this operation 🙂

Send us a link to the page with header problem, so we could take a look.

[Author]

Posts