Special Blockquote Sidebar Design Element : Cidi Labs Support Center

R

Ronald Marx

started a topic almost 4 years ago

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?

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!

R

Ronald Marx

said almost 4 years ago

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!

Kenneth Larsen

said almost 4 years ago

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.

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

Giving you something like this:
Set a 5px solid border for all sides in your color of choice using the Borders for Current Element tool.

Giving you something like this:
Give it a background color using the Colors for Current Element tool

Giving you a finished product that looks something like this:

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.

Hopefully that helps and have a wonderful day.

How can we help you today?