Page tree
Skip to end of metadata
Go to start of metadata


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.


We created a collection of code snippets. Feel free to use them as an inspiration to customize your theme.

Function

Valid for Confluence

Content Navigation / Toolbar

Display content navigation / toolbar icons without description 

 Click here to expand...

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

 Click here to expand...

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

 Click here to expand...
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

 Click here to expand...

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)

 Click here to expand...
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)

 Click here to expand...

/* 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)

 Click here to expand...

< 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;
}
 Click here to expand...

> Version 4.16.0

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

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

 Click here to expand...

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

 Click here to expand...
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

 Click here to expand...
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

 Click here to expand...

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

Hide Confluence standard category "personal" in a profile 

 Click here to expand...

 

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.

 Click here to expand...
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

 Click here to expand...
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)

 Click here to expand...

< 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)

 Click here to expand...
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); 

 Click here to expand...

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

 Click here to expand...
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)

 Click here to expand...
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

 Click here to expand...

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