[Resolved] Spacing, Twitter and Block quotes

Home Forums Support Spacing, Twitter and Block quotes

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #157862
    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!

    #157896
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #158257
    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

    #158271
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #158374
    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 🙂

    #158428
    Tom
    Lead Developer
    Lead Developer

    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?

    #158439
    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?

    #158440
    Tom
    Lead Developer
    Lead Developer

    You can email it to support@generatepress.com.

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

    Thanks! 🙂

    #158442
    Kerry

    Thanks Tom. Appreciate it. Will send shortly

    #158655
    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 :-))

    #158682
    Tom
    Lead Developer
    Lead Developer

    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>
    #158691
    Kerry

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

    #158692
    Tom
    Lead Developer
    Lead Developer

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

    #158694
    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.

    #158781
    Tom
    Lead Developer
    Lead Developer

    You’re very welcome! Happy to help 🙂

Viewing 15 posts - 1 through 15 (of 20 total)
  • The topic ‘Spacing, Twitter and Block quotes’ is closed to new replies.