Missed Team ’24? Catch up on announcements here.

×
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Custom CSS - unable to use all of Edit box once applied

Dan Hawke
Dan Hawke October 30, 2011

We've created some very simple Custom CSS to add a banner to the top of our page:

#wikiheader { background-color: #225c9c; background-image: url(http://www.canterbury.ac.nz/wiki/wiki.jpg); height: 138px; background-repeat: no-repeat; }

Which we have added to the Main Layout section:

<!DOCTYPE html>
<html>
<head>
    #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")

    #standardHeader()

    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd

    $!sitemeshPage.getProperty("page.canonical")
</head>
## HTML HEADER ENDS
    
## HTML BODY BEGINS
<body #onLoadAttr() id="com-atlassian-confluence" class="$!theme.moduleKey $!sitemeshPage.getProperty("page.bodyClass")">
#webPanelForLocation("atl.general" $action.context)
<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">

<!-- Custom UC banner -->
<div id="wikiheader">
<img src="http://www.canterbury.ac.nz/wiki/logo.gif" alt="uclogo" style="float: right"></div>

<div style="background-image: url(http://www.canterbury.ac.nz/central_graphics/service_colour.gif); height:37px; padding-left: 10px; text-align:left"><img src="http://www.canterbury.ac.nz/wiki/title.gif" alt="UC Wiki"></div>
<!-- End Custom UC banner -->

<div id="full-height-container">
    <div id="header-precursor">
        $!settingsManager.globalSettings.customHtmlSettings.afterBodyStart
        #parse ("/decorators/includes/main-content-includes.vm")
        #displayGlobalMessages()
    </div>
    <div id="header" class="$!headerClass">
        #quickSearch()
        <ul id="header-menu-bar" class="ajs-menu-bar">
            #if($sitemeshPage.getProperty("page.browse-menu"))
                $sitemeshPage.getProperty("page.browse-menu")
            #else
                #menuMacros_renderGlobalBrowseMenu()
            #end
            #menuMacros_renderUserMenu()
        </ul>
        $!sitemeshPage.getProperty("page.breadcrumbs")
    </div><!-- \#header -->

    ## CONTENT DIV BEGINS
    #set ($showPersonalSidebar = ($sitemeshPage.getProperty("page.personal-sidebar") || $sitemeshPage.getProperty("page.show-personal-sidebar")))
    <div id="main" #if($showPersonalSidebar) class="has-personal-sidebar"
                   #elseif($sitemeshPage.getProperty("page.sidebar")) class="has-sidebar"
                   #elseif($sitemeshPage.getProperty("page.blog-sidebar")) class="has-blog-sidebar" #end>

        <div id="main-header">
            $!sitemeshPage.getProperty("page.content-navigation")
            $!sitemeshPage.getProperty("global.dashboard-navigation")
            <h1 id="title-heading" class="pagetitle">
                #if ($sitemeshPage.getProperty("page.username"))
                    #set ($tildeUsername = "~$username")
                    #logoBlock($tildeUsername)
                #else
                    #logoBlock($spaceKey)
                #end

                <span id="title-text">
                #if ($sitemeshPage.getProperty("page.title-text-span"))
                    $sitemeshPage.getProperty("page.title-text-span")
                #else
                    #pageTitleLink()
                #end
                </span>
            </h1>

        </div><!-- \#main-header -->

        $!sitemeshPage.getProperty("page.tab-navigation")

        <div id="sidebar-container">
        #if($showPersonalSidebar)
            #if ($sitemeshPage.getProperty("page.personal-sidebar"))
                #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"))
                #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">
                        $!sitemeshPage.getProperty("page.sidebar")
                    </div><!-- \#sidebar -->
                #end
            #end
        #end
        </div><!-- \#sidebar-container -->

        $body
        <br class="clear">
    </div><!-- \#main -->
    ## CONTENT DIV ENDS

## Custom html is rendered in the footer
#set ($showCustomHtml = true)
#parse ("/decorators/includes/footer.vm")
</div><!-- \#full-height-container -->
</div><!-- \#page -->
</body>
</html>

However, this causes the edit box to be so far down the screen you can't use the last several lines of it... Any clues?

Watch
Like Be the first to like this
467 views

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

4 votes
Answer accepted
Thomas Wendel
Thomas Wendel
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
October 31, 2011

Cause:

Confluence calculates the hight of the iframe (id=wysiwygTextarea_ifr), which holds the "content" of the editor and its scrollbar on the right, when the editor is loaded or the browser window is resized. For this, Confluence takes into account the hight of all the elements that Confluence "knows" are there: Breadcrumb header, page title, editor buttons, footer, etc. It resizes the iframe accordingly to make sure it does not disappear behind the bottom editor bar.

When you add your banner to the main layout, Confluence does not "know" it is there and does not take its hight into account when calculating the hight of the iframe. The amount of pixels that the iframe disappears behind the bottom editor bar is exactly the amount of pixel of the hight of your banner.

Solution:

Place your banner into the At beginning of the BODY-section under Fook & Feel --> Custom HTML. Everything that you place in there, Confluence will take into account when calculating the hight of the editor iframe.

This solution has also the advantage that your next update of Confluence will not cause any layout problems: Atlassian may tweaks the layouts of a new version of Confluence and it is sometimes not that easy to migrate all your own customisations of the layout templates over to the new version. However, stuff that you customise in Custom HTML is very likely to work properly after an update.

Cheers,

Thomas

View More Comments
Dan Hawke
Dan Hawke November 2, 2011

Thanks - in previous versions this caused problems as the CSS couldn't override the tags when in Custom HTML, but now that appears to be working okay, and I can edit the whole page too...

Cheers

Like
Reply
4 votes
David at David Simpson Apps
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
November 2, 2011

You could of course hide the custom header when you're editing the page - it would give more space for editing.

Something like this should do the trick:

#com-atlassian-confluence.contenteditor.edit #wikiheader {
	display: none;
}

Reply
Atlassian logo
Answers Developer Questions
TAGS
AUG Leaders

Atlassian Community Events

    See all events