How to apply multiple styles for nested tags in XML?

Say you import this XML into InDesign:
<Root>
  <strong>
    <em>Bolded and Italicized</em>
  </strong>
</Root>
And you have two character styles, bold and italics, to map to strong and em tags respectively.
You will see that the text appears italicized not bolded and italicized as expected. Generally, only the innermost tag will get the style and will overwrite its parent styles.
Notice the XML is generated dynamically and tags order is not enforced. Also, there's an additional underline tag that can be nested with these two.
So far I have tried to use GREP styles (with paragraph styles), but these do not have effect in the XML tags.
Other possible options not tried yet:
Create new tags for every formatting combination. Not what I really want because I could en up with a lot of tags each one with a corresponding styles.
Create InDesign XML rules to apply character styles automatically based on the tags
Use character styles in the XML with the aid namespace referencing InDesign styles. Will this really work?
What do you suggest to go for? See any other option?
Thank you in advance.
Juan

I'd say that you should create tags not for appearances, but for semantic content. Specifying formatting styles in your XML betrays your lack of familiarity with the format, because the last thing you'd want to do would be to use HTML markup in the middle of your XML. If you have content that's supposed to be both bolface and oblique - say, a warning - then it's marked up as
<warning>Never refer directly to formatting in your XML markup, only to content types!</warning>
If I had a document that was written in the style you suggest - one with lots of overlapping local formatting - I'd look at developing a better style guide that told the writers that doing so would be bad form. Because, you know, many of the writers I deal with are addicted to forms of emphasis that do nothing useful whatsover for their readership - they only serve to overemphasize the authorial voice of the writers.
Maybe you could tell us why you need these overlapping forms of styling, and we could suggest other InDesign formatting tools (like line styles or nested styles) that would help you get the appearance you want without crowding styling markup into your XML - where, strictly speaking, it doesn't really belong.

Similar Messages

  • Help, how to apply multiple style to a component

    In HTML we can write class="styleA styleB" to apply multiple
    style, but it's not allowed in flex3.
    So is there a way to walk around? like
    .styleB{
    //include styleA
    }

    You have to combine all songs into one file by using software, for example Audacity.
    PS: I owe this knowledge to a post by Victoria Bampton.

  • How to set multiple styles on a single component in flex ?

    Hi ,
    I would like to know how to set multiple styles on a single component in flex.
    Can anyone give me an example as to how to set multiple styles for a single component ?
    Thanks ,
    Regards,
    Ajantha

    Hi tuliptaurus,
    You can setStyleName property for chnaging the external css dynamically by using the setStyle() method ...
    btn.setStyle("styleName","blendButtonSkinOther");
    You can change the external css by using the styleaName property with setStyle method..the line in blue..where blendButtonSkinOther is another css class..
    blendButtonSkin {
        fontFamily: Arial;
        fontSize: 11;
        color: #F1F1F1;
        textRollOverColor: #F1F1F1;
        textSelectedColor: #F1F1F1;
        horizontal-align:center;
        width:150;
        height:30;
        cornerRadius:5;
        upSkin:ClassReference('assets.skins.BlendButtonSkin');
        downSkin:ClassReference('assets.skins.BlendButtonSkin');
        overSkin:ClassReference('assets.skins.BlendButtonSkin');
        disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
        selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
    blendButtonSkinOther {
        fontFamily: Arial;
        fontSize: 11;
        color: #F1F1F1;
        textRollOverColor: #F1F1F1;
        textSelectedColor: #F1F1F1;
        horizontal-align:center;
        width:150;
        height:30;
        cornerRadius:5;
        upSkin:ClassReference('assets.skins.BlendButtonSkin');
        downSkin:ClassReference('assets.skins.BlendButtonSkin');
        overSkin:ClassReference('assets.skins.BlendButtonSkin');
        disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
        selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
        selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
    Thanks,
    Bhasker Chari

  • Apply new style for existing paragraph

    How to apply new style for existing paragraph
    I need to apply existing paragraph style "FEBL1" to bullet list (newstyle)

    May be I am not clear with your question.
    You want to apply any style to a paragraph, you can use grep function:
    app.findGrepPreferences = app.changeGrepPreferences = null;        
    app.findGrepPreferences.findWhat = ".+";
    app.findGrepPreferences.appliedParagraphStyle = "FEBL1";   
    app.changeGrepPreferences.appliedParagraphStyle = "bullet list";   
    app.activeDocument.changeGrep();
    app.findGrepPreferences = app.changeGrepPreferences = null; 
    OR
    You want to add bullet list in your existing style "FEBL1", try the below code:
    var pstyles = app.activeDocument.paragraphStyles; 
    for(var i=0;i<pstyles.length;i++) 
        if(pstyles[i].name == "FEBL1")
            pstyles[i].bulletsAndNumberingListType = ListType.BULLET_LIST;
    Vandy

  • How to apply paragraph styles to xml tag?

    Hi All,
    How to apply paragraph style to xml tag?

    Hi Learner,
    Try the below js code.
    var myDoc = app.activeDocument;
    try{
        mySel=app.selection[0];
        myDoc.xmlElements[0].xmlElements.add({markupTag:"TEST", xmlContent:mySel});
        }catch(e){
            alert(e);
    var myDocument = app.activeDocument;
    app.findGrepPreferences.appliedParagraphStyle = "test";
    app.findGrepPreferences.findWhat = ".+(?=\\r)"
    var mySearch = myDocument.findGrep(false);
    for (a=0; a<mySearch.length; a++){
        myDocument.xmlElements[0].xmlElements.add({markupTag:"TEST", xmlContent:mySearch[a]});
    thx,
    csm_phil

  • How to apply multiple paragraph styles to one sentence?

    I'm using paragraph styles but is not helpful because I'm trying to apply 2 different styles within the same sentence which is not working.
    To make it work I select the sentence, apply the style, for instance "xfont-regular" then I select the word within the sentence that I want it to have a different style and I choose from the font list maybe italic so that it looks "something like this"
    Obviously by doing this, I'm loosing all the benefits of using p styles and of course it's so time consuming. Is there any way to break the sentence, keeping it in the same line, so that I can apply different styles to it? and still keep the benefits of just going to the styles and make the changes to the whole document that have that style applied.
    Thank you

    pchinique wrote:
    I'm using paragraph styles but is not helpful because I'm trying to apply 2 different styles within the same sentence which is not working.
    To make it work I select the sentence, apply the style, for instance "xfont-regular" then I select the word within the sentence that I want it to have a different style and I choose from the font list maybe italic so that it looks "something like this"
    Obviously by doing this, I'm loosing all the benefits of using p styles and of course it's so time consuming. Is there any way to break the sentence, keeping it in the same line, so that I can apply different styles to it? and still keep the benefits of just going to the styles and make the changes to the whole document that have that style applied.
    Thank you
    As Diane King mentioned, nested character styles may work for your need. Her example was an initial dropped capital (multi-line first one or several letters of a paragraph.) Dropped caps are a specific type of nested style - always the first one or more characters in a paragraph, two or more lines high.
    To use the general kind of nested style, you need to be able to identify the word or words within the paragraph that gets the nested character style. For example, the third word, or the first two words after the first semi-colon. If there is no pattern of word(s) that can be identified by position or sequence, it's possible that a GREP style can be used to find a common pattern of characters and apply a character style to it, for example a telephone number, date, or currency amount that's identified by a dollar sign, pound, or yuan.
    Search InDesign Help and Google for "InDesign nested style," "InDesign grep style," and similar terms (without quotes) for details. There have been many discussions of GREP on this forum.
    HTH
    Regards,
    Peter
    Peter Gold
    KnowHow ProServices

  • How to apply List box for multiple selection of rows  in ALV report ?

    Hi Exprots,
    1: How to apply List box for multiple selection of rows  in ALV report ?
    Thanking you.
    Subash

    hi,
    check the below program.
    REPORT zalv_dropdowns.
    *Type pools declarations for ALV
    TYPE-POOLS : slis.
    *data declarations for ALV container,ALV grid, Fieldcatalogues & layout
    DATA: g_grid  TYPE REF TO cl_gui_alv_grid,
          g_custom_container TYPE REF TO cl_gui_custom_container,
          gt_fieldcat TYPE lvc_t_fcat,
          gs_layout TYPE lvc_s_layo.*INTERNAL TABLE AND WA DECLARATIONS FOR t517 A table
    DATA: gt_outtab TYPE STANDARD TABLE OF t517a INITIAL SIZE 0,
          wa_outtab TYPE t517a.
    START-OF-SELECTION.*Call to ALV
      CALL SCREEN 600.*On this statement double click  it takes you to the screen painter SE51.
    *Create a Custom container and name it CCONT and OK code as OK_CODE.
    *Save check and Activate the screen painter.
    *Now a normal screen with number 600 is created which holds the ALV grid.
    PBO of the actual screen , Here we can give a title and customized menus
    Here we also call the subroutine for ALV output.
          MODULE PBO OUTPUT                                             *
    MODULE pbo OUTPUT.
      PERFORM alv_output.
    ENDMODULE.                    "pbo OUTPUT
          MODULE PAI INPUT                                              *
    MODULE pai INPUT.
    ENDMODULE.                    "pai INPUT
    *&      Form  BUILD_FIELDCAT
    FORM build_fieldcat.
    DATA ls_fcat TYPE lvc_s_fcat.
    *Build the field catalogue
      CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
        EXPORTING
          i_structure_name = 'T517A'
        CHANGING
          ct_fieldcat      = gt_fieldcat.
    To assign dropdown in the fieldcataogue
      LOOP AT gt_fieldcat INTO ls_fcat.   
    CASE ls_fcat-fieldname.
       WHEN 'SLART'.
    *is the first list box
            ls_fcat-drdn_hndl = '1'.
            ls_fcat-outputlen = 15.
            MODIFY gt_fieldcat FROM ls_fcat.
    is the second list box    
    WHEN 'ABART'.       
            ls_fcat-drdn_hndl = '2'.
            ls_fcat-outputlen = 15.
            MODIFY gt_fieldcat FROM ls_fcat.   
    ENDCASE.
      ENDLOOP.
    ENDFORM.                    "build_fieldcat
    *&      Form  ALV_OUTPUT
    FORM alv_output .*Create object for container
      CREATE OBJECT g_custom_container
             EXPORTING container_name = 'CCONT'.
    *create object for grid
      CREATE OBJECT g_grid
             EXPORTING i_parent = g_custom_container.
    Build fieldcat and set column
    *Assign a handle for the dropdown listbox.
      PERFORM build_fieldcat.
    *Build layout
      PERFORM build_layout.
    Define a drop down table.
      PERFORM dropdown_table.
    *fetch values from the T517A table
      SELECT * FROM t517a INTO TABLE gt_outtab.
    *Display ALV output
      CALL METHOD g_grid->set_table_for_first_display
        EXPORTING
          is_layout       = gs_layout
        CHANGING
          it_fieldcatalog = gt_fieldcat
          it_outtab       = gt_outtab.ENDFORM.                               "ALV_OUTPUT
    *&      Form  dropdown_table
          text
    -->  p1        text
    <--  p2        text
    FORM dropdown_table.*Declarations for drop down lists in ALV.
      DATA: lt_dropdown TYPE lvc_t_drop,
            ls_dropdown TYPE lvc_s_drop.
    First SLART listbox (handle '1').
      ls_dropdown-handle = '1'.
      ls_dropdown-value = '01 Primary school'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '1'.
      ls_dropdown-value = '02 Lower Secondary'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '1'.
      ls_dropdown-value = '03 Upper Secondary'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '1'.
      ls_dropdown-value = '04 Professional School'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '1'.
      ls_dropdown-value = '05 College'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '1'.
      ls_dropdown-value = '06 University'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '1'.
      ls_dropdown-value = '09 Other Establishment'.
      APPEND ls_dropdown TO lt_dropdown.* Second ABART listbox (handle '2').  ls_dropdown-handle = '2'.
      ls_dropdown-value = '10 Primary School certificate'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '2'.
      ls_dropdown-value = '20 Lower secondary/Junior high'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '30 High school diploma(B-levels)'.
      APPEND ls_dropdown TO lt_dropdown.
      ls_dropdown-handle = '2'.
      ls_dropdown-value = '31 Vocational'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '32 Matriculation'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '40 Specialist vocational certificate'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '50 College degree Level1'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '51 College degree Level2'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '52 Masters degree'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '60 Univ Degree level1'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '61 Bachelors degree'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '62 Masters degree'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '63 Licenciate'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '64 Doctors Degree Ph.D'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '89 None'.
      APPEND ls_dropdown TO lt_dropdown.  ls_dropdown-handle = '2'.
      ls_dropdown-value = '90 Unknown'.
      APPEND ls_dropdown TO lt_dropdown.*method to display the dropdown in ALV
      CALL METHOD g_grid->set_drop_down_table
        EXPORTING
          it_drop_down = lt_dropdown.ENDFORM.                               " dropdown_table
    *&      Form  build_layout
          text
    *layout for ALV output
    FORM build_layout .  gs_layout-cwidth_opt = 'X'.
      gs_layout-grid_title = 'ALV DROPDOWN LISTS'.
      gs_layout-no_toolbar = 'X'.ENDFORM.                    " build_layout
    endform.
    Edited by: S.r.v.r.Kumar on Jun 1, 2009 2:48 PM

  • How to print multiple footers for each page in RTF template xml report.

    Hi,
    How to print multiple footers for each page in RTF template xml report.
    i am able to print ( two sets ) ...
    up to last page ( one template ) and for last page ( another template).
    i want to change the footer information based on the group value printed in the report ( it might be 5 to 6) In every report run.. can you please check and let me know do we have any feasibility to achieve this.
    Thanks in advance.
    Regards,
    KAP.

    You can remove all other logic, like last page only contents (start@last-page:body), etc and section breaks if any you have inserted manually.
    Just have for-each@section logic.
    It would be difficult for me to guess what you have done without looking at your RTF or describing here.

  • How to lock multiple user for a transcation code at same time is der any tc

    how to lock multiple user for a transcation code at same time is der any tc
    suppose i hav 15 user and i want to lock 10 user for mm02 who can i to it

    Basis can do a export and import transport, still if don't have connection between boxes.
    or
    check this
    http://www.sap-basis-abap.com/abap/copy-program-variants-from-one-to-another.htm

  • Hi how to apply Chronological sort for a month column?

    Hi All,
    I am struck with how to apply Chronological sort for a month column that contains values like January, February, March, April, May, June.... December. If we apply normal sorting then we can arrange the column values either in ascending order or descending order. But i want the column values to be in this format like jan, feb, mar,apr....dec. Is it possible???
    If this is possible then pls tell me the way in a step wise manner for my better understanding..
    Thanks in Advance
    Thenmozhi

    Hi Deva,
    I tried with the below formula :
    CASE WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='January' THEN 1 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='February' THEN 2 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='March' THEN 3 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='April' THEN 4 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='May' THEN 5 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='June' THEN 6 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='July' THEN 7 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='August' THEN 8 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='September' THEN 9 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='October' THEN 10 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='November' THEN 11 WHEN
    "Order Booked Date Calendar"."Full Month Name (Order Booked)"='December' THEN 12 ELSE '' END
    But it is showing the error like this:
    Error Details
    Error Codes: OPR4ONWY:U9IM8TAC:OI2DL65P
    State: HY000. Code: 10058. [NQODBC] [SQL_STATE: HY000] [nQSError: 10058] A general error has occurred. [nQSError: 43113] Message returned from OBIS. [nQSError: 43119] Query Failed: [nQSError: 17001] Oracle Error code: 604, message: ORA-00604: error occurred at recursive SQL level 1 ORA-06502: PL/SQL: numeric or value error: character string buffer too small ORA-06512: at line 8 ORA-00932: inconsistent datatypes: expected NUMBER got CHAR at OCI call OCIStmtExecute. [nQSError: 17010] SQL statement preparation failed. (HY000)
    What it is problem? Please help me...
    Thanks

  • How to uploade multiple flatfiles for single transaction using BDC?

    How to uploade multiple flatfiles for single transaction using BDC?

    Hi,
    You need to upload all data files into an internal table first either using OPEN DATASET (application server files) or GUI_UPLOAD (PC files).
    Then loop at the internal table and call BDC transaction to process the data.
    Regards,
    Ferry Lianto

  • How to avoid multiple listing for same artist?

    How to avoid multiple listing for same artist?

    Sounds like there might be blanks in the artist name.
    For instance "Lou Reed" and "Lou Reed_" will not match.
    (Pretend the underscore _ is a blank).
    Select all the Lou Reed songs, Get Info, and type "Lou Reed" in the artist field. That should fix it.

  • How to apply sap license for Sap Netweaver AS Java

    Hello guys,
    May i know how to apply sap license for SAP Netweaver AS Java?  Appreciate the reply, thank you
    regards,
    wei how

    Hi Lee,
    check below link:
    http://help.sap.com/saphelp_nwce10/helpdata/en/9f/5e533e5ff4d064e10000000a114084/content.htm
    Thanks
    sunny

  • How to apply different styles to multiple spry accordian panels?

    Hi all,
    I have a website that I'm building that has multiple spry accordian features on it.
    I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
    I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
    When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
    I hope all this makes sence below is my source and CSS Code.
    I appriciate any help that can be given to help resolve this issue I am running in too.
    Source Code
    <div id="content">
    <p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
    <p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
    <p class="content_txt"> We have two packages available for our customers;</p>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
       <p>Text Goes Here</p>
        <div id="Accordion2" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
        <p>Text Goes Here</p>
        </div><!-- end #Accordion2 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion2 -->
        </div><!-- end #Accordion1 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion1 -->
    <div id="Accordion3" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
             <p>Text Goes Here</p>
          <div id="Accordion4" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
        </div><!-- end #Accordion4 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion4 -->
        </div><!-- end #Accordion3 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion3 -->
    </div><!-- end #content -->
    CSS
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
              border-left: solid 1px gray;
              border-right: solid 1px black;
              border-bottom: solid 1px gray;
              overflow: hidden;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
              margin: 0px;
              padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
              background-color: #CCCCCC;
              border-top: solid 1px black;
              border-bottom: solid 1px gray;
              margin: 0px;
              padding: 2px;
              cursor: pointer;
              -moz-user-select: none;
              -khtml-user-select: none;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
              overflow: auto;
              margin: 0px;
              padding: 0px;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
              background-color: #EEEEEE;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
              color: #555555;
    .AccordionPanelOpen .AccordionPanelTabHover {
              color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
              background-color: #3399FF;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
              background-color: #33CCFF;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg1.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/package_spry_tab_bg1_RO.png);}
    #Accordion2  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry1.png);}
    #Accordion2 .AccordionPanelTabHover,
    #Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/packages_spry1_ro.png);}
    #Accordion3  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg2.png);}
    #Accordion3 .AccordionPanelTabHover,
    #Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/package_spry_tab_bg2_RO.png);}
    #Accordion4  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry2.png);}
    #Accordion4 .AccordionPanelTabHover,
    #Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/packages_spry2_ro.png);}

    Okay guys,
    I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
    Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion1 Content -->
      </div><!-- end #Accordion1 .AccordionPanel -->
    </div><!-- end #Accordion1 -->
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion2 Content -->
      </div><!-- end #Accordion2 .AccordionPanel -->
    </div><!-- end #Accordion2 -->
    You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
    However if for some reason you want to put one accordion inside another like I did e.g.
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion2 Content -->
      </div><!-- end #Accordion2 .AccordionPanel -->
    </div><!-- end #Accordion2 -->
    </div><!-- end #Accordion1 Content -->
      </div><!-- end #Accordion1 .AccordionPanel -->
    </div><!-- end #Accordion1 -->
    Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
    CSS
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg_RO.png);}
    #Accordion2  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry.png);}
    #Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
    #Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
    height:44px;
    width:469px;
    background:url(../images/packages_spry_ro.png);}
    Normally when styling two seperate spry accordions you can just use the following code
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg_RO.png);}
    The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
    Hope this helped anyone who was having the same issue I was.

  • How to apply different styles to multiple spry collapsible panels?

    Hello every.
    I would really appreciate some help with this problem I am coming up against.
    I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
    However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
    Can someone please advise me how to do this?
    Thank you in advance for your help.
    Kind regards
    Elliot

    I've figured the most of it out.
    By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
    I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
    I only want to have different Tab backgrounds and Hover backgrounds
    1st Spry CollapsiblePanel
    Code:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
        <div class="CollapsiblePanelContent">Content</div>
    CSS Style
    .CollapsiblePanelTab
    .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
    2nd Spry CollapsiblePanel
    Code:
    <div id="CollapsiblePanel2" class="CollapsiblePanel2">
      <div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
      <div class="CollapsiblePanel2Content">Content</div>
    </div>
    .CollapsiblePanel2Tab
    .CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
    As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
    Has anyone any ideas on how to get around this?
    Kind regards
    Elliot

Maybe you are looking for