Twenty Seventeen – How to do block quotes in left hand column?

  • Unknown's avatar
    sophieannscakes · Member ·

    Hi
    How can I do block quotes in the left hand column as shown on the demo version? When I do a block quote it just appears in second column where the other text goes.

    Thanks

    Sophie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    baldfreud · Member ·

    Hi there,

    I have looked through the theme’s Overview page (https://wordpress.com/theme/twentyseventeen) and it looks like this option can be only achieved using the CSS and HTML unless I am missing something. Are you familiar with Cascading Style Sheets and HTML?

    You would have to add a class to the blockquote via HTML editor for your page, under the Front Page Section 1, for example, “alignleft”,

    blockquote class="alignleft"

    After you have to add some CSS code, to the newely created class “alignleft”. In the CSS editor you have to add the following code:

    .alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

    This should now display the quote on the left of the second column.

    To find out more about CSS, you can have a look here:

    https://en.support.wordpress.com/custom-design/editing-css/

    And more about HTML, you can find here:

    https://en.support.wordpress.com/advanced-html/

    Please be aware that the CSS panel is available on the Premium and Business plans. If you have a Personal or Free plan you would have to upgrade first.

    Hope this helps.

  • Unknown's avatar
    sophieannscakes · Member ·

    Thank you very much for proving such detailed information. It’s such a shame that this feature is unavailable on the persona plan, which is what I have. I will keep a note of your suggestions, but for the moment this is a brand new website for me, and for a small business and so it would not benefit me to upgrade at this moment in time.

    Thank you for your kind time!

    Have a great day

  • kathrynwp · Staff ·

    There is no need for custom CSS to get a blockquote in the left column.

    They are a feature built into theme, and no coding is required.

    You need to do the following:

    • Add your text
    • Select your text and click the “blockquote” button in the toolbar
    • With the text still selected, click the “left align” button in the toolbar

    If you have any trouble with the process, just let me know and we’ll be sure to get you sorted.

  • kathrynwp · Staff ·

    And if the Visual Editor gives you trouble, you can always switch to HTML view and edit your quote manually, like so:

    <blockquote class="alignleft">
This is my fabulous left-aligned pullquote.

</blockquote>

    The “alignleft” class is already styled in the theme, so there’s no need for you to add any extra custom CSS.

    Let me know how it goes!

  • Unknown's avatar
    sophieannscakes · Member ·

    Kathryn

    Thank you! You have saved the day. I had to do it in HTML as it wouldn’t work for me in visual (never used HTML before, but followed your instructions). I really appreciate your help. Creating my small business website has been a huge learning curve, but so much fun!

    Thanks again!

  • kathrynwp · Staff ·

    Wonderful – glad you got it working! Your site is looking lovely. I just realized those are cupcakes and not flowers – wow, beautiful!

    If you need further help, you know where to find us!

  • Unknown's avatar
    baldfreud · Member ·

    @kathrynwp

    Thanks for the instructions. I was trying to do it per the theme’s instructions and wasn’t able to make the text appear on the left. This is why I have suggested CSS. I can see that I was assigning style instead of class in the blockquotes. And I also had to do it in HTML as the alignleft through the Visual editor assigns style to the paragraph and not the blockquote.

  • The topic ‘Twenty Seventeen – How to do block quotes in left hand column?’ is closed to new replies.