How do I add a div to the author section?

Hi PerBonomi 

the only thing I can think about is creating a component author@override which would look like this:

<#assign msgId = env.context.message.id />
<@delegate />
<div id="custom-${msgId}" style="diplay:none">your content here</div>
<@liaAddScript>
;(function($) {  
   LITHIUM.Loader.onLoad(function(){
      $("lia-message-view message-uid-${msgId} > .lia-message-author-rank").append("#custom-${msgId}");
     $("custom-${msgId}").css("display", "block");
   });

})(LITHIUM.jQuery);
</@liaAddScript>

 Basically the idea is to inject the custom content as a hidden div and then use jQuery to place it where you want and make it visible again.

I haven't tested the code so it's very likely you will get errors but I hope it gives you an idea how I would have tackled the problem.

Thanks,

Nico

Wow, that looks very nifty. Thanks NicoB ! I'll be giving that a good spin!

No Problem PerBonomi 

Let me know how it goes ;)

Nico

So, this code adds the custom field below the main author info. I wonder if there is a template to override the entire original author section?

Hi PerBonomi 

If I understand your question correctly, you can remove the <@delegate/> directive so that your component will override the author component completely.

I would be very careful doing this however, since you might lose some OOB functionality (i.e. badges or future functionalities).

Thanks,

Nico

Yeah, I probably don't want to do this. This thing is driving me nuts :)

I was trying before, to move the element with jquery, but no matter what kind of selector Iuse, it just won't budge.

I now have this:

<#assign msgId = env.context.message.id />
<@delegate />
<div id="custom-${msgId}" style="display:none">your content here</div>
<@liaAddScript>
;(function($) {  
   LITHIUM.Loader.onLoad(function(){
      $("#messageview .message-uid-${msgId}").find(".lia-message-author-rank").append("#custom-${msgId}");
     $("#custom-${msgId}").css("display", "block");
   });

})(LITHIUM.jQuery);
</@liaAddScript>

 I've tried with parent(), children(), first(), this().parent().;anything I could think of, it just doesn't move an inch. It almost feels like the author section is getting some magical protection.

HI PerBonomi 

I just spent a good hour trying to fix the same issue :)

Try replacing this:

$("#messageview .message-uid-${msgId}").find(".lia-message-author-rank").append("#custom-${msgId}");

 with this:

$("#messageview .message-uid-${msgId}").find(".lia-message-author-rank").append($("#custom-${msgId}"));

You're basically passing a string to append while you should pass a jQuery object.

Nico

Hmm, it's still not moving, but I think your last comment has gotten me closer to figuring it out. Thanks for the help :)

It's probably the selector which is not picking up the right element... unfortunately it's a trial and error exercise with DOM :)

Good luck!!

Nico

Got it! And I couldn't have done it without your help.

<#assign msgId = env.context.message.id />
<@delegate />
<div id="custom-${msgId}">your content here</div>
<@liaAddScript>
;(function($) {  
   LITHIUM.Loader.onLoad(function(){
      $("#custom-${msgId}").prev().find(".lia-message-author-rank").append($("#custom-${msgId}"));
   });

})(LITHIUM.jQuery);
</@liaAddScript>

 Thank you thank you.