[Resolved] Spacing, Twitter and Block quotes

[Kerry]

Hi there

I have three unrelated questions for which I have not been able to find answers to in the support or knowledge areas:

1. How do I decrease the space between the header and the copy in my footer widget. I have GP Premium but this is not in the spacing option
2. I would like to change the colour of the line down the side of the Block Quote to a custom colour. Can this be done in the CSS?
3. I would like the reader to be able to tweet my quote in the Block Quotes. Is this code or do I need a plug in. If the latter, do you have a recomendation?

Many thanks

Kerry

By the way your templates and add ons are AWESOME. Seriously. AWESOME!

[Tom]

Hi Kerry,

1. It should be an option – I’ve written it down to add to the Spacing add-on.

For now, you can do this:

.footer-widgets .widget-title {
    margin-bottom: 40px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

2. Absolutely!

blockquote {
    border-color: #222222;
}

3. Had to look it up, but something like this looks promising:

<script>
jQuery(document).ready(function($){
  
	// Tweet blockquote	
	$('blockquote.tweet,div.tweet-quote').each(function(){
		var quote = $(this);
		quote.prepend( '<i class="fa fa-twitter" />' ).append( '<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + quote.text() + '" data-lang="en">Tweet</a>' );
	});
	
});
</script>

Paste that into the wp_footer hook in GP Hooks.

Then add the tweet class to your blockquotes: <blockquote class="tweet">Quote</blockquote>

Hopefully this helps! Glad you’re enjoying the theme 🙂

[Kerry]

Tom, you are awesome. Your support is amazing. I have been going through the support page and knowledge page over the past couple of days and have found so many helpful tips and tools.

Now I should have perhaps explained that I am pretty inexperienced in this game. So…..

I did the paste into the wp_footer hook in GP Hooks as suggested but where am I supposed to add the tweet class to my blockquotes. Sorry – newbie alert
(Essentially what I am trying to achieve is that in the block quote, there is a tweet this button/link and then the quote has a link back to me so the url of the quote via @KerryGoldring. Does this make sense?

Thanks

K

[Tom]

If you find the place in your post where you’re adding a blockquote, click the “Text” tab and you’ll see something like this:

<blockquote>

Replace it with this:

<blockquote class="tweet">

Doing that should allow that javascript to work and add the tweet text.

Let me know if that helps or not 🙂

[Kerry]

Aha.

Ok so it works pretty well and as always I am extremely impressed by your service.
Two cups of coffee coming your way from moi.

But:
-It tweets the page not the quote. I would like it to tweet the quote and also refer back to my twitter name and maybe the page.
-I dont need the image of the little twitter bird – just the words Tweet this.

Related question – what is the font style and size for the block quote – is it my normal content preset font? Alas my little eyes cant tell – it looks different to me but maybe old age and the increased size 🙂

[Tom]

Hi Kerry,

Thanks so much for the coffees! Incredibly generous of you.

Try this to remove the bird:

<script>
jQuery(document).ready(function($){
  
	// Tweet blockquote	
	$('blockquote.tweet,div.tweet-quote').each(function(){
		var quote = $(this);
		quote.append( '<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + quote.text() + ' EXTRA CONTENT IN HERE @YOURHANDLE etc.." data-lang="en">Tweet</a>' );
	});
	
});
</script>

It should take the text of the blockquote and add it to the tweet.

I added “EXTRA CONTENT IN HERE @YOURHANDLE etc.., which you can replace with your own text and twitter handle.

Any chance you can link me to the page so I can see why it’s not pulling the blockquote content?

[Kerry]

Absolute pleasure. I am so dam impressed with the theme, add ons and service – its the least I can do.

Re the script above, I did try it but alas I am too new.

How do I send you a secure link – direct message?

[Tom]

You can email it to support@generatepress.com.

Off to bed right now (early morning tomorrow), but will check first thing.

Thanks! 🙂

[Kerry]

Thanks Tom. Appreciate it. Will send shortly

[Kerry]

Hi Tom

Herewith a link to a post that is using the Twitter block quote (first version).

http://kerrygoldring.com/bubble/

As mentioned, in previous chat, it doesn’t pull through the quote, just the page link. I would like it to pull the quote and also my twitter name. I would also like to remove the bird and just have “Tweet this” (ideally right aligned).

I am currently using the first version of code you gave me as the second version didn’t work.

So grateful for all your help as always. This appears to be my last question at the moment (so you can take a sign of relief :-))

[Tom]

Let’s try this one:

<script>
jQuery(document).ready(function($){
  
	// Tweet blockquote	
	$('blockquote.tweet').each(function(){
		var quote = $(this);
		quote.append( '<a target="_blank" href="https://twitter.com/intent/tweet?url=' + window.location.href  + '&text=' + quote.text() + ' @yourhandle" class="twitter-share-button" data-text="' + quote.text() + '" data-lang="en">Tweet</a>' );
	});
	
});
</script>

[Kerry]

Sorry for the blonde question, but where am I putting this?

[Tom]

You’re replacing the block you already added in the wp_footer hook in GP Hooks 🙂

[Kerry]

Oh yes – too many late nights working!
Tom you are a genius. Thank you thank you for all your help the last few days.

[Tom]

You’re very welcome! Happy to help 🙂

[Author]

Posts