Application

The listed code snippets are additions and bugfixes (related to third party plugins) for the Linchpin Theme Plugin.

In order to use these functions/bugfixes, copy and paste the according code snippets into the custom CSS and custom JS fields of the Linchpin Theme Plugin.

 

Disclaimer

Use these code snippets at your own risk!

//SEIBERT/MEDIA does not assume any liability for the correctness / operational capability of the offered code snippets.


Documentation's navigation




On this page



Function

Valid for Confluence

Content Navigation / Toolbar

Display content navigation / toolbar icons without description 

JS
// Display content navigation / toolbar icons without description
(function($) {  
  var metroTile = {    
    dom: function() {      
      this.spans = $(".content-navigation .aui-button > span");      
      this.underlines = $(".content-navigation .aui-button > span > u");    
    },
        modify: function() {      
      this.dom();      
      this.spans.contents().filter(function() {        
        return this.nodeType == 3;      
      }).remove();      
      this.underlines.remove();    
    }  
  }  
  $(document).ready(function() {    
    metroTile.modify();  
  });  
  $("body").on("DOMSubtreeModified", ".content-navigation", function() {    
    metroTile.modify();  
  });
})(AJS.$)

Fix for wrong-positioned "share"-popup in content navigation / toolbar when using the Comala Workflows (Comala Document Management) plugin

CSS
/* Fix for wrong-positioned "share"-popup in content navigation / toolbar when using Comala Workflows-plugin */
div#inline-dialog-shareContentPopup > .aui-inline-dialog-contents {
    margin-left: -50px;
}
FROM 5.10

Navigation Menu Editor

Set column count and width for submenus of the "Navigation Menu Editor" plugin

JS
// Set column count and width for submenus of "Navigation Menu Editor"-plugin
SeibertMedia = (typeof SeibertMedia === "undefined") ? {} : SeibertMedia;
SeibertMedia.MenuEditor = SeibertMedia.MenuEditor || {};
SeibertMedia.MenuEditor.FlyoutColumnWidth = 450;
SeibertMedia.MenuEditor.FlyoutMaxColumns = 2;


FROM 5.10

Login

Set background color / image on login screen via Linchpin Theme customCSS

Examples

YOUR BASE64 IMAGE PATH: data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
YOUR HEX CODE IMAGE COLOR: #000000 for black background
CSS
/* Set background color / image on login screen via Linchpin Theme customCSS */
html body.login {
 background: url("YOUR BASE64 IMAGE PATH") no-repeat center center fixed; /* for example "data:image/jpeg;base64,/9j/4AAQSkZJRgAB..." */
 background-color: YOUR HEX CODE IMAGE COLOR; /* for example #000000 for black background */
 background-size: cover!important;
}

FROM 5.10

Dashboard

Hide unintentional scrollbars from dashboard items when using sections (e.g for the Cover Stories macro)

CSS
/* Hide unintentional scrollbars from dashboard items when using sections */
body.dashboard .confluence-dashboard .wiki-content .innerCell { 
	overflow: visible; 
}

Hide third party web panels in welcome message (dashboard)

/* Remove unintentional web panels below welcome message on dashboard */
.confluence-dashboard ul#web-panels {
    display: none;
}

Hide the task macro on the dashboard (Comala Document Management plugin)

< Version 4.16.0

CSS
body.dashboard #welcome-message > .section-title.welcome-message + table.awpdashboard {
    display: none;
}

body.dashboard #welcome-message > .section-title.welcome-message {
    display: none;
}

> Version 4.16.0

CSS
body.dashboard .awpdashboard{
 display: none; 
} 

Hide "Invite user" & "Create space" buttons on the dashboard

CSS
body.dashboard .confluence-dashboard aside.content-sidebar .dashboard-buttons {
	display: none;
}

 FROM 5.10

Linchpin Sidebar

Function: A click outside of the Linchpin Sidebar will close it

JS
"use strict";
var SeibertMedia;
(function (SeibertMedia) {
    var misc;
    (function (misc) {
        var SidebarAutoClose = (function () {
            function SidebarAutoClose() {
                this.$sidebar = $("#linchpin-sidebar-container");
            }
            SidebarAutoClose.prototype.registerHandler = function () {
                var _this = this;
                $(document).click(function (e) {
                    _this.closeIfNecessary(e);
                });
            };
            SidebarAutoClose.prototype.closeIfNecessary = function (e) {
                AJS.debug("isClickOutsideOfLPSidebar " + this.isClickOutsideOfLPSidebar(e));
                AJS.debug("isOverlayVisible " + SidebarAutoClose.isOverlayVisible());
                AJS.debug("isSidebarOpened " + SidebarAutoClose.isSidebarOpened());
                AJS.debug("isClickInAuiDialog " + SidebarAutoClose.isClickInAuiDialog(e));
                if (this.isClickOutsideOfLPSidebar(e) && !SidebarAutoClose.isOverlayVisible() && SidebarAutoClose.isSidebarOpened() && !SidebarAutoClose.isClickInAuiDialog(e)) {
                    this.$sidebar.find(".menu-item.active-tab").click();
                }
            };
            SidebarAutoClose.prototype.isClickOutsideOfLPSidebar = function (e) {
                return !$.contains(this.$sidebar.get(0), e.target);
            };
            SidebarAutoClose.isOverlayVisible = function () {
                var attrAriaHidden = $("body > .aui-blanket").attr("aria-hidden");
                var overlayVisibility = $("body > .aui-blanket").is(":visible");
                return !(typeof attrAriaHidden === "undefined" || attrAriaHidden == "true" || !overlayVisibility);
            };
            SidebarAutoClose.isSidebarOpened = function () {
                return $("#linchpin-sidebar .slidebar.sidebar-opened").length > 0;
            };
            SidebarAutoClose.isClickInAuiDialog = function (e) {
                return ($(e.target).parents(".aui-layer.aui-dialog2").length > 0);
            };
            return SidebarAutoClose;
        }());
        misc.SidebarAutoClose = SidebarAutoClose;
    })(misc = SeibertMedia.misc || (SeibertMedia.misc = {}));
})(SeibertMedia || (SeibertMedia = {}));
// initialize
AJS.toInit(function () {
    new SeibertMedia.misc.SidebarAutoClose().registerHandler();
});

Hide left sidebar and set content to full width

CSS
/* hide sidebar */
.ia-splitter-left {
    display: none !important;
}
#splitter-content {
    left: 0 !important;
    width: 100% !important;
}
body:not(.login) div#main {
    margin-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
div#footer {
    margin-left: 0 !important;
}
 

FROM 5.10

Profile

Hide the "Activity" macro in a profile

CSS
/* hide "activity-stream" on profile page */
body.profile #profile-status-list {
  display: none;
}

Hide Confluence standard category "personal" in a profile 


CSS
/* hide "personal-stream" on profile page */
body.profile #cup-profile #confluence-data {
  display: none;
}

Indention of "text combinations" and "text choice" in "profile" when Comala Workflows (Comala Document Management) is installed.

CSS
.page-item.profile-main > form.aui .group {
	padding: 4px 0 4px 145px;
 }

Fixes missing profile edit button on profile page for CUP 2.0

CSS
/* CUP2.0 Profil-Button Fix */
body.profile #main #main-header { 
   display: block !important;
}

body.profile .pagetitle { 
   display: none;
}
 

FROM 5.10

Bugfixes for third party plugins

Show Comala Workflow (Comala Document Management) tabs (bug: will not be shown with sidebar on)

< Version 4.17.1 (with Comala Workflows (Comala Document Management) 4.17.1 this bug is fixed!)

JS
// Bugfix for missing Comala Workflow tabs when Linchpin Sidebar is activated
// Set class "active-pane" to first Comala workflow tab-pane
(function () {
var ComalaWorkflowHelper = function () {
/**
* slug helper
**/
var findGetParameter = function (parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
this.currentTab = findGetParameter('tab');
this.tabAssignments = {
states: '#tabSTATES',
triggers: '#tabTRIGGERS',
markup: '#tabMARKUP'
}
this.repair = function () {
var param = findGetParameter('tab');
var paneSel = this.tabAssignments[param];
var $pane = $('.cw-designer__tabs ' + paneSel);
$pane.addClass('active-pane');
console.log($pane);
}
};
AJS.toInit(function () {
if ($('.cw-designer__tabs').length > 0) {
var helper = new ComalaWorkflowHelper();
helper.repair();
}
})
}())

Sharepoint Connector (1.9.8, changes quick search drastically)

CSS
#linchpin-header-inner #header #header-right-panel {
	width: 683px;
}

#linchpin-header-inner #header-right-panel #quick-search-sharepoint-option {
	margin-left: 20px;
}

#linchpin-header-inner #header #sharepoint-search-query {
    float: left;
    height: 35px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    font-size: 18px;
    width: 278px;
    padding: 0;
    padding-left: 5px;
    padding-right: 37px;
  	background-color: white;
  	background-position: 260px 10px;
}

#linchpin-header-inner #header #quick-search .quick-nav-drop-down.aui-dd-parent {
margin-top: 26px;
}
#linchpin-header-inner #header #quick-search :-ms-input-placeholder {
	color: #000;
}

Fixed Linchpin Sidebar when using Content Formatting for Confluence Plugins (v5.1); 

This snippet protects aui classes of the Linchpin Sidebar from changes by "Content Formatting for Confluence" plugin.

JS
// protects aui classes in Linchpin Sidebar from beeing changed by "Content Formatting for Confluence" plugin.
(function() {
         AJS.toInit(function () { 
             new preventStylesFromModule('com.adaptavist.confluence.contentFormattingMacros:aui-tabs-resources', ['#sidebar-tabs', '#tabs-app-center', '#tabs-favorites']).run(); 
})

    var preventStylesFromModule = function (moduleKey, preserveSelectors) {
        var $badCss = $("link[href*='" + moduleKey + "']");
        var concatedPreserveSelector = ":not(" + preserveSelectors.join("):not(") + ")";

        var useSaveStyles = function () {
            var newStylesheet = "";
            var oldLength = document.styleSheets.length;
            for (i = 0; i < oldLength; i++) {
                var sheet = document.styleSheets[i];
                if (!sheet.href) {
                    continue;
                }
                if (sheet.href.indexOf(moduleKey) > -1) {
                    var oldLength2 = sheet.cssRules.length;
                    for (j = 0; j < oldLength2; j++) {
                        var rule = sheet.cssRules[j];
                        var newRule = nopeify(rule.cssText, rule.selectorText, concatedPreserveSelector);
                        newStylesheet += newRule;
                        $badCss.remove();
                    }
                    $("body").append("<style>/*Protected Styles from " + moduleKey + "*/" + newStylesheet + "</style>");
                }
            }
        };
        var nopeify = function (cssText, selectorText, preserveSelector) {
            var strippedCss = cssText.replace(selectorText, "");
            var selectors = selectorText.split(",");
            for (i = 0; i < selectors.length; i++) {
                selectors[i] = selectors[i] + preserveSelector;
            }
            return selectors.join(',') + strippedCss
        };
        return {
            run: function () {
                useSaveStyles();
            }
        }
    };
})();

Correction of gaps, concision and color in the Team Calendar plugin

CSS
/* Optical improvement of team calendar plugin running within Linchpin Theme Plugin*/ 
div.plugin-calendar .sub-calendar-panel .subcalendar-item .subcalendar-name .ellipsis_text {
  width: 100px!important;
}

div.plugin-calendar .sub-calendar-panel .subcalendar-dropdown-menu {
  right: 50px!important;
}

div#navigation.content-navigation.calendar-navigation-buttons {
  margin-right: 0px;
}
 
div.plugin-calendar .sub-calendar-panel .subcalendar-item .subcalendar-name.header-color {
    color: __globalLinkColor__!important;
}
 

FROM 5.10

Added footer links (for example for "Polls" plugin)

JS
/* insert a custom link in the second footer column */
(function(ajs) {
    var footerAppend = {
        init: function() {
            this.dom();
            this.render();
        },
        dom: function() {
            this.$list = $("#footer #footer-navigation-inner table td:nth(2) ul");
            this.$item = '<li><a id="polls-link" href="/polls/listpolls.action" class=" aui-nav-imagelink" title="View your polls"> <span>Polls</span> </a></li>';
        },
        render: function() {
            this.$list.append(this.$item);
        }
    };
    ajs.toInit(function() {
        footerAppend.init();
    })
})(AJS)
 

FROM 5.10

Include a Confluence page to a footer column

Assigns a Confluence page to a footer column (column 0-3).
Configurable at the marked place "this.assignments". The pages have to exist (no bug-fixing at this point).

JS
/* Page-Include for Footer
   configure with change of this.assignments
   you can do multiple assignments.
   in this example we assign the first footer column (colId: 0) the page with the Id 1015814. 
*/
(function(ajs, $, Confluence) {
    "use strict";
    var footerPageAssign = {
        config: function() {
                /**
                * CONFIGURE HERE!
                * colId (0-3)
                * pageId (valid pageId)
                */
            this.assignments = [
                {colId: 0, pageId: 1015814}
            ];
        },
        init: function() {
            this.config();
            this.vars();
            this.getPageContents();
        },
        vars: function() {
            this.baseUrl = Confluence.getBaseUrl();
            this.$footer = $("#com-atlassian-confluence #footer");
            this.$footerColumns = this.$footer.find("td");
            this.pageContents = {};
            this.pageParsedContents = {};
        },
        getPageContents: function() {
            var self = this;
            var promises = [];
            for (var i = 0; i < this.assignments.length; i++) {
                (function($, self, i) {
                    var pageID = self.assignments[i].pageId;
                    $.get(self.baseUrl + "/rest/prototype/1/content/" + pageID, function(data) {
                        var pageBody = $(data).find("body")[0].textContent;
                        var pageId = $(data).find("content")[0].getAttribute("id");
                        self.parsePageContents(pageBody, pageId, i);
                    })
                })($, this, i);
            }
        },
        parsePageContents: function(pageBody, pageId, callNo) {
            var self = this;
            $.ajax({
                url: self.baseUrl + '/rest/api/contentbody/convert/view',
                type: 'POST',
                data: JSON.stringify({
                    "value": pageBody,
                    "representation": "storage",
                    "content": {
                        "id": pageId
                    }
                }),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function(res) {
                    self.pageParsedContents[pageId] = res.value;
                    if (callNo == self.assignments.length-1) {
                        self.modifyColumns();
                    }
                },
                error: function(res) {
                    ajs.debug("Bad thing happend! " + res.statusText);
                }
            });
        },
        modifyColumns: function() {
            for (var i = 0; i < this.assignments.length; i++) {
                var colId = this.assignments[i].colId;
                var pageId = this.assignments[i].pageId;
                var $col  = this.$footerColumns.eq(colId);
                var html  = this.pageParsedContents[pageId];
                $col.html(html);
            }
        }
    };
    AJS.toInit(function(){
      footerPageAssign.init();  
    })
})(AJS, AJS.$, Confluence);
CSS
#footer #footer-navigation td {position: relative; }

 

FROM 5.10








Looking for an alternative in the Cloud? 

Besides offering apps like Linchpin Intranet Suite, that is available for Atlassian Data Center, we also have apps for Confluence Cloud in our portfolio.

Like Mantra, the intranet for Confluence Cloud, developed by our joint-venture AppAnvil (known for hits like Aura & Karma).

Test the intranet for Confluence Cloud now for free: 


Discover Mantra


This page was last edited on 06/05/2024.