Docs

[itsltd]

Hi,

We’re at http://www.itstrain.co.uk and are looking to implement a better social bar. We have made this: http://www.itstrain.co.uk/Sharer.html but need help configuring page.php in the child theme to make this social bar stick to the bottom of the page.

We don’t want this on the homepage however.

Any way of achieving this?

Thanks in advance 🙂

[Lely]

Hello There,

Thanks for posting in. Please add the following on your child theme’s functions.php file:

function add_custom_footer(){
  
  if ( !is_front_page() ) {
  ?>
<div id="sharer-holder">
		<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.itstrain.co.uk&t=ITS" target="_blank" title="Share on Facebook">
			<div class="sharer-quarter sharer-fb">
				<?php echo do_shortcode('[x_icon type="facebook-square"]'); ?>
			</div>
		</a>
		<a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.itstrain.co.uk" target="_blank" title="Share on Google+">
			<div class="sharer-quarter sharer-gp">
				<i class="fa fa-google-plus fa-1x"></i>
				<?php echo do_shortcode('[x_icon type="google-plus-square"]'); ?>
			</div>
		</a>
		<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fwww.itstrain.co.uk&text=ITS:%20http%3A%2F%2Fwww.itstrain.co.uk&via=itsltd1989" target="_blank" title="Tweet">
			<div class="sharer-quarter sharer-tw">
				<?php echo do_shortcode('[x_icon type="twitter-square"]'); ?>
			</div>
		</a>		
		<a href="mailto:?subject=ITS&body=Industrial%20Training%20Services:%20http%3A%2F%2Fwww.itstrain.co.uk" target="_blank" title="Email us to someone">
			<div class="sharer-quarter sharer-em">
				<?php echo do_shortcode('[x_icon type="envelope"]'); ?>
				</div>
		</a>		
	</div>
  
  <?php
  }
}
add_action('x_before_site_end', 'add_custom_footer');

Then add the following on Appearance > Customize > Custom > Edit Global CSS:

#sharer-holder a{
	color:#fff;
}
#sharer-holder{
	width:100%;
	height:60px;
	margin:0;
	padding:0;
	color:#fff;
}
.sharer-quarter{
	padding-top:14px;
	padding-bottom:14px;
	width:25%;
	text-align:center;
	margin:0;
	float:left;
}
.sharer-quarter:hover{
	opacity:0.8;
	cursor:pointer;
}
.sharer-fb{
	background:#3b5998;
}
.sharer-gp{
	background:#dd4b39;
}
.sharer-tw{
	background:#55acee;
}
.sharer-em{
	background:#00d560;
}
.sharer-quarter i{
  display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:20px;
  
}

Hope this helps.

[itsltd]

Hi,

That does seem to work, but the global A style overrides everything and makes all the links yellow. There’s no custom styling whatsoever.

Any ideas?

[Joao]

Hi There,

Try changing this code

#sharer-holder a{
	color:#fff;
}

for this

#sharer-holder a {
	color:#fff !important;
}

Hope that helps,

Joao

[itsltd]

Hi,

That’s still not working. This is what is happening:

Any thoughts?

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[itsltd]

This reply has been marked as private.

[Jade]

Hi there,

I have logged in using the details you have provided but I get the error No sufficient permissions.

Kindly double check so that we could assist you further.

[itsltd]

Hi,

Sorry about that. I’ve added you as an administrator now.

[Lely]

Hi There,

I’ve added the code on you child theme’s functions.php file to check. The issue is because you have CSS syntax error:
On this part of your custom CSS:

.entry-author-link,
.entry-permalink,
.entry-date,
.entry-meta,
.p-meta,
.entry-footer,
.dp_pec_event_page_nav,
.dp_pec_date_event_map_overlay,
dp_pec_event_photo,
.pec_description,
.dp_pec_date_event_map_iframe,
dp_pec_event_description_full,
dp_pec_event_description_short .dp_pec_grid_wrapper li.dp_pec_grid_event span.pec_date,
.screen-reader-response,
.widget_eventscalendarupcomingevents p,
.dp_pec_event_description,
.dp_pec_accordion_wrapper .pec_event_page_custom_fields,
.dp_pec_map_infowindow span.dp_pec_map_location,
.dp_pec_map_infowindow span.dp_pec_map_phone,
.dp_pec_map_infowindow span.dp_pec_map_category,
.dp_pec_map_infowindow span.dp_pec_map_link {
    display: none;
}

You have missing period (.) at the start of the following line:
dp_pec_event_photo,

dp_pec_event_description_full,
dp_pec_event_description_short .dp_pec_grid_wrapper li.dp_pec_grid_event span.pec_date,

Then this part:

.masthead-stacked .x-brand {
    float: left !important;
    @media (max-width: 800px) 
{
.x-brand {
  margin: 0 auto;
  width: auto;
  /* Change WIDTH accordingly */

  height: 90px;
  /* Change HEIGHT accordingly */

  margin-top: 2px;
  background-size: 250px 90px;
  /* Width x Height - Adjust accordingly */
  }

Was updated to this:

.masthead-stacked .x-brand {
    float: left !important;
}
@media (max-width: 800px) {
.x-brand {
  margin: 0 auto;
  width: auto;
  /* Change WIDTH accordingly */

  height: 90px;
  /* Change HEIGHT accordingly */

  margin-top: 2px;
  background-size: 250px 90px;
  /* Width x Height - Adjust accordingly */
  }
}

You have two missing closing curly brace. Since those errors occur before the footer CSS, it will cause it not work.

It is now working on your site. Please check.

Always,
X

[itsltd]

Ah!

I knew it would be something simple like that! You guys are brilliant – thanks for your help.

[Lely]

You’re welcome!

Cheers!

[Author]

Posts