Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (tsmori), last modified on Nov 19, 2009

Any chance we could get a quick and dirty "how-to" on setting up menus as tabs, much like the way the main Adaptavist site is set up? I don't know if it's being done with images or CSS or how you'd apply it within themebuilder. I noticed that other people have asked about this before on this forum, but there weren't any replies.

  • No labels

3 Comments

  1. Unknown User (scayla)

    Hi Tim,

    Here's a short explanation, which can be enough to begin with :

    First, if you don't know how to make menu tabs with CSS and list elements (ul and li), have a look at this screencast (this is part 2 but you can also have a look at all the parts). It is a certain way to make tabs, there are others, just dig on the web.

    Then, when you know how to make tabs with lists, have a look at the set-flag macro, combined with the builder-show macro. Also use the compound-menuitem macro with the parameter flat=true and the caption parameter to make your links the right way (this macro checks permissions so you don't have to deal with them)

    Now, dig into the Adaptavist website with firebug. For exemple, on this page, the "Products" tab is selected. If you look at the class of the body of the page, you can see flag-zone-products. Remove this class in firebug and the "Products" tab is no more selected. This is due to the following css style applied on the tab : 

    .flag-zone-products .atb-menu td.zone-products div{
background-color:#346A99;
background-position:0 28px;
border-top-color:#7893BE;
color:#FFFFFF !important;
}

    whereas other tabs have the following css style applied (which will be overriden by the style above) : 

    .atb-menu td.item div{
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background:#4B4A4F url(/download/attachments/37028022/up-shadow.png) repeat-x scroll 0 -6px;
border-top:1px solid #575B5E;
margin-right:10px;
padding:5px 14px;
}

    Now, the only "difficult" task for you is to define the flags on your pages with the builder-show and the set-flag macros, depending on the page, space, team-label, .... (eventually all the parameters available in the macros)

    Up to you now !

    Hope this helps (smile)

    Steeve

  2. Unknown User (tsmori)

    Steeve,

    Thanks a lot. I've done tabs before, but the themebuilder css is fairly complex and I was positive there was a better way to do it than trial and error with a custom css. I was missing the macro info.

    Tim

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

    I am using the YUI tab view example. I have converted the html to wiki markup and put it in the footnotes panel content tab. I added the javascript, created a new instance to the YAHOO object in the footnote html using the <script> tag, and the css to the builder theme and it worked. When I copied the code to another wiki instance the tab menu doesn't work when I click on the tabs and all of the content displays under the first tab. I have compared all of the settings in options tab, css tab and nothing seems to be different but for some reason the java script code in the footnote html does not seem to be working. I am using Theme Builder v4 with Confluence 3.5.4

    This is the code in the footnote html:

    <script>
(function() {
    var tabView = new YAHOO.widget.TabView('demo');

    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

    Why would it work in one confluence instance but not the other?