Forum Discussion

rosdyana's avatar
rosdyana
Ace
2 years ago

Adding link to post editor page

Hello,

 

Is there any way to add a new link in the sidebar of the post editor page?

as far as I know, this component id name is "editor".

We tried to override this component, but we don't know how to add a href link in the sidebar of this editor 

 

 

FreeMarker
UI & Design
  • Akenefick's avatar
    Akenefick
    2 years ago

    It's not possible to directly edit or add to a Khoros component. You can add your link to your overridden component or create a separate custom component with your link and add that to the Post Page under the editor component. Then you would have to move it where you want with CSS.

    For example, in your overridden component you could do something like this:

    <@delegate />
<a href="#" id="my-link">Your link here!</a>

<style>
    #my-link {
        position: absolute;
        right: 90px;
        bottom: 65px;
        font-size: 24px;
    }
</style>

     

     

3 Replies

Sort By
  • Akenefick's avatar
    Akenefick
    Genius
    2 years ago

    It's not possible to directly edit or add to a Khoros component. You can add your link to your overridden component or create a separate custom component with your link and add that to the Post Page under the editor component. Then you would have to move it where you want with CSS.

    For example, in your overridden component you could do something like this:

    <@delegate />
<a href="#" id="my-link">Your link here!</a>

<style>
    #my-link {
        position: absolute;
        right: 90px;
        bottom: 65px;
        font-size: 24px;
    }
</style>

     

     

  • rosdyana's avatar
    rosdyana
    Ace
    2 years ago

    Thanks, Andrew, your answer gives me an idea of how to solve it.

    Cheers!

  • rosdyana's avatar
    rosdyana
    Ace
    2 years ago

    This is my solution

    1. Create a custom component with this script

    <div class="lia-support-model">
    <div class="lia-quilt-column-side-content">
   <div class="lia-panel lia-panel-standard">
   <div class="lia-decoration-border">
   <div class="lia-decoration-border-top"><div> </div></div>
<div class="lia-decoration-border-content"><div><div class="lia-panel-heading-bar-wrapper"><div class="lia-panel-heading-bar"><span aria-level="3" role="heading" class="lia-panel-heading-bar-title">Inquiry service</span></div></div><div class="lia-panel-content-wrapper"><div class="lia-panel-content"><ul>
    <li><a href="#" target="_blank">LINK 1 HERE</a></li>
    <li><a href="#" target="_blank">LINK 2 HERE</a></li>
</ul></div></div></div></div><div class="lia-decoration-border-bottom"><div> </div></div></div>
   </div>
</div>
</div>
<@liaAddScript>
;(function ($) {
    $(".lia-quilt-column-alley.lia-quilt-column-alley-right").eq(1).append($(".lia-support-model"))
})(LITHIUM.jQuery);
</@liaAddScript>

     2. Open the layout of PostPage, and add a custom component below the editor component