How to put all page content in center layout (including title and breadcrumbs)

[Jordan Packer]

I'm trying to replicate a few of the CSS styling features of the old Atlassian documentation (like this page, for example: https://confluence.atlassian.com/display/BAMBOO044/Getting+started+with+Java+and+Bamboo). I've figured out most things, but one thing that I can't figure out is how to get all of the page content in the center. I know that I can edit a page and choose different layouts, but that only applies to the content and not the title/breadcrumbs. How do I get it to look just like the Atlassian documentation with everything in the center?

image2015-12-14 15:56:49.png

Update

Here is the CSS I have applied to my space:

@import url(https://fonts.googleapis.com/css?family=Oswald);  
  
#title-text a{  
    font-family: 'Oswald', sans-serif;  
    font-size: 48px;  
    color: #3B73AF !important;  
}  
  
.page-metadata{  
    opacity: 0;  
    transition: opacity .25s ease-in-out;  
    -moz-transition: opacity .25s ease-in-out;  
    -webkit-transition: opacity .25s ease-in-out;  
}  
  
.page-metadata:hover{  
    opacity: 1.0;  
}  
  
#main{  
    margin: 0 auto;  
    width: 940px;  
    border: 0;  
    padding: 20px;  
    min-height: 40em;  
    clear: both;  
    background: white;  
    display: block;  
    position: relative;  
}

And here is what my "main" div looks like:

image2015-12-15 9:7:55.png

And yet I want it to look like this:

image2015-12-15 9:9:13.png

Why is it that theirs makes space for the left navigation panel and mine doesn't?

[Thomas Sherman]

I've updated my answer in case you want to collaborate on getting something functional in place.

[Thomas Sherman]

I've been trying to do the same thing and I don't think it is possible without a ton of work. The left hand sidebar uses javascript to constantly reposition itself. In addition, a lot of the CSS seems to be very old. Tons of positioning is done with absolute divs that are then positioned via specific top/left/right/bottom values. For example, the sidebar is composed of three absolutely positioned divs that encompass the space page tree, space tools, and draggable sizer.

I think your best bet is to edit the Main Layout, remove the lefthand sidebar, and then add it back in using your own code. Then center your layout. Even that caused me problems though since the upper toolbar and page edit tools, for lack of a better term, just behave insanely. I'm guessing a hacked positioning fix via javascript is at fault again here. 

Hopefully Atlassian introduces a modern, centered layout.

Update -> well I spent the better part of a week trying to create a centered layout in Confluence to no avail. I constantly ran into problems because they use a bunch of javascript hacks to fix layout issues. I was able to get a centered layout, but I had to make the following changes:

• Custom HTML -> Insert into head
• Custom HTML -> Insert end of body
• Main layout decorator -> edited
• Page Layout decorator -> edited
• Stylesheet -> custom styles

Here is a screenshot of what it looks like:

Progress Aug 2016.png

And the code so far.

Custom HTML insert head

<script type="text/javascript">
//this is loaded from Administration | Custom HTML | Head Section. We can use Confluence's built-in jQuery by calling AJS.$ instead of $
//toInit is the equivalent of document.ready in jQuery
AJS.toInit(function(){
	/*Table of Contents click - when an anchor is clicked in the table of contents, smoothly scroll to the target */
	AJS.$('a[href^=#]').click(function (e) {
		//get hash sans #
		var hash = AJS.$(this).attr('href');
		var name = hash.substring(1, hash.length);
		var target = null;
		//is there an element on page with this id?
		if (AJS.$(hash).length != 0) {
			target = AJS.$(hash);
		}
		//is there a link on page with this name? (in case their are multiple just get the first one)
		else if (target = AJS.$('a[name="' + name + '"]:first')) {};
		//if we found an element then scroll to it
		if (target) {
			var scrollDist = AJS.$(target).position().top - 50; //subtract 50 to account for fixed header bar
			AJS.$('html, body').stop(true).animate({
				scrollTop : scrollDist
			}, 'slow');
			return false;
		}
	});
        AJS.$(window).scroll( function() {
               AJS.$('#main').css('margin-top', '0'); //prevent scroll stuttering due to Confluence javascript
        });
        /* Table of Contents Scroll - as you scroll through the page, highlight the Table of Contents with the currently active section */
        AJS.$(window).scroll( function() {
               var scrollPos = AJS.$(document).scrollTop();
               var activeSection = AJS.$('#main-content').children('h1, h2, h3, h4, h5').first();  //assume first h tag is the active one
               AJS.$('#main-content').children('h1, h2, h3, h4, h5').each( function () {
                     var headertext = AJS.$(this).text();
                     var currentHeaderPos = AJS.$(this).offset().top;
                     var dist = currentHeaderPos - scrollPos;
                     //console.log(headertext + ': scrollPos: ' + scrollPos + ' headerPos: ' + currentHeaderPos + ' dist: ' + dist);
                     if (dist < 150 && dist > activeSection.offset().top - scrollPos) { activeSection = AJS.$(this); }
               });
               //console.log('active h: ' + activeSection.text());
               AJS.$('#projector_right_sidebar li a').each( function() {
                       if (AJS.$(this).text() == activeSection.text()) { AJS.$(this).addClass('projector_active'); }
                       else { AJS.$(this).removeClass('projector_active'); }
               });
        });

        /* Table of contents positioning (if page is too short to show all of ToC, then get it to stay on screen as much as possible) */
	var $toc = AJS.$('#projector_toc');
	//declare some global variables
	var sidebarTop = $toc.offset().top;
	var sidebarBot = $toc.height() + sidebarTop;
	var bottomBuffer = 50;
        //there is a bug in this which prevents it from working. Commenting this out for now.
	//bind to scroll event of content window
	//AJS.$(window).scroll(checkIt);
	function checkIt() {
	  var scrollTop = AJS.$(window).scrollTop();
	  var pageBottom = AJS.$(window).height() + scrollTop - bottomBuffer;
          //So there is a weird situation where we are comparing the $toc.offset().top to $toc.position().top. When they are the same we simply leave the toc positioned as is. However, in the new Confluence 5.10 there is something weird going on where the two don't match. It seems the position property is relative to the body which then throws things off. I don't have time to figure out what in the world is going on here, so I'm simply commenting the code out. If you start working on this again, make sure that you change the toc back to fixed in the footer javascript on this page.
          console.log(sidebarTop + " : " + AJS.$($toc).position().top);
	  if (sidebarBot < AJS.$(window).height() && AJS.$($toc).position().top == sidebarTop) {
                console.log('a');
		return;
	  }
	  if (sidebarBot >= pageBottom) {
                 console.log('b');
		$toc.css('bottom', 'auto');
		$toc.css('top', sidebarTop - scrollTop);
	  } else {
                 console.log('c');
		$toc.css('top', 'auto');
		$toc.css('bottom', bottomBuffer);
	  }
	}
        /* Search Box (doesn't work, but maybe it will one day) */
       AJS.$('#quick-search-query').attr('placeholder', 'Search...');
        /* Anonymous Users - hide comments and action menu */
        if (AJS.params.remoteUser == ''){
          AJS.$('#action-menu-link').hide();
          AJS.$('#comments-section').hide();
          AJS.$('#login-link').hide();
          AJS.$('#help-menu-link').hide();          
        }
      /* Page Height - if an anchor is at the bottom of a page it can't be scrolled to. Increase page height to accommodate these anchors. */
      var lastAnchor = AJS.$('#main-content').children('H1, H2, H3, H4, H5').last();
      var anchorTop = lastAnchor.offset().top;
      var pageHeight = AJS.$(document).height();
      var distanceFromAnchorTopToBottom = pageHeight - anchorTop;
      var viewportHeight = AJS.$(window).height();
      var cushion = viewportHeight - distanceFromAnchorTopToBottom - 100; //account for fixed header bar plus some spare room
      AJS.$('#content').css('padding-bottom', cushion);
      /* Trigger scroll event so that table of contents highlights properly  */
      $(window).scroll();
});
</script>

Custom HTML at end of body

<script type="text/javascript">
        //set to fixed via javascript, otherwise on page load where you are scrolled down, it loads relative to current scroll position
        //$toc = AJS.$('#projector_toc');
        //$toc.css('position', 'fixed'); 
</script>

Main layout

#httpStatsElapse('mainDecoratorStart')
<!DOCTYPE html>
<html>
<head>
    #if($darkFeatures.isDarkFeatureEnabled('confluence.frontend.stats'))
        #includePluginJavascript("confluence.web.resources:js-reporting", "js-reporting.js")
        #includePluginJavascript("confluence.web.resources:console-instrumentation", "console-instrumenter.js")
        <script>
            (function() {
                //TODO: get url from config
                var consoleInstrumenter = new ConsoleInstrumenter("https://confluence-frontend-logging.internal.domain.dev.atlassian.io");
                consoleInstrumenter.instrument();
            })();
        </script>
    #end
    ## hasSpaceSideBar() indicates whether or not the theme supports rendering of the sidebar, not whether or not the
    ## sidebar is present on the current page. Sidebar is only present when there is a valid spaceKey
	#set($useNewSpaceIA = $theme.hasSpaceSideBar() && $spaceKey)
    #if ($sitemeshPage.getProperty("page.spacename"))
        <title>$title - $sitemeshPage.getProperty("page.spacename") - #siteTitle()</title>
    #else
        <title>$title - #siteTitle()</title>
    #end
    #requireResource("confluence.web.resources:print-styles")
    #requireResourcesForContext("main")
    #requireResourcesForContext("atl.general")
    #if ($useNewSpaceIA)
        #requireResource("com.atlassian.confluence.plugins.confluence-space-ia:spacesidebar")
    #end
    #parse("/decorators/includes/header.vm")
    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd
    $!sitemeshPage.getProperty("page.canonical")
</head>
## HTML HEADER ENDS
## HTML BODY BEGINS
#httpStatsElapse('mainDecoratorBodyStart')
<body #onLoadAttr() id="com-atlassian-confluence" class="$!theme.bodyClass $!sitemeshPage.getProperty("page.bodyClass") aui-layout aui-theme-default">
#parse ("/decorators/includes/main-content-includes.vm")
<ul id="assistive-skip-links" class="assistive">
    <li><a href="#title-heading">$action.getText("assistive.skiplink.to.content")</a></li>
    <li><a href="\#breadcrumbs">$action.getText("assistive.skiplink.to.breadcrumbs")</a></li>
    <li><a href="#header-menu-bar">$action.getText("assistive.skiplink.to.header.menu")</a></li>
    <li><a href="#navigation">$action.getText("assistive.skiplink.to.action.menu")</a></li>
    <li><a href="#quick-search-query">$action.getText("assistive.skiplink.to.quick.search")</a></li>
</ul>
<div id="page">
<div id="full-height-container">
    <div id="header-precursor">
        <div class="cell">
            $!settingsManager.globalSettings.customHtmlSettings.afterBodyStart
                #displayGlobalMessages()
        </div>
    </div>
    #parse("/decorators/includes/common-header.vm")
    #if($sitemeshPage.getProperty("page.tree"))
        #set($sidebarSettings = $studioSidebarHelper.getSettings($spaceKey))
        <div id="splitter">
        <div id="splitter-sidebar">
            $!sitemeshPage.getProperty("page.theme-navigation")
             #if ($!sidebarSettings.isTreeEnabled() == "true")
                $!sitemeshPage.getProperty("page.tree")
            #end
        </div>
        <div id="splitter-content">
        ## script needs to be executed here to prevent jerky content
        <script>require('doctheme/doc-theme')()</script>
        #if ($!sitemeshPage.getProperty("page.theme-header"))
            $!sitemeshPage.getProperty("page.theme-header")
        #end
    #elseif ($useNewSpaceIA && $sitemeshPage.getProperty("page.ia-sidebar"))
#**
    	<div class="ia-splitter">
    		<div class="ia-splitter-left">
    			<div class="ia-fixed-sidebar">
    				$!sitemeshPage.getProperty("page.ia-sidebar")
    			</div>
    		</div>
*#
    #end
    <!-- \#header -->
    ## CONTENT DIV BEGINS
    #httpStatsElapse('mainDecoratorContentDivStart')
    #set ($showPersonalSidebar = ($sitemeshPage.getProperty("page.personal-sidebar") || $sitemeshPage.getProperty("page.show-personal-sidebar")))
    #if($showPersonalSidebar && !$useNewSpaceIA)
        #set ($personalClass = "has-personal-sidebar")
    #elseif($sitemeshPage.getProperty("page.sidebar"))
        #set ($personalClass = "has-sidebar")
    #elseif($sitemeshPage.getProperty("page.blog-sidebar") && !$useNewSpaceIA)
        #set ($personalClass = "has-blog-sidebar")
    #end
    #if ($sitemeshPage.getProperty("page.show-main-container") != "false")
    <div id="main" class="$!personalClass aui-page-panel">
        #if ($sitemeshPage.getProperty("page.custom-content-header"))
            $!sitemeshPage.getProperty("page.custom-content-header")
        #end
        #if ($sitemeshPage.getProperty("page.show-main-header") != "false")
        <div id="main-header" style="display:none;"></div> <!-- included to keep Confluence's batch.js from throwing console errors on any scroll event -->
        <div id="projector-main-header">
            $!sitemeshPage.getProperty("page.content-navigation")
            $!sitemeshPage.getProperty("global.dashboard-navigation")
            <div id="title-heading" class="pagetitle with-breadcrumbs">
                #if ($sitemeshPage.getProperty("page.username"))
                    #set ($tildeUsername = "~$username")
                    #logoBlock($tildeUsername)
                #end
                #if (!$req.requestURL.toString().endsWith('dashboard.action'))
                    <div id="breadcrumb-section">
                        $!sitemeshPage.getProperty("page.breadcrumbs")
                    </div>
                #end
                $!sitemeshPage.getProperty("page.page-metadata-banner")
                <h1 id="title-text" class="with-breadcrumbs">
                #if ($sitemeshPage.getProperty("page.title-text-span"))
                    $sitemeshPage.getProperty("page.title-text-span")
                #else
                    #pageTitleLink()
                #end
                </h1>
            </div>
        </div><!-- \#main-header -->
        #end
        $!sitemeshPage.getProperty("page.tab-navigation")
        <div id="sidebar-container">
        #if($showPersonalSidebar)
            #if ($sitemeshPage.getProperty("page.personal-sidebar") && !$useNewSpaceIA)
                #skiplink("sidebar" $i18n.getText("assistive.skiplink.to.sidebar.start") $i18n.getText("assistive.skiplink.to.sidebar.end"))
                    $sitemeshPage.getProperty("page.personal-sidebar")
                #end
            #end
        #else
            #if ($sitemeshPage.getProperty("page.blog-sidebar") && !$useNewSpaceIA)
                #skiplink("sidebar" $i18n.getText("assistive.skiplink.to.sidebar.start") $i18n.getText("assistive.skiplink.to.sidebar.end"))
                    <div id="blog-sidebar" class="sidebar" >
                        $!sitemeshPage.getProperty("page.blog-sidebar")
                    </div><!-- \#blog-sidebar -->
                #end
            #end
            #if ($sitemeshPage.getProperty("page.sidebar"))
                #skiplink("sidebar" $i18n.getText("assistive.skiplink.to.sidebar.start") $i18n.getText("assistive.skiplink.to.sidebar.end"))
                    <div id="sidebar-help-tip">
                        $!sitemeshPage.getProperty("page.sidebar")
                    </div><!-- \#sidebar -->
                #end
            #end
        #end
        </div><!-- \#sidebar-container -->
        $body
        #if($sitemeshPage.getProperty("page.custom-content-footer"))
            $!sitemeshPage.getProperty("page.custom-content-footer")
        #end
    </div><!-- \#main -->
    #else
        $body
    #end
    #httpStatsElapse('mainDecoratorContentDivFinished')
    ## CONTENT DIV ENDS
    #if($sitemeshPage.getProperty("page.tree"))
        $!sitemeshPage.getProperty("page.theme-footer")
        </div>
    </div>
    #end
#set ($footerContext = {'spaceKey': $!spaceKey})
#webPanelForLocation("atl.footer" $footerContext)
#if ($useNewSpaceIA && $sitemeshPage.getProperty("page.ia-sidebar"))
</div>
#end
</div><!-- \#full-height-container -->
</div><!-- \#page -->
#confluenceServerPerformanceSpan()

<script type="text/javascript">
    AJS.BigPipe = AJS.BigPipe || {};
    AJS.BigPipe.metrics = AJS.BigPipe.metrics || {};
    AJS.BigPipe.metrics.pageEnd = typeof window.performance !== "undefined" && typeof window.performance.now === "function"
                                    ? Math.ceil(window.performance.now()) : 0;
    AJS.BigPipe.metrics.isBigPipeEnabled = '${isBigPipeEnabled}' === 'true';
</script>
#if (!$isBigPipeEnabled)
</body>
</html>
#end
#httpStatsElapse('mainDecoratorFinished')

Page layout

## PAGE SPECIFIC DECORATOR
## Here the context is the page. Modes are 'view', 'edit', 'edit-preview', 'view-information', and 'view-attachments'.
#set ($helper = $params.get("helper"))
#set ($mode = $params.get("mode"))
#set ($context = $params.get("context"))
#set ($confPage = $helper.page)
#if (!$mode.contains("edit"))
    ## CONFDEV-35759 To avoid resource URLs changing depending on whether the pagetree is enabled, always require
    ## this context.
    #requireResourcesForContext("atl.confluence.plugins.pagetree-desktop")
#end
#infoPanelInitFromParams()
## GENERAL PAGE DECORATING BEGINS
#requireResourcesForContext("page")
#if ($mode == "view")
    <content tag="page-metadata-banner">
        #skiplink("page-banner", $i18n.getText("assistive.skiplink.to.banner.start"), $i18n.getText("assistive.skiplink.to.banner.end"))
            #webPanelForLocation("atl.page.metadata.banner", {"action": $action})
        #end
    </content>
#end
#httpStatsElapse('pageDecoratorContentNavigationStart')
#if ($mode != "edit" && $mode != "edit-preview")
    #parse ("/decorators/includes/content-navigation.vm")
#end
#httpStatsElapse('pageDecoratorContentNavigationFinished')
#httpStatsElapse('pageDecoratorInfoPanelStart')
#if ($infoPanelRequired)
<content tag="sidebar">
    #infoPanel(true true true true)
</content>
#end
#httpStatsElapse('pageDecoratorInfoPanelFinished')
#httpStatsElapse('pageDecoratorSidebarStart')
#if( ($mode != "edit" && $mode != "edit-preview" ))
<content tag="ia-sidebar">
	#foreach ($webPanel in $webInterfaceManager.getDisplayableWebPanels("atl.page.left.sidebar", {"page": $confPage, "context": $context}))
    	$!webPanel.getHtml($action.context)
    #end
</content>
#end
#httpStatsElapse('pageDecoratorSidebarFinished')
#set($customHeader = $helper.getCustomHeader($spaceKey))
#if ($mode == "view" && $customHeader != "")
    <content tag="custom-content-header">
        <div id="custom-content-header">
            $customHeader
        </div>
    </content>
#end
#set($customFooter = $helper.getCustomFooter($spaceKey))
#if ($mode == "view" && $customFooter != "")
    <content tag="custom-content-footer">
        <div id="custom-content-footer">
            $customFooter
        </div>
    </content>
#end
#httpStatsElapse('pageDecoratorContentStart')
<!-- Projector ABC -->
<div id="content" class="page $!mode">
    #parse("/decorators/includes/page-content-includes.vm")
    ## MODE SPECIFIC DECORATING BEGINS
    #*
        Display page based on mode: currently 'view', 'edit', 'preview-edit', 'info' and 'attachments.
        See the individual page templates (viewpage.vm, editpage.vm, etc.) for the setting of the mode parameter.
    *#
    ## VIEW
    #if ($mode == "view")
        <content tag="headsection">
            #webPanelForLocation("atl.confluence.viewpage.header" $action.context)
        </content>
        #if ($space.personal)
            #if ($permissionHelper.canView($action.authenticatedUser, $space.creator))
                ## Deprecated: needed in case main.vmd hasn't been updated
                <content tag="show-personal-sidebar">true</content>
            #end
        #end
        #requireResourcesForContext("viewcontent")
        #set ($labelable = $page)
        #permitSearchEngines()
        #if ($helper.isHistoricalVersion())
            <content tag="suppressPdfLink">true</content>
        #end
        #parse ("/decorators/includes/page-metadata.vm")
        #if ($helper.isHistoricalVersion() || $helper.action.navigatingVersions)
            #versionInfo()
        #end
        ## If you choose to move page it's being done from view mode
        #putMetadata('browse-page-tree-mode', 'view')
        #putMetadata('parent-page-id', $!parentPage.id)
        #putMetadata('shared-drafts', $action.sharedDraftsDarkFeatureHelper.isSharedDraftsFeatureEnabled($spaceKey))
        ## left sidebar used to hold page tree
        <div id="projector_left_sidebar">
           $helper.renderConfluenceMacro("{pagetree:searchBox=false}")
         </div>
         ## right sidebar used to hold table of contents
        <div id="projector_right_sidebar">
           <div id="projector_toc">
               $helper.renderConfluenceMacro("{panel:title=Table of Contents}{toc:maxLevel=5}{panel}")
           </div>
         </div>
         ## left side used to hold center content area
        <div id="main-content" class="wiki-content">
           $body
        </div>
        #trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))
        #if ($mode != "edit" && $mode != "edit-preview")
            #set($labelable = $page)
            #parse("/com/atlassian/confluence/plugins/labels/components/labels-editor.vm")
        #end
		#if (!$action.childrenNotShown)
        #renderChildren()
		#end
        #applyDecorator("root")
            #decoratorParam("sitemeshPage" $sitemeshPage)
            #decoratorParam("page" $page)
            #decoratorParam("context" $comments)
        #end
        #webPanelForLocation("atl.page.content.footer", {"action": $action})
    ## EDIT || PREVIEW-EDIT
    #elseif ($mode == "edit" || $mode == "edit-preview")
        $body
    ## INFO
    #elseif ($mode == "view-information")
        #requireResourcesForContext("viewinformation")
        $body
    ## ATTACHMENTS
    #elseif ($mode == "view-attachments" || $mode == "move-attachments" || $mode == "view-attachment")
        #requireResourcesForContext("viewattachments")
        $body
    ## FOR CUSTOM WEB-ITEMS
    #else
        $body
    #end
    ## MODE SPECIFIC DECORATING ENDS
</div>
## GENERAL PAGE DECORATING ENDS
#httpStatsElapse('pageDecoratorContentFinished')
#parse ("/pages/page-breadcrumbs.vm")
#if ($mode != "edit" && $mode != "edit-preview")
    #parse("/template/includes/space-tools-web-items.vm")
#end
#menuMacros_renderBrowseMenu()

Stylesheet

/* Custom Style Sheet for Projector Documentation */
/* Increase available width by shrinking white space around content area  
    #main #content { padding-right: 0px; }
    #main { padding-left: 10px; padding-right: 10px; } */
    #header { position: fixed; width: 1200px; z-index: 10000; margin: auto; left: 0; right: 0;  } 
    #header.fixed-header { width: 1200px; }
    #projector-main-header { padding-top: 50px; }
    #main { width: 1200px; margin: auto; padding: 10px; }
    #projector_left_sidebar { float: left; width: 250px; margin-top:-25px; padding-right: 10px; }
    #projector_right_sidebar { float: right; width: 250px; margin-top:-10px; }
    #main-content { width: 620px; display:inline-block; }
    #quick-search-query { border: 1px solid gray; border-radius: 8px;  }
    /* #header .aui-nav { margin-right: 200px; }  /* ensure that icons next to search field are visible. */

/* Change color of little arrow next to spaces dropdown */
      .aui-header .aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { border-top-color: black; }

/* Fixes for page editor */
      .contenteditor #projector-main-header { display:none; }
      #main > #content.edit { display: inline-block; padding-bottom: 30px; } /* other weirdness, when you edit a page it defaults to display: table-cell, but if you refresh the page it uses inline-block. We want inline-block because otherwise content doesn't fit available height. */
      #main > #content.edit { padding-bottom: 30px; } /* push the preview/save/close area back up onto the screen */
      /*div#previewArea {  }*/
      body.content-preview #main { width: 620px; }
/* Some other fixes */
        #breadcrumbs { display: none; }
        #title-text { text-align: center; }
        #content > div.page-metadata > ul > li { float: right; }
        #content > div.page-metadata { margin-top: 5px; }
        #page-metadata-banner { float: right; width: 15px; }
        #navigation { position: absolute; right: 30px; background: white; }
        /* Prevent duplicate page titles */
        #main-header-placeholder h1:first-child a:first-child{ display:none; } 

/*  Right hand sidebar */
         /*  */
         #projector_right_sidebar { position: relative; }
         #projector_right_sidebar #projector_toc { position: static;  }
         /* List padding */
        #projector_right_sidebar ul { padding-left: 20px; }
        /* Link color */
        #projector_right_sidebar a { color: #333333; padding-top: 3px; padding-botttom: 3px; }
         /*  Background pink */
         #projector_right_sidebar .panelContent  {background-color: #FDF8F6; }
         #projector_right_sidebar .panelHeader  {background-color: #FDF8F6; }
         /* Block level links so that when you can hover anywhere */
         .toc-macro a { display: block; }
        
        /* Fix content in place */
        /*#projector_right_sidebar > .panel { position: fixed; }*/
        #projector_right_sidebar li a.projector_active { font-weight: bold; }
        /* Random Test */
       #projector_right_sidebar ul { padding-left: 20px; }
/* Hide admin bar message */
         #messageContainer { display: none; }
/* Header Tags */
         h2 { border-bottom: 1px solid; }
/* Links */
     /* Remove link underlines */
     .wiki-content a, .wiki-content a:link, .wiki-content a:visited { text-decoration: none; }
/* Page title orange */
	#title-text a  { color: #c74d12; }
/* Information Macro */
    .confluence-information-macro, .confluence-information-macro-information { background-color: #E0EFFF; }
/* Attachments page (this is weird. Confluence assumes that if your screen is more than 1600px wide, you don't want attachments table to be too wide, so they apply fixed column width at this point. Their assumed widths are two wide for the 1200px fixed width layout I'm using, so I'm forcing the table to fit within the 1200px layout) */
          div#view-attachments table tbody th:first-child { width: 20px; }
          div#view-attachments table tbody th+th { width: 148px; }
/* Style scrollbars */
       /* IE Scrollbars  */
   	     #splitter-sidebar { -ms-scrollbar-face-color: #f9ede7;  -ms-scrollbar-arrow-color: gray; -ms-scrollbar-3dlight-color: #f9ed7; }
       /* Webkit Scrollbars  */
	     ::-webkit-scrollbar { width: 15px;	}	
	/* Track */ 
	     ::-webkit-scrollbar-track {	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  -webkit-border-radius: 10px; border-radius: 10px; } 
	/* Handle */
	     ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px;	border-radius: 10px;	background: rgba(249,237,231,0.8); 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  }
	     ::-webkit-scrollbar-thumb:window-inactive {	background: rgba(249,237,231,0.4); 	} 
       /* FF Scrollbars */
            /* Not implemented - https://bugzilla.mozilla.org/show_bug.cgi?id=77790 */

[Steffen Heller]

As regards themes in general and how to customize them, I can't help at all since I don't even have access to that part of the administration and have never worked with that.

All I can say is this: If there is a way to style it with CSS then using the code above should get you the result you want.

As a test I added

.wiki-content {  
    margin: 0 auto;  
    width: 600px;  
    background: #A3C4E4;
    border: 20px solid #C3DEB3;
}

to one of my confluence pages and this was the result:

2015-12-16 11_48_36-The Real Test - Steffen Heller - Lightweb.png

[Jordan Packer]

What about adding that to the #main div, though? Doing wiki-content doesn't move the breadcrumbs/title/metadata like I want..

[Steffen Heller]

Yes, that is how it should work theoretically: Adding that code to #main {...}. But when I try, it doesn't. But then again, I only have access to normal wiki pages and can only include CSS with the css macro. If it also doesn't work when you include it in the proper place somewhere in the admin area then there is something else. Obviously, the #main area is an important part of the whole layout. Perhaps it is not possible at all to overwrite that or perhaps you have to first find all the standard CSS files that have settings for #main and overwrite them!? If that is important to you, it is probably best to contact the confluence support directly as they should know.

[Steffen Heller]

Hi,

the way the page is built up is this:

There is an area <div id="main"> that contains all the content and this area is defined as having a fixed width and being centered with "margin: 0 auto;".

If you rebuild that you should get it going.

There is an interesting description at http://learnlayout.com/margin-auto.html

[Jordan Packer]

I tried copying that styling as much as possible, but something still isn't working... I have updated my question with screenshots of what I'm getting on my page (with the CSS I'm using) as well as what the Atlassian page is showing.