Skip to end of metadata
Go to start of metadata

TWO RELATED QUESTIONS ABOUT LAYOUTS BREAKING

Our existing production site we've been running for about 9 months has the following software:
Adaptavist Theme Builder (3.3.6-conf210) Powered by Atlassian Confluence 3.0.1

The NEW UPGRADE we're testing is running the following:
Adaptavist Theme Builder (4.1.3) Powered by Atlassian Confluence 3.3

I'm trying to understand why the layout wrappers in the new upgrade are missing several wrappers that were integral to the current production layout.

  • 1) For example the pagebody and pagecontent wrappers are shown to exist on this HTML example page below but they are not present in the new upgrade's layout. Why? Is it a problem with plugins or our use of panels in Layout Manager, or something else? This and or something else is breaking the way styles are working for the new upgrade.

HTML Structure https://www.adaptavist.com/display/Builder/HTML+Structure+%28Builder+3.x%29

  • 2) Why are closing div tags being added automatically after tables? This also is breaking our existing layouts on production and it appears to still be occurring on the upgrade site but mainly with tables created with || pipes and not
    Unknown macro: { td }
    markup...

I hope I phrased these questions clearly. Any suggestions or help at this point will be greatly appreciated to get the upgrade on production.

  • No labels

10 Comments

  1. 1. The structure was updated in Builder 4.x

    2. Atlassian updated the renderer to add even more extraneous tags, you will need to adjust your css to cope (sad)

  2. Unknown User (mf8yk)

    Right, the new layout 4.x, thanks. I'm still extremely confused however why I have not been able to get control on basic items with new styles like the h1 tags, (fortunately most styles are fine). I've been through hundreds of hours customizing this site earlier this year and have used advanced css for many years...I'm missing something and will keep at it with these H1 tags - (if you know something more connected with this let me know).

    The issue #2 above is a still an unsolved bug on our site that appeared in the old theme and is still present in this one - there is a DIV tag added after tables made with 'pipes' - there is no problem with tables made with brackets and tags -

    • Is this perhaps a plugin conflict? - Or simply evidence that tables with pipes are not allowed?
    
    This first table approach in the content area adds an additional div after them:
    {table}
    |This is content|More...|
    {table}
    
    This table structure is fine:
    {table}
    {tr}
    {td}This is content{td}
    {td}More...{td}
    {tr}
    {table}
    
    

    The following related plugins are installed in the new upgrade still in the sandbox, some not active:

    Adaptavist Community Bubbles
    114 of 120 modules enabled
    Adaptavist Content Formatting Macros
    49 of 61 modules enabled
    Adaptavist Footnotes
    All modules enabled.
    Adaptavist Theme Builder
    124 of 126 modules enabled
    Advanced Macros
    All modules enabled.
    Apache HttpClient OSGi bundle
    No modules enabled.
    Apache HttpCore OSGi bundle
    No modules enabled.

    Application Links
    Plugin disabled.
    Atlassian Gadgets API
    No modules enabled.
    Atlassian Gadgets OAuth Service Provider Plugin
    All modules enabled.
    Atlassian Gadgets SPI
    No modules enabled.
    Atlassian OAuth API
    No modules enabled.
    Atlassian OAuth Consumer SAL SPI Implementation
    All modules enabled.
    Atlassian OAuth Consumer SPI
    No modules enabled.
    Atlassian OAuth Service Provider SAL SPI Implementation
    All modules enabled.
    Atlassian OAuth Service Provider SPI
    No modules enabled.
    Atlassian REST - Module Types
    All modules enabled.
    Atlassian Search Results Enhancer
    All modules enabled.
    Atlassian Template Renderer API
    All modules enabled.
    Atlassian Template Renderer Velocity 1.6 Plugin
    All modules enabled.
    Atlassian Templates Import Framework
    All modules enabled.
    Atlassian Templates: Default Package
    All modules enabled.
    Atlassian UI Plugin
    All modules enabled.
    Attachment Extractors
    All modules enabled.
    BND Library
    No modules enabled.
    Basic Macros
    All modules enabled.
    Chart Plugin
    All modules enabled.
    Checklists Macros
    All modules enabled.
    Classic Left Navigation Theme
    All modules enabled.
    Clickr Theme
    All modules enabled.
    Code Macro
    All modules enabled.

    Compatibility Macros
    Plugin disabled.
    Confluence Activity Stream Plugin
    185 of 186 modules enabled
    Confluence Atlassian Plugin Repository
    All modules enabled.
    Confluence Attachments Plugin
    All modules enabled.
    Confluence Blogging RPC Plugin
    All modules enabled.
    Confluence Contributors Plugin
    All modules enabled.
    Confluence Drag and Drop Plugin
    All modules enabled.
    Confluence HTML Macros
    5 of 7 modules enabled
    Confluence Legacy Web Resources
    1 of 3 modules enabled
    Confluence LinkBrowser
    All modules enabled.
    Confluence PDF Export
    All modules enabled.
    Confluence REST API
    All modules enabled.
    Confluence Remote API
    All modules enabled.
    Confluence SAL Plugin
    All modules enabled.
    Confluence Thread Dump Plugin
    All modules enabled.
    Confluence Usage Stats
    All modules enabled.
    Content Action Menu Sections
    All modules enabled.
    Copy Space Plugin
    All modules enabled.
    Create Page Macro
    All modules enabled.

    Custom Space User Management Plugin
    Plugin disabled.
    CustomWare Composition Plugin
    All modules enabled.
    Dashboard Actions
    All modules enabled.
    Dashboard Macros
    All modules enabled.
    Documentation Theme
    All modules enabled.
    Dynamic Task List 2 Plugin
    All modules enabled.
    Easy Reader Theme
    All modules enabled.
    Excel Plugin
    All modules enabled.
    Flash Plugin
    All modules enabled.
    Form Mail NG
    All modules enabled.
    French language pack
    All modules enabled.
    Gadgets Plugin
    All modules enabled.
    Gadgets Plugin SPI
    All modules enabled.
    German language pack
    All modules enabled.
    Google Collections Bundle
    No modules enabled.
    Graphviz Plugin
    All modules enabled.
    ICU4J
    No modules enabled.

    IM Presence NG Plugin
    Plugin disabled.
    Information Macros
    All modules enabled.
    JDOM DOM Processor
    No modules enabled.
    JIRA Macros
    All modules enabled.
    JSON Library
    No modules enabled.
    JSR 305 Annotations
    No modules enabled.
    Java Concurrency in Practice Annotations
    No modules enabled.
    Layout Macros
    All modules enabled.
    Linking Plugin
    All modules enabled.
    Live Search Macros
    All modules enabled.

    Mail Page Plugin
    Plugin disabled.
    Office Connector plugin
    35 of 38 modules enabled
    OpenOffice Extractor Plugin
    All modules enabled.
    Page History Slider
    All modules enabled.
    Page Information Tools
    All modules enabled.
    Page Tree
    All modules enabled.
    Profile Macros
    All modules enabled.
    ROME, RSS and atOM utilitiEs for Java
    No modules enabled.
    Redirection Plugin
    All modules enabled.
    Shared Application Access Layer API
    No modules enabled.
    Social Bookmarking Plugin
    All modules enabled.

    Sticky Notes and Snip-Edit Plugin
    Plugin disabled.
    Table Plugin
    All modules enabled.
    Table of Contents Plugin
    All modules enabled.
    Tabular Metadata
    All modules enabled.
    TinyMCE Editor Plugin
    All modules enabled.
    UWC Importer Admin Panel
    All modules enabled.
    User Lister
    3 of 4 modules enabled
    User Status
    All modules enabled.
    Visibility Plugin
    All modules enabled.
    WebDAV Plugin
    All modules enabled.
    Widget Connector
    All modules enabled.
    atlassian-gadgets-shared-2.0.5.jar
    No modules enabled.
    confluence-imagesearchrenderer-plugin
    All modules enabled.

    1. Your problem with the heading tags is down to specificity, the most common solution to this is to prepend your declarations with .atb-body

      Your problem with tables looks very much like invalid markup - you can't mix the two types of table markup like that!

      Use one or the other not both!!

  3. Unknown User (mf8yk)

    Alright, moving things along now...

    The table problem is there are about one hundred people adding content you see, and some have been using this mixed markup system...you really should be more civil in your forums

    The specificity issue is a mute point since as I said I know css, and have used all the obvious approaches, like atb-body - there is however something else not obvious, so I was just asking if it was another one of those countless bugs in the Adaptavist sw or plugin conflicts.

    ...back to the drawing board

    1. I'm saddened that you take my attempts at assisting you as being uncivil, in future I will refrain from commenting on your questions.

      As to the problem with your users creating invalid markup - this is not something we can address through code, it is only resolvable through training.

      If adding .atb-body is not enough then you can always go to the dark-side and use html id's (which is no-doubt what is overriding your current css) One great way to find out where the override is coming from is to use firebug, however as a css guru you probably knew that already.

    2. Unknown User (gfraser)

      Mark,

      Table markup

      The issue with the table markup is that Confluence treats the pipe-based markup as a separate table.

      So the following:

      {table}
      |This is content|More...|
      {table}
      

      Is like doing this in HTML:

      <table>
       <table>
        <tr>
         <td>This is content</td>
         <td>More...</td>
        <tr>
       </table>
      </table>
      

      Which is bonkers.

      As for why Confluecne is adding divs after tables created using only pipes, I have no idea - sounds like a bug in Confluence wiki renderer, it certainly shouldn't be outputting divs if all you wanted was a table.

      CSS - eg. headings

      Atlassian use some "interesting" CSS in places - for example using id's followed by several elements and classes in their style definition. This can make overriding some of their CSS a bit icky at times, but I've not personally encountered any problems with styling headings.

      Can you post the CSS you've tried to apply?

  4. Unknown User (mf8yk)

    Well remorse is better than shouting, apology accepted.

    And yes all the obvious course of action have/are being taken.

    Thanks for the clarification -

  5. Unknown User (mf8yk)

    Guy, I appreciate the clarifications. The following CSS for H1 tags on the new development site worked fine on the old site for H1 tags. I am as stated above at a roadblock on why using every conceivable form of specificity that I cannot effect any change whatsoever. It may of course not be a confluence, plugin or adaptavist conflict but simply my own huge oversight but I would love a second set of eyes accustomed to the css applied through this software. This is I believe the 1st time in about a year of extreme customization of this software that I've asked for help in this forum, and I am grateful your professional assistance, even if it just helps point me in the right direction. Maybe you can spot something in the following.

    Among my various attempts at leveraging specificity in the upgrade on sandbox, examples:

    
    .atb-body .atb-page .wiki-content h1{ color:#444; font-size:0.5em;}
    
    .atb-body #com-atlassian-confluence .atb-page .wiki-content h1{ color:#444; font-size:0.5em;}
    
    

    The first set of CSS below is the custom CSS from the Layout Editor. Then the following CSS is all arranged in descending sequential order.

    MY CUSTOM STYLESHEET

    
    .atb-page h1{
    background-color: transparent;
    border-top-style: none;
    border-right-style-value: none;
    border-bottom-style: none;
    border-left-style-value: none;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    }
    
    .wiki-content h1{
    font-size: 2em;
    color: #444444;
    margin-top: 36px;
    margin-bottom: -8px;
    font-weight: normal;
    }
    
    
    • THE CSS BELOW IS ALL DEFAULT CODE

    site-2.5.css

    
    h1 {
    font-size: 24px;
    line-height: normal;
    font-weight: bold;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    margin-top: 36px;
    margin-right: 0pt;
    margin-bottom: 4px;
    margin-left: 0pt;
    }
    
    .wiki-content h1 {
    background-color: #f0f0f0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: -moz-use-text-color;
    }
    
    

    colors.css?spaceKey=CUSTOMSPACE

    
    h1{
    color: #003366;
    }
    
    .wiki-content h1 {
    color: #003366;
    border-bottom-color: #6699cc;
    }
    
    

    batch.css

    h1{
    line-height: normal;
    font-weight: bold;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    font-size: 24px;
    margin-top: 36px;
    margin-right: 0pt;
    margin-bottom: 4px;
    margin-left: 0pt;
    }
    
    
    #com-atlassian-confluence .wiki-content h1 {
    font-weight: bold;
    line-height: normal;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    font-size: 21pt;
    margin-top: 38px;
    }
    
    
    #com-atlassian-confluence h1 {
    line-height: 2;
    font-size: 21pt;
    margin-top: 38px;
    margin-right: 0pt;
    margin-bottom: 10px;
    margin-left: 0pt;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    width: 100%;
    font-weight: bold;
    line-height: normal;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    }
    
    

    NOTE: the last 'default stylesheet', batch.css, has something missing in the line-height declaration for #com-atlassian-confluence h1:
    line-height: 2;

  6. Unknown User (mf8yk)

    well in the end the styles were over-rode by setting them in the spaces stylesheet and unfortunately also adding the !important declaration was required.

  7. Unknown User (ilene.chen@tufts.edu)

    Hi everyone,
    I am having the same problem with applying our custom h1 style settings since we upgraded to 3.3. The new default font-size for the h1 style is huge and I want to change it. I've tried adding various combinations of ".atb-page", ".atb-body", ".wiki-content" before my h1 tags but nothing seems to work.

    The new default settings have also seemed to add extra padding to our panels and columns.

    Please let me know if there is a quick fix. Thanks!