How can we help you today?

Start a new topic
Discussions DesignPLUS - Design Tools for Canvas Discussions Tips and Tricks

Special Blockquote Sidebar Design Element

I would love the ability to create this little sidebar element on ALL sides of a blockquote element. Is there a Tips&Tricks somewhere here that explains how this would be done?

image

I think the padding and overflow traits help to create this partial border; what inline styling can be applied to shift the border to the other sides?


Thanks!

2 CommentsSorted by Newest First
I'm feeling a bit like Homer Simpson right now. Don't know why I didn't relate the border formatting instead of what looked to me as layering the paragraph and blockquote elements, and then offsetting one from another. D'oh, not really. The effect created by this simple formatting is quite clever actually, and I'll be using it to great effect in many of our text-rich courses. Thanks for the drilled down primer, Kenneth!

 

Hi Ron,


That effect is achieved by adjusting the border and background colors of a blockquote. The same effect can be achieved with any element. A basic blockquote has a left padding of 15px (which accounts for the spacing you are seeing) and a solid left border of 5px.


Let's say that we want to make a paragraph that looks something like the screenshots you supplied.

  1. Create the paragraph

    image

  2. Give it 15px of padding on all sides using the Margins & Padding for Current tool in the Customize the Style section of the tools

    image
    Giving you something like this:

    image

  3. Set a 5px solid border for all sides in your color of choice using the Borders for Current Element tool.

    image


    Giving you something like this:

    image


  4. Give it a background color using the Colors for Current Element tool

    image
    Giving you a finished product that looks something like this:

    image


Is that what you were envisioning? The actual CSS for that looks like this:

style="padding: 15px; border-width: 5px; border-style: solid; border-color: rgb(165, 209, 8); background-color: rgb(44, 115, 190); color: rgb(255, 255, 255);"

If you only want certain sides to have borders, you can set the borders for individual sides using the Borders for Current Element tool.

image

Hopefully that helps and have a wonderful day.


Login or Signup to post a comment
More topics in Tips and Tricks