cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
gargis
Community Member

CSS implementation in Canvas text editor

Jump to solution

Hello!

I have a question about adding custom CSS in order to customize the appearance of text in the canvas editor. I want to add pipe separator "|" after items in an unordered list of links.

Does anyone have any idea how to achieve this?

Thanks!

Gargi

Tags (1)
1 Solution

Accepted Solutions
d_ellis
Community Contributor

Ah, I understand. In that case you could achieve the same effect with CSS by the following method:

  1. Add the three links in a single line.
  2. Toggle to HTML view.
  3. Inside each link except for the final one, add this code: style="padding: 0 10px; border-right: 1px solid black;"
  4. In the last link, instead add this code: style="padding: 0 10px;"

The final code will look something like this:

<a id="" class="" style="padding: 0 10px; border-right: 1px solid black;" title="" href="http://www.example.com" target="">Link 1</a><a id="" class="" style="padding: 0 10px; border-right: 1px solid black;" title="" href="http://www.example.com" target="">Link 2</a><a id="" class="" style="padding: 0 10px;" title="" href="http://www.example.com" target="">Link 3</a></p>

View solution in original post

9 Replies
awilliams
Community Champion

Hey  @gargis ​

I don't have an answer for you unfortunately but I am going to share this question in the Canvas Admins​ space where it may get more attention from those who work with custom CSS on a more regular basis can find it more easily.

travis_thurston
Community Champion

 @kenneth_larsen ​, can you give any input on this CSS question?

kenneth_larsen
Community Champion

 @gargis ​, I can probably help, but I am not sure I understand what you mean by adding the pipe character after the items. Do you mean you want the pipe character to the far right? If so, why a pipe character and not a right border? Are you wanting it applied automatically? A screenshot or any additional information about what you want to accomplish would be appreciated.

Hi Kenneth,

Please find attached screenshot of the styling I want to achieve. I want to add Pipe separator "|" after every link except the last one. Also, I want to add it manually in the canvas text editor.CSS.png

d_ellis
Community Contributor

Hi Gargi

You could achieve this effect without CSS, just by typing or copy-pasting a pipe separator between the links while inside the text editor.

Link 1 | Link 2 | Link 3

Unless there is some additional behaviour or formatting that you want to achieve?

gargis
Community Member

Hi Damon,

I am trying to test accessibility of the content and currently the screen reader reads it as "Pipe" if implemented by typing the pipe separator.

I am trying to research if it is possible to achieve this using CSS.

Thanks,
Gargi

d_ellis
Community Contributor

Ah, I understand. In that case you could achieve the same effect with CSS by the following method:

  1. Add the three links in a single line.
  2. Toggle to HTML view.
  3. Inside each link except for the final one, add this code: style="padding: 0 10px; border-right: 1px solid black;"
  4. In the last link, instead add this code: style="padding: 0 10px;"

The final code will look something like this:

<a id="" class="" style="padding: 0 10px; border-right: 1px solid black;" title="" href="http://www.example.com" target="">Link 1</a><a id="" class="" style="padding: 0 10px; border-right: 1px solid black;" title="" href="http://www.example.com" target="">Link 2</a><a id="" class="" style="padding: 0 10px;" title="" href="http://www.example.com" target="">Link 3</a></p>

View solution in original post

 @d_ellis ​ code would look like this (apparently this editor won't display it so I included an image):

Screen Shot 2016-04-04 at 4.21.53 PM.png

And I would agree that this is a better option than a pipe character, especially for accessibility.

gargis
Community Member

Thanks Damon! This works.

Gargi