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 ho...
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>

     

     

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