Is there a way to move where the comments section is on a page?

[aaron wideen]

Hi,

Thanks for taking a look at this!

I am working with zen as my theme and I think this might be more of a core confluence question. I am looking to move the likes and comments section to another location on the page...

Is this at all possible? I basically want to pick up the section and drop it in another location on the page...

Thanks,

Aaron

[Darryl Duke · Accepted solution]

Hi Aaron,

At this point, the only option is to hide/show the likes/labels and comments sections. The rationale for that is the lengthy (potential) nature of the comments section.

What did you have in mind?

Thanks,
Darryl

[aaron wideen]

hey darryl,

thanks for the response, I was looking to put them into one of the zen-sections I had on my page. I have a tabbed section set up and wanted one of the tabs to have the comments section in it.

Thanks,

aaron

[Darryl Duke]

Interesting idea. I would be very leery of trying to move the comments section . . . it's a complex beast with lots of functionality attached, not the least is the embedded rich text editor, and lots of URL forms to link to/highlight individual comments, which would conflict with the tab sections (and who knows what).

We've managed to stay sane over the years having learned not to wrestle too much with the comments infrastructure. :-)

[aaron wideen]

sounds good to me. Its not necessary that its moved though just thinking out loud.

Thanks!

[JamieA]

Here is an example of making some tweaks with JS... comments explain what's going on. Whilst what CharlesH says is correct, you have to bear in mind that there is no published API for the javascript side, so element names change between versions, and that some of the elements are loaded by javascript, so you can run into timing issues.

Anyway, experimentation using the chrome console is definitely required to get what you want.

(function($){
    $(function () {
        if ($("meta[name='ajs-space-key']").attr('content') == 'XYZ') {

            // Don't float the logo left, remove the bottom margin, make the title a bit smaller
            $("#title-heading img.logo").css("float", "none").css("margin-bottom", "0.0em");
            $(".pagetitle").css("font-size", "20px");

            // move title from span to div so we get a break
            var title = $("#title-text").html();
            $("#title-text").replaceWith("<div id='title-text'>" + title + "</div");

            // Move the page info section below the labels.
            // Don't use any other element IDs as most don't exist when this runs
            $("#comments-section").before($(".page-metadata"));
            $(".page-metadata").css('float', 'right');
        }
    });
})(AJS.$);

[CharlesH]

This is possible with the aid of jQuery, a JavaScript library. Confluence pages are well structured, so plenty of hooks (named elements, and those with specific classes) to help pick out regions and then move them elsewhere. Methods like append() and appendTo() will be helpful - http://api.jquery.com/appendTo/

You'll need the html macro to be enabled to be able to write the script tag and the jQuery statements within it.

[Darryl Duke]

While this is true with most page elements, I definitely would NOT recommend this approach with the comments feature. Please see note above.

Cheers,
Darryl