[AngelaParticipant]

Hi – I’m using Integrity and editing in Cornerstone. The other discussions have not helped me. I am wondering how to create vertical line separators between columns as in this website:

http://prntscr.com/88ef10

Thanks for your help,

Angela

[LelyModerator]

Hello Angela,

Thanks for the screenshot. The vertical line separator is a borderline for the content. Please provide us with your URL and complete description where you want to add a vertical line. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[AngelaParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating! you can set border-right: 2px solid #f54 for the left column for this page. See http://prntscr.com/88kzzg

You can just select the column on your Cornerstone editor and place the inline style – http://prntscr.com/88l0fh

Do the same for every page.

Hope this helps.

Cheers!

[AngelaParticipant]

Seriously. Learning so much. Love it.

Thanks!

[Prasant RaiModerator]

You are most welcome 🙂 .

[bakParticipant]

Hi, I am using the above code border-right: 2px solid #f54 to create a separatio between 3 columns but it does not look really the way I want

1) How is it possible to have the divider line in the middle of two columns rather than to the right of the column or image?
2) How can I adjust the length of the divider line?

Thanks

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[bakParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the login credentials. To have a separator for your columns, please add a custom column-with-border class in your column and insert the following custom css in the settings tab, Settings > Custom CSS

.column-with-border:after{
  content: "";
  background-color: red;
  position: absolute;
  top: 0;
  right: -6%;
  width: 1px;
  height: 200px;
}

.column-with-border:last-child:after{
  display: none;
}

http://prntscr.com/a7n7c5

You can see this code live in action in the test page we have created in your site. With this code, you control the thickness and height of the border by changing the width and height in the custom css code we have provided.

Please let us know if this works out for you.

[bakParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

It doesn’t apply because you only added a custom class to the columns and you forgot to insert the custom css in in the settings tab, Settings > Custom CSS

.column-with-border:after{
  content: "";
  background-color: red;
  position: absolute;
  top: 0;
  right: -6%;
  width: 1px;
  height: 200px;
}

.column-with-border:last-child:after{
  display: none;
}

http://prntscr.com/a80n0o

We would loved to know if this has work for you. Thank you.

[bakParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi Bak,

Please delete this line:

===============================================

Let us know how it goes!

[Author]

Posts