How to change the blockquote styling in modern-portfolio

Community Forums Forums Design Tips and Tricks How to change the blockquote styling in modern-portfolio

This topic is: resolved

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Sabine 1 year ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #76801

    Sabine
    Member
    Post count: 23

    Hi,
    I want to change the blockquote styling to a line on the left border.

    This is the original code in the modern-Portfolio template:

    blockquote::before {
    content: ““”;
    display: block;
    height: 0;
    left: -20px;
    position: relative;
    top: -10px;

    How do I have to change the code that a line on the left side appears and the ” from the content does not show up anymore?

    Thanks in advance for your help!

    #76903

    nutsandbolts
    Keymaster
    Post count: 3202

    The whole blockquote::before section is what places the quotation mark to the left of the block quote. To remove the quotation mark, just remove that entire section from your stylesheet. To add a border on the left, find this (right above the “before” rules):

    blockquote {
    	padding: 24px 64px;
    	padding: 1.5rem 4rem;
    }

    and alter it so it looks like this:

    blockquote {
    	padding: 24px 64px;
    	padding: 1.5rem 4rem;
            border-left: 3px solid #222;
    }

    You might want to change the thickness and/or color but that should get you started.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #76917

    Sabine
    Member
    Post count: 23

    Thanks for your help!

    That’s my final one, which is working;-)

    blockquote {
    	padding-left: 24px;
            padding-left: 1.5rem;
            padding-right: 24px;
            padding-right: 1.5rem;
            margin-left: 24px;
            margin-left: 1.5rem;
            margin-right: 24px;
            margin-right: 1.5rem;
            border-left: 1px solid #888888;
            text-align: left;
           }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.