Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (ryan.nauman), last modified on Sep 11, 2008

My company is using confluence v2.7. Theme builder has several decoration-type macros built-in and I would like to add to this repository to prevent clogging up the user created macros space with things related to core theme design. Is this possible?

What I am trying to do is create some html elements and style them accordingly. I looked at documentation here and noticed a section that specified how to parse the panel content (eg, parse html then macro code, etc) but our installation does not have this option.

Thanks in advance

  • No labels

10 Comments

  1. Unknown User (gfraser)

    The HTML mode for panels was added in Builder 3.2.0 if memory serves so you'd need to be using at least that version to get the feature.

    Any Confluence macros can also be used in the theme so if you create your own Confluence plugins containing macros you can simply drop them in to the normal wiki view of a panel or (if using a recent version of Builder) switch to Velocity+HTML markup and call the macros using velocity commands similar to the way that normal themes operate.

    As for CSS, that can be added using the CSS Tab - either directly specifying the CSS or importing from external CSS files.

    1. Unknown User (ryan.nauman)

      Okay I found the HTML mode for panels. Could you point me to where there are examples of velocity calling a Builder macro? Also, is there a list of the available Builder macros somewhere? I dont know what half of them do, and I'm sure I would like to be using ones that exist that I don't yet know about.

      1. Unknown User (gfraser)

        I don't think we've got a tutorial yet on calling the macros from velocity, however if you look at the default theme that comes with Confluence there should be a "Layout" option which shows the velocity templates and you can find examples of calling macros in there.

        In terms of the list, see Macros. You can also find them listed in the "Advanced" section of the "Full Notation Guide" (link shown on right of screen when editing wiki pages using the Wiki Markup editor).

        EDIT: For anyone else looking for the render mode setting, it's on the "Options" tab of the panel content editor.

  2. Unknown User (susan.hallwood@nerdsonsite.com)

    I am trying to create a tabbed menu of the comments, attachments, children and labels in the footnotes. I am using the velocity then HTML option. The tabbed menu works but the macros are not being rendered. I have looked at the default Confluence theme that shows the velocity templates. The $helper.renderConfluenceMacros() is not working in my script. I am using Theme Builder v4 with Confluence 3.5. Am I missing something?

    #set ($helper = $params.get("helper"))

<div class=yui-skin-sam>
<div id="demo" class="yui-navset">
     <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Comments</em></a></li>
        <li><a href="#tab2"><em>Children</em></a></li>
        <li><a href="#tab3"><em>Attachments</em></a></li>
        <li><a href="#tab4"><em>Labels</em></a></li>
    </ul>            

    <div class="yui-content">
          <div id="tab1">$helper.renderConfluenceMacro("{builder-comments}")</div>
          <div id="tab2">$helper.renderConfluenceMacro("{menubar}{compound-menuitem:children|caption=Show children (%count%)}{menubar}")</div>
          <div id="tab3">$helper.renderConfluenceMacro("{attachments:upload=true}")</div>
    <div id="tab4">$helper.renderConfluenceMacro("{builder-show:context=page,blogpost|mode=view}{builder-added-by}{builder-labels}{builder-show}")</div>
     </div>
</div>
</div>

    1. Unknown User (amoran)

      {builder-comments} requires special data to be passed through the render context, it is not possible to do this through $helper.renderConfluenceMacro ... try using wiki-markup instead.

      1. Unknown User (susan.hallwood@nerdsonsite.com)

        Using wiki mark up isn't working for me either since I need to link to the div id. The links the ids, and the classes are needed for the css and javascript to make the tab menus work.

        i.e 

        <li><a href="#tab1"></a><em>Comments</em></li> links to:

<div id="tab1"><p>{builder-comments}<p></div>

        My wik mark up:

        
{div:class=yui-skin-sam}
	{div:id=demo|class=yui-navset}
    	{ul:class=yui-nav}
        	{li:class=selected}{anchor:#tab1}Commennts]{li}
        	{li}{anchor:#tab2}Attachments{li}
        	{li}{anchor:#tab3}Children{li}
	{li}{anchor:#tab4}Labels{li}
    	{ul} 
          
    	{iv:class=yui-content}
        	{div:id=tab1}{builder-comments}{div}
        	{div:id=tab2}{attachments:upload=true}{div}
        	{div:id=tab3}{menubar}{compound-menuitem:children|caption=Show children (%count%)}{menubar}{div}
		{div:id=tab4}{builder-show:context=page,blogpost|mode=view}{builder-added-by}{div}
    	{div}
	{div}
{div}

        I tried some of the different link macros

        {move-to} - does not display the links for the tabs
[tab1] - this created a new page

        I also tried using the 

        {velocity-render}

        macro Which did not work either

        i.e.

        {velocity-render}
<div class=yui-skin-sam>
<div id="demo" class="yui-navset">
     <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Comments</em></a></li>
        <li><a href="#tab2"><em>Children</em></a></li>
        <li><a href="#tab3"><em>Attachments</em></a></li>
        <li><a href="#tab4"><em>Labels</em></a></li>
    </ul>            

    <div class="yui-content">
          <div id="tab1">
{velocity-render}
          {builder-comments}
{velocity-render}
          </div>
          <div id="tab2">
{velocity-render}
            {menubar}{compound-menuitem:children|caption=Show children (%count%)}{menubar}
{velocity-render}
           </div>
          <div id="tab3">
{velocity-render}
           {attachments:upload=true}
{velocity-render}
           </div>
          <div id="tab4">
{velocity-render}
           {builder-show:context=page,blogpost|mode=view}{builder-added-by}{builder-labels}{builder-show}
{velocity-render}
            </div>
     </div>
</div>
</div>
{velocity-render}

        This was the result:

        i was thinking if ther are different macros i can use to display the comments, attachments, children, and the labels that are not builder macros that might work but the attachments macro isn't a builder macro but it isn't working either.

        1. Unknown User (amoran)

          You do of course know that you can specify the html id of a div using the id parameter, eg:

          {div:class=yui-skin-sam}
{div2:id=demo|class=yui-navset}
     {ul:class=yui-nav}
        {li:class=selected}{a:href=#tab1}Comments{a}{li}
       .
       .
       .
     {ul}
     {div3:class=yui-content}
          {div4:id=tab1}

          NB: div nesting in wiki-markup is achieved using {div},{div2},{div3},{div4},{div5},{div6},{div7},{div8},{div9}

          1. Unknown User (susan.hallwood@nerdsonsite.com)

            Is the 

            {a}

            macro part of the HTML plugin? I don't see that macro in the macro browser

            1. Unknown User (amoran)

              My mistake ... I forgot that macro has yet to be added to content-formatting, you could use a user-macro instead.

  3. Unknown User (susan.hallwood@nerdsonsite.com)

    Whoops!!! I forgot to change the rendor option back to wiki markup. Using the 

    {velocity-rendor}

    macro works. Hooray it finally works!!

    Thanks for your help Alain (smile)