Forum Discussion

allisonn's avatar
allisonn
Genius
10 years ago

"Read more" link CSS

Forgive me if this sounds like a dumb quesiton, I am the middle man for our developer :)

 

OOB, there is a "Read More" link on the /bg-p/ on I think the articles component when you use the article teaser. As far as I know there is not any other component that uses this, but I wanted to ask the experts. So can any one tell me if this class is used anywhere else OOB?

 

<a class="lia-link-navigation read-more-link">

  • RobertT's avatar
    RobertT
    10 years ago

    Hi allisonn, 

     

    Looking into it this may be quite tricky, there's possibly a way to do it using jQuery however it wouldn't be the best solution and isn't guaranteed to work across all browsers properly. Unfortunately the HTML structure for that part of the community makes any solution quick tricky.

     

    While it isn't ideal that the Read More link is on a separate line, the effort involved and any solution may outweigh the benefits of attempting to move it currently. A JavaScript solution may work but there can be side-effects such as broken experience for some users if the browser doesn't support it properly. JavaScript also impacts page load times and performance when you manipulate the structure of a page.

     

     

  • RobertT's avatar
    RobertT
    Boss
    10 years ago

    Hi allisonn, 

     

    I believe that is generic CSS so there's a high chance that the class will be re-used for Read More links elsewhere in the community.  If you're worried about targetting that link for that component only where it displays without affecting any other "Read More" links then I'd recommend targetting using the name of the component.

     

    There are a couple options, you can target based on a specific page if you only want it to affect one page in the community by getting the page name from the style class attached to the <body> tag in the HTML source.

     

    Alternatively if it's just that component werever it displays in the community regardless of page, try scoping the CSS rule down to the component name an example for the blog page would be:

     

    #lia-body .lia-content .lia-component-articles .lia-panel-message .lia-message-body .read-more-link { insert style rules here }

     

    You may need to tweak the CSS above slightly but this should work for you.

     

    Let me know if that helps.

     

    • allisonn's avatar
      allisonn
      Genius
      10 years ago

      Thanks RobertT I have never seen it anywhere else on the Community other than that feed, but it could be hiding in the shadows somewhere. The developer was trying to do some Javascript magic so it would be on the same line as the last line of text instead of the line below it. If you have another suggestion on how to achieve this without building a custom component, happy to hear it :)

      • RobertT's avatar
        RobertT
        Boss
        10 years ago

        Hi allisonn, 

         

        Looking into it this may be quite tricky, there's possibly a way to do it using jQuery however it wouldn't be the best solution and isn't guaranteed to work across all browsers properly. Unfortunately the HTML structure for that part of the community makes any solution quick tricky.

         

        While it isn't ideal that the Read More link is on a separate line, the effort involved and any solution may outweigh the benefits of attempting to move it currently. A JavaScript solution may work but there can be side-effects such as broken experience for some users if the browser doesn't support it properly. JavaScript also impacts page load times and performance when you manipulate the structure of a page.