Different accordion header styles

Does anyone know how to have each header of an accordion have
different styles?
In all reality, I just need different colors, but different
icons would be great too.
I've seen how to customize the header based on it's
selection, or how to customer all of the headers, but I want each
header to have a different style.
Thanks.

Similar Messages

Different data_table header styles

I am trying to use different styles for the column headings in a data_table. Specifically, I want some of the headings to be leftt aligned, some right aligned and some to be centred.
I can do this for the data in the columns by using a list of styles in the "columnClasses" attribute, but the "headerClass" attribute applies to all headers.
The header facets for the column contain a <h:panel_group> as the header is composed of some static text and a couple of buttons.
I have tried using a "styleClass" attribute on the panel_group. This results in a <span> HTML element being generated with the required style class but it does not seem to effect the text alignment.
Any suggestions would be appreciated.
Code is included below.
<%-- GroupList.jsp --%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<f:view>
<html>
<head>
<title>Archive</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<h:form id="groupList">
<h:commandButton id="first"
action="#{GroupListBean.first}"
immediate="false"
value="<<"
type="SUBMIT"/>
<h:commandButton id="previous"
action="#{GroupListBean.previous}"
immediate="false"
value=" < "
type="SUBMIT"/>
<h:commandButton id="next"
action="#{GroupListBean.next}"
immediate="false"
value=" > "
type="SUBMIT"/>
<h:commandButton id="last"
action="#{GroupListBean.last}"
immediate="false"
value=">>"
type="SUBMIT"/>
<h:dataTable id="table"
binding="#{GroupListBean.data}"
     rows="10"
value="#{GroupListBean.fullList}"
var="group"
columnClasses="group-list-column-1, group-list-column-2,
group-list-column-3, group-list-column-4"
footerClass="group-list-footer"
headerClass="group-list-header"
rowClasses="group-list-row-even, group-list-row-odd"
styleClass="group-list-background">
<f:facet name="header">
<h:outputText value="Backup Groups"/>
</f:facet>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Group Id"/>
<h:commandButton id="sortGroupIdA"
action="#{GroupListBean.sortGroupIdA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortGroupIdD"
action="#{GroupListBean.sortGroupIdD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.groupId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-2">
<h:outputText value="Group Name"/>
<h:commandButton id="sortNameA"
action="#{GroupListBean.sortNameA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortNameD"
action="#{GroupListBean.sortNameD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-3">
<h:outputText value="Creation Date"/>
<h:commandButton id="sortTimestampA"
action="#{GroupListBean.sortTimestampA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortTimestampD"
action="#{GroupListBean.sortTimestampD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.timestamp}">
<f:convertDateTime dateStyle="long"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Restore"/>
<h:commandButton id="sortSelectedA"
action="#{GroupListBean.sortSelectedA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortSelectedD"
action="#{GroupListBean.sortSelectedD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:selectBooleanCheckbox value="#{group.selected}"/>
</h:column>
<%--
--%>
</h:dataTable>
</h:form>
</body>
</html>
</f:view>
.group-list-background {
background-color: #ffffff;
border-collapse: collapse;
font-family: sans-serif;
font-size: 12pt;
padding: 10px;
width: 90%;
.group-list-column-1
text-align: center;
width: 15%;
.group-list-column-2
text-align: left;
width: 50%;
.group-list-column-3
text-align: right;
width: 20%;
.group-list-column-4
text-align: center;
width: 15%;
.group-list-footer {
background-color: #A5A5A5;
color: #000000;
font-weight: bold;
text-align: center;
.group-list-header {
background-color: #ffffff;
color: #000000;
text-align: centre;
.group-list-header-2
text-align: left;
.group-list-header-3
text-align: right;
.group-list-row-even {
.group-list-row-odd {
background-color: #dddddd;

I am trying to use different styles for the column
headings in a data_table. Specifically, I want some of
the headings to be leftt aligned, some right aligned
and some to be centred.
I can do this for the data in the columns by using a
list of styles in the "columnClasses" attribute, but
the "headerClass" attribute applies to all headers.I'm having the same problem, but it gets much worse than what you described.
I'm have an arbitrarily deep tree structure I've retrieved from my backing bean, and I want to display it in a data table. Each node has a label and maybe a description, for example.
1. The first problem is how to give the node's label a different style than the other node information. Semantically the <th> element is ideal. The problem, however, is that I can't generate a header for a node's label, because the list of nodes itself is being generated. That is, if I use:
<html:dataTable value="#{tree.nodeList}" var="node">
     <html:column>
     <jsf:facet name="header">
          <html:outputText value="#{node.label}" />
     </jsf:facet>Nothing gets put inside the header, as the node is being iterated. This means I have to resort to a crummy hack of nesting a table inside a table for the children:
<html:dataTable value="#{tree.nodeList}" var="node">
     <html:column>
          <html:dataTable value="#{node.nodeList}" var="childNode">
               <html:column>
                    <jsf:facet name="header">
                         <html:outputText value="#{node.label}" />
                    </jsf:facet>
                    <html:dataTable>
                         <html:column>
                              <jsf:facet name="header">
                                   <html:outputText value="#{childNode.label}" />
                              </jsf:facet>
                         </html:column>
                    </html:dataTable>
               </html:column>
          </html:dataTable>
     </html:column>
</html:dataTable>The hack gets uglier (than the useless outermost table), because if you'll notice, to show a label of a child node as a header, I have to put another nested dummy table in my page.
2. Now that I've managed to generate <th> (with a hack), where do I put other information about the node? If I put it in the enclosing table, it shows up before the node's label (in the <th> of the enclosed table). If I put it in the enclosed table, it will be repeated for each child node enumerated! Therefore, I'm forced to put it in the header facet of the enclosed table.
3. Now that I'm stuck with putting all the parent node information in a child table's headers, how do I show different header styles? (This is the limitation you mentioned.) I may, for instance, want to show the node's label, the node's description, and other important information about the node.
4. I can skip this whole <th> mess (reluctantly, because I want to specify <th> semantics by actually using <th>) by just putting everything in normal <td> elements. But this doesn't result in multiple rows like a <th> would.
5. What if each of my nodes wants to specify its own style? I can put a styleClass attribute on an <html:outputText>, but as was already mentioned, this results in a <span> style---not a style of the entire row!
6. If, miraculously, after hours I'm able to randomly get the right combination that will give me a styled header for each node and a sub-table of child-nodes, how do I do recursion? (Remember, my tree is arbitrarily deep.)
7. I could use the JSTL iteration elements and generate my own table, but I've heard rumors that JSTL and JSF don't play will together. What do I do when I want to generate some JSF action within this JSTL-generated table? Can I really just drop a JSF component inside a JSTL iteration?
JSF's dataTable seems nice in a book example, with a single-depth list of something from a database, with static headers, with alternating color styles. But trying to do something in the real world (few things are more fundamental in computer science than a tree structure) quickly seems to throw up all sorts of walls. Maybe I'm missing something really easy, here---any tricks are appreciated.
Garret

ToC won't "see" a modified heading style

I am in the template "white paper" and created a unique heading style. "Heading 4" shows up in my paragraph styles, and my headings are duly made in "Heading 4." "Heading 4" shows up in the TOC inspector. It is checked on the left and right (it is not dimmed). But when I update the ToC, nothing shows up there. It only works if I use the original heading style.

Well, nothing like asking a Q to get an insight. Here's a crappy yet functional run-around. I deleted the original "heading" and then took "heading 4" and renamed it "heading". Now the ToC looks weird (every other word is a different color) but I can fix that manually when I am done with the doc't.
Unless someone has a better answer....

RH 9, MS Word, Heading styles messing up my mini TOC

I must be doing something wrong. :-)
I have done many Word to RH projects. All the same look and feel. I include a mini TOC at the top of my topics, (which are actually book chapters). Now, however, my mini TOCs have no contents in them, and the reason is that my headings are not called "Heading 1, Heading 2" etc, which is what RH requires for mini TOCs. My heading styles came in as "WD_Heading1, WD_Heading2" etc.
I do not know why they came in like that. I imported the Word files as I always do. I tried renaming the headings styles, but no go.
What up wit this? Please advise. Thanks!

Yes, I was doing something wrong.
During import of the MSWord doc, I forgot to make sure each Word Document paragraph style was mapped to a RoboHelp Style in the drop-down list. A simple step.
You know, I don't remember having to do this before. I believe the Robohelp style (Heading 1, Heading 2, etc.) was selected by default. Perhaps because I was using a previous proejct as a template.
Well I am happy to answer my own question for anyone else who runs into this problem. It is not too gratifying, however, as it feels like scoring a goal on your own goalie.

Heading style is suddenly no longer applied in RH8

My colleague has been using a custom header style with no problems. The other day, the style is suddenly no longer applied in preview.
The project and styled text appear as they should on my computer, but not his.
Coincidentally, an upgrade to Explorer 7 was made prior to the new issue, but not sure why that impacts the preview, and the upgrade doesn't impact the project appearance on my computer.
Does he need to reinstall Robohelp to fix this issue?
Just in case, the style is:
P.01ProcessHeading {
font-weight: bold;
font-style: normal;
margin-bottom: 12pt;
margin-left: 0in;
border-bottom-style: Ridge;
font-size: 18pt;
color: #000000;
border-bottom-width: 2px;
border-bottom-color: #db281c;
font-family: Arial;
The HTML of the styled text is:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Adobe RoboHelp 8" />
<title>01 Adding Allergens</title>
<link rel="StyleSheet" href="..\..\default.css" type="text/css" />
</head>
<body>
<?rh-script_start ?><script src="../../ehlpdhtm.js" type="text/javascript"
        language="JavaScript1.2"></script><?rh-script_end ?>
<p class="01ProcessHeading">Topic Title     <a
href="02_Topic_title.htm"><img src="..\..\notepage.png" alt=""
           style="border: none;" width="16"
           height="18" border="0" /></a></p>
I wondered if charset=utf-8 might be a problem - mentioned on another forum topic, http://forums.adobe.com/message/1937722#1937722

Hi,
The name of the style starts with numbers. This is invalid CSS and is causing the problems. The best solution is to rename the style (don't use numbers if you can avoid it) and use a find and replace operation to correct the style in your project. (Make a backup first).
Search for all class="01ProcessHeading" and replace it with class="MyNewName".
You can validate your css by using the free W3C CSS validator: http://jigsaw.w3.org/css-validator/
Greet,
Willam
This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

Heading style customizations not reflected in HTML Help file

I wanted to share a solution I found for a problem with heading styles. I am using RoboHelp 9 for Word with Office 2010 and generating an HTMLHelp .chm file. When I migrated from Office 2003 to 2010 and RoboHelp 8 to 9, I customized the RoboHelp.docm template file to change the heading styles to have an orange border line over the header. (I had made the customizations in RH 8 for Word, but couldn't transfer the customization to the new template, so I did it by hand). The border line came out black in the header file in most of my topics in the .chm help file. I found one Word doc had topics with the orange line displayed correctly in the help and discovered that that heading style had Style Type = Linked, so I went to each of my Word docs and changed my Heading 1 style to use that style type and it fixed it for all my heading styles.
In Word 2010, you can change this from the Home tab, Styles ribbon. Rt-click on the Heading 1 style and choose Modify. In the Modify Style dialog set Style type to Linked (paragraph and character).

Thanks for sharing!
Greet,
Willam

DOC should be a normal Word document and we should be able to define the header style

Hi Team,
We are facing a issue with the pre assigned headers assigned by Adobe acrobat Pro Xl.
Our actual requirement is as follows:
1. As we convert a PDF to DOC there shouldn't be any pre assigned headers (header levels defined).
2. DOC should be a normal Word document and we should be able to define the header style.
We have tried working out on the same but nothing is going our way.
We tried couple of step which are as follows:
1. Deleting pre assigned TAG's.
2. Clearing headers with the help of Touch Up Reading Order Tool (TURO).
Request you to kindly revert on the same.

1. As we convert a PDF to DOC there shouldn't be any pre assigned headers (header levels defined).
You cannot control how Acrobat creates the word file.
2. DOC should be a normal Word document and we should be able to define the header style.
The word file is a normal Word document file. You may wish it was designed for it to be easiest to edit. Acrobat is making a Word file to most reliably resemble the original pdf file. I have no trouble creating any header style I want. The text in the header frequently consists of text boxes. Acrobat does this to insure accurate representation of the pdf file.

Different Page Header

Hi,
I am working in AR Invoice Report. The requirement is to print the invoice along with terms and condition, which is the last page. We don't require the logo and company information to appear on the terms and condition page. For this we have used page header in invoice page. But how can I remove the page header in the last page. Or can use a different page header in the last page.
We tried <?start@last-page:body?><?end body?> and section break before that in the last page. But the problem is when the invoice information overflows, it appears in the terms and condition page. and the header information is lost for that. and a page break before <?start@last-page:body?><?end body?> raises an error.
Any help will be apprciated.
Satyajit

Nice little guide to "different first page", vetsrini. Do you know if this is supported with RTF output? I have no problem getting a different header, when the output is in pdf, but when I try to output in RTF, the first header is repeated on the following pages. Is this not supported for RTF?

One project with two different web services styles (JAX-RPC and JAX-WS)

Hi theres,
how come the same project doesn't support two different web services styles?
First time I create a web service proxy using the wizard, the second step is to choose between JAX-RPC and JAX-WS. After that, this step is removed from the wizard and all subsquent web services are assumed to be the same style as the first one.
Can someone explain me why?
thanks in advance,
Manuel Leiria

Hi,
yes, I think to remember that there is support for a single style only. If you need another one too then you create a new project.
Frank

Payment Terms(Different at header and Item)

Hi,
While creating an order with two line items having different materials, A different payment term is picking for one material at item level which is different from header.
Where as for other material same payment term is coming at both header and item level.
Could please let me know where do we maintain entry to pick a payment term which comes at item level.

Mohan Hi,
Please also not that SAP Standard set the same payment term at the header and the item level. As mentioned, the payment term default value at the sales order comes from the customer master data.
Best regards.
Ido

Different Footnote Numbering Styles in One Page

Hello everyone,
I searched for a solution to this issue for so long, but in vain.
I've been working on a document where I have to insert footnotes and assign 2 styles or more to their reference numbers.
In MS Word, it is easily done. Can it be done in InDesign?
The following screenshot shows 3 different footnote numbering styles in one single page in MS Word:
If InDesign does not have the ability to do so, will it do in the future?
Thank you

Obviously, my question has completely sunk into oblivion!

Placing label and an image in Accordion header in flex 3

Hi all,
I need to display label and image in accordion header.Please let me know the process.
Thankig You....

Hi,
Pls use the same swc which you are having from the link earlier which is having the CanvasButton.
After that create the application same as the code is below.It is in the Flex 3.0.I am using three images and 3 labels on the header of the accordion.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        xmlns:code="http://code.google.com/p/flexlib/">
    <mx:Accordion width="500" height="300"
        backgroundColor="0xCCCCCC">
        <mx:headerRenderer>
            <mx:Component>
                        <code:CanvasButton>
                            <mx:HBox verticalAlign="middle"
                                 horizontalGap="5">
                                <mx:Image source="logo.png"/>
                                <mx:Label text="Label 1"/>
                                <mx:Image source="logo1.png"/>
                                <mx:Label text="Label 2"/>
                                <mx:Image source="logo2.png"/>
                                <mx:Label text="Label 3"/>
                            </mx:HBox>
                        </code:CanvasButton>
            </mx:Component>
        </mx:headerRenderer>
        <mx:VBox label=" Account Dept.">
            <mx:Label text="Container 1" />
        </mx:VBox>
        <mx:VBox label=" Admin Dept.">
            <mx:Label text="Container 2" />
        </mx:VBox>
         <mx:VBox label=" Sales Dept.">
            <mx:Label text="Container 3" />
        </mx:VBox>
    </mx:Accordion>
</mx:Application>
With Regards,
Shardul Singh Bartwal

Accordion header issue

How to achieve accordion header visible to true/false, without add/remove child?

var style1 = new TextField.StyleSheet();
style1.setStyle("mm", {fontFamily:'Arial,sans-serif',
fontSize:'11px', color:'#6666ff'}); //internal css
my_label.autoSize = true; /// -------- already created a
label (my_label) instance --------
my_label.styleSheet = style1;
my_label.html = true;
my_label.text = "<mm> My Sub menu1</mm>";

Assigning a child button to Accordion header

I have an Accordion control with several panels. Each header
has an icon and a title. I need to add a child button to the
Accordion header (which is a Button itself and not a container, but
it should be OK). I want to place it on te right side of the
header. I create a 20 x 20 button and add it to the Accordion
header, as a child. I want to place it on the right corner of the
Accordion header, but I am unable to get accurate size measurements
of the header. What I thought would work (using the Accordion
derived custom class) would be ....
for(var i:int=0; i<numChildren; i++)
var header:mx.controls.Button = getHeaderAt(i);
header.addChild(minusButton);
super.measure();
minusButton.x = header.measuredWidth - 20;
but the measureed width always comes up as zero, as opposed
to the actual width of the header? Any ideas what I am doing
wrong?

Set the button's "In" parameter to the same MIDI message your controller is sending.
Now when the button receives a MIDI input with the matching message, it will trigger.
You'll obviously need an environment cable path so that incoming MIDI can reach the button, by whatever means is appropriate.

Font issue - in all my replies, sent and forwarders the font is different size and style.

font issue - in all my replies, sent and forwarders the font is different size and style. Sometimes it changes while I am typing in mid sentence. I tried to adjust using tools, options, advanced. But nothing seems to stick. How can I make all emails have same font style and size?

I do not know how up to date this is, but there are menus listed in how the message displays when you compose and open an email. [http://kb.mozillazine.org/Font_settings_in_Thunderbird#Message_display] That may help you set the preferences.

Different accordion header styles

Similar Messages

Maybe you are looking for