Help: apply different para styles to several consecutive paragraphs via script

Hi all,
I need to apply different para styles to several consecutive paragraphs via script, something like this (found somewhere on the net):
var myDoc = app.documents[0];
var mySel = app.selection[0];
var myPStyle1 = "A";
var myPStyle2 = "B";
//need to add 6 more styles here:
//var myPStyle3 = "C";
//var myPStyle4 = "D";
//var myPStyle5 = "E";
//var myPStyle6 = "F";
//var myPStyle7 = "G";
//var myPStyle8 = "H";
//the last style not needed in script?
// apply 1st style to 1st paragraph
mySel.appliedParagraphStyle = myDoc.paragraphStyles.item (myPStyle1);
// apply styles to paragraphs after selected
//2nd style
mySel.paragraphs[-1].insertionPoints[-1].appliedParagraphStyle = myDoc.paragraphStyles.item (myPStyle2);
//next style
mySel.paragraphs[-1].insertionPoints[-1].paragraphs[0].insertionPoints[-1].appliedParagrap hStyle = myDoc.paragraphStyles.item (myPStyle2).nextStyle;
I've tried badly, but can't find the way to extend the sequence
Sorry, no skills in scripting yet...
all styles have 'Next Style' option activated, but I can't use 'Apply style, then Next style' or Object styles, because I need four different sequences of those para styles:
A-B-C-D-E-F-G-H
A-B-D-E-G-H
A-C-D-F-G-H
A-D-G-H
and I really don't want to create special clones of the same style for each sequence (Keep It Simple, they say ).
I believe it can be done via four slightly adjusted scripts...
any suggestions would be greatly appreciated...

Sorry about being late to the party, I usually pick up stuff like this right away.
How about this one?
1. No separate scripts needed, it uses a tiny dialog where you can choose what style set to use. If I'm correct, you can press a number key on Windows to immediately select one of the items.
2. It works down from the paragraph your cursor is in. It has nothing to do with text frames, though -- consecutive paragraphs inside a story always ignore any text frames.
3. Extensible: you can easily change the names of the styles in the top array, and the number of style groups in the list.
var styleLists = [
          [ "A", "B", "C", "D", "E", "F", "G", "H" ],
          [ "A", "B", "D", "E", "G", "H" ],
          [ "A", "C", "D", "F", "G", "H" ],
          [ "A", "D", "G", "H" ]
var radiobutts = [];
styleDialog = app.dialogs.add ({name:"Set Multiple Styles",canCancel:true});
with (styleDialog)
          with (dialogColumns.add())
                    with (radiobuttonGroups.add())
                              for (i=0; i<styleLists.length; i++)
                                        // Build radio button string
                                        str = "&"+String (i+1)+". ";
                                        for (j=0; j<styleLists[i].length; j++)
                                                  if (j) str += "-";
                                                  str += styleLists[i][j];
                                        radiobutts.push (radiobuttonControls.add({staticLabel:str, checkedState:false}) );
radiobutts[0].checkedState = true;
if (styleDialog.show())
          for (i=0; i<radiobutts.length; i++)
                    if (radiobutts[i].checkedState == true)
                              break;
          if (i < radiobutts.length)
                    par = app.selection[0].paragraphs[0];
                    for (j=0; j<styleLists[i].length; j++)
                              par.appliedParagraphStyle = styleLists[i][j];
                              par = par.parentStory.paragraphs.nextItem(par);

Similar Messages

  • Apply different font styles in single text frame

    hi all
    how can i apply different font styles in a single text frame using indesign script ?
    for example :
    "dasdnasndasndlasndnasdlasdasdas"
    may i know is it possible to do that and how to do that ?
    thanks

    You can set (as well as read) every single property of any text range with scripts. This is javascript; it assumes you text cursor is inside a frame with some text.
    * Setting some specific characters to a color:
    app.selection[0].parentStory.characters.itemByRange(5,10).fillColor = "Red";
    * Change the font of words:
    app.selection[0].parentStory.words[3].appliedFont = "Arial\tBold";
    * .. or just the style:
    app.selection[0].parentStory.lines[2].fontStyle = "Italic";
    * .. or any other attribute (this one requires you to have at least 5 characters selected):
    app.selection[0].characters[5].underline = true;
    Of course these operations are not limited to something you select; they work the same with any text frames you can refer to.
    app.activeDocument.textFrames[1].paragraphs[2].appliedCharacterStyle = "charstyle";

  • How to apply different CSS styles to different table cells?

    I have an h:dataTable table and I would like to apply different CSS styles to different table cells depending on their content. If I were doing JSP I would probably have a <c:if> test on the cells, and give them a style name depending on contents, and then define the styles in a separate style sheet. Is there a way in JSF to do the equivalent? Thanks.

    mitchgart wrote:
    BalusC wrote:
    How to achieve a cell-specific style is already answered in my 1st reply of this topic.That tells how to apply a style to the text (or other content) inside a cell but not how to apply a style to the <td> as a whole. It would work for something like text font or text color but not cell border.
    I'm thinking I can mark the content somehow and then have javascript traverse the DOM, find marked content, and traverse outward to the enclosing <td>. Is there a better way?BalusC already spoke about rowClasses and columnClass attributes, I assume those are insufficient.
    The Tomahawk dataTable component has the rowStyleClass and rowStyle attributes for assigning CSS to the HTML tr tag. One is allowed to reference the row data variable when assigning values to these. However, see https://issues.apache.org/jira/browse/TOMAHAWK-523 for workarounds to bugs in some implementations.
    The Tomahawk column component has the styleClass and style attributes for assigning CSS to the HTML td tag. These also may reference the row data variable.

  • Is there a script for applying a certain style to several thousands of words arranged in a list?

    Hello, I have tried using FindChangeByList, but I'd pretty much do all the work of pasting every word on the brackets, so i could as well apply the styles by hand.
    So my project involves applying the same style to around 11 thousand words that appear in a book. Those words are mostly names and brands, and they appear throughout the whole text, so applying that style manually would be quite time-consuming.
    I have those words set aside in a list.txt
    Does anyone know if I could use that in any script and apply the style automatically?
    Like I said, pasting every single word into FindChangeByList is out of the question, just like applying the style word by word, it would take forever...
    ...thanks!

    Okay, for anyone that might be interested in this as I was, I found a solution.
    If you want to have a particular text expression on your .txt list to be used as a search parameter by your script, here are a few tips:
    Let's say you want to add the following 2 expressions on your list, without the quotation marks:
    a) "test, test."
    b)"[test] {test}"
    1 - Like Jongware said, you MUST abide by GREP syntax.
    2 - If you want to put an expression on your .txt list that DOES NOT uses characters that represent GREP syntax (example a) with regular text, commas and simple punctuation), you may simply add them to your list between parentheses:
         a) (test, test.)
    3 - If you want the script to search for an expression that DOES CONTAIN characters that are also used by GREP syntax (example b) you can try stuff like:
         b) (\p{Ps}test\p{Pe})
         note the parentheses, because it's a specific text expression
         then note the \p{Ps} and \p{Pe} that mark opening or (s)tarting and closing or (e)nding punctuation such as brackets, braces, parentheses...
    Here is a file with the GREP expressions that helped me solve my problems:
    http://www.kahrel.plus.com/indesign/grep_mapper.pdf
    Although this is a very specific matter and probably easily solvable by all the professional scripters here, I thought I'd share it since it took 3 whole days of studying for me to conclude everything.
    Thanks again, specially to Jongware

  • GREP 'find/change' by list script: find a text string containing different para styles

    Hi
    I'm don't write scripts but do 'enjoy' copying, pasting and changing existing code/txt files.
    I have built a GREP find/change .txt that performs a large number of text edits/changes.
    But I'm left with an issue where I have paragraphs of text (styled earlier in the .txt file) that I'm unable to identify using GREP the usual way. I need to identify text in a particular paragraph style, followed by text in another paragraph style.
    Is it possible with GREP to create a search string to find: text styled with one paragraph style, ending with a paragraph return, and to include in that selection the following paragraph/s styled with another paragraph style?
    MTIA Steve

    seb400 napisał(-a):
    What do you mean by I would mark "changing" in "copying, pasting and changing"?
    Hi Steve,
    I mean I can see a way by modifying some existing code with "find...change" job
    1. set criteria to findGrep
    2. store findGrep() in an array
    3. check each found object if next paragraph matches some new criteria
    4. run changeGrep() if true
    Jarek

  • Need help with different link styles on same page

    Hello,
    I'm using Dreamweaver CS4 on a PC.
    I have searched through a lot of posts over the last couple of days, I've tried the projectseven.com tutorial, google'd, etc. but still can't figure it out.....
    All I want to do is apply a different link colour to some links in the footer of my page. Elsewhere through the site I have set the colour to blue (for the link) and orange (for the hover) - for the footer links I want the link to be white and the hover colour to stay orange.
    The problem with the projectseven tutorial is that it doesn't seem to apply to CS4 and I kept getting error messages when trying to apply a new CSS rule - there's no Class|Tag|Advanced options as per the instructions ....
    I've copied the code of my page to this. The links which I want to apply a different style to are contained in the Div Tag called "Footer-Navigation-Bar" .
    Could someone please give me some instructions or point me in the right direction please??
    Many thanks,
    Vickie
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Subscribe to Family Australia - it's free!</title>
    <!-- TemplateEndEditable -->
    <link href="../family-subscribe.css" rel="stylesheet" type="text/css" />
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    a:link {
    color: #30C;
    text-decoration: none;
    a:hover {
    color: #F30;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:active {
    text-decoration: none;
    -->
    </style></head>
    <body>
    <div id="container">
      <div id="banner">
        <ul id="family-subscribe-menu" class="MenuBarHorizontal">
          <li><a href="../index.html">Home</a>      </li>
          <li><a href="../subscribe.html">Subscribe</a></li>
          <li><a href="../family-advertise.html">Advertise</a>      </li>
          <li><a href="../family-articles.html">Articles</a></li>
    <li><a href="../family-sign-in.html">Issues</a></li>
          <li><a href="../family-contribute.html">Contribute</a></li>
    <li><a href="../family-contact.html">Contact</a></li>
        </ul>
    </div>
        <div id="sidebar"><a href="../family-sign-in.html"><img src="../images/launch-issue.jpg" alt="launch-issue" width="220" height="380" hspace="4" /></a>
          <div id="sidebar-image2">
            <p><img src="../images/Sleeping bag for web.jpg" width="220" height="151" alt="sleeping-bag" /></p>
            <p>Kozy Koala™ Pillow Sleeper is ideal for those  summer nights when the kids want to sleep out or when you go camping. The  all-in-one pillow camper consists of …. [MORE]</p>
          </div>
          <div id="sidebar-image3">
            <p><img src="../images/solrx for web.jpg" width="220" height="164" alt="sunscreen" /></p>
          SolRX® Sunscreens are very sweat and water  resistant – ideal for anyone who leads an active outdoor lifestyle … whether  you’re in the water or not! [MORE]</div>
      </div>
        <!-- TemplateBeginEditable name="main-content-region" -->
        <div id="main-content">main content</div>
        <!-- TemplateEndEditable -->
      <div id="footer">
    <div id="footer-navigation-bar"><a href="../family-about.html">about</a> | <a href="../family-advertise.html">advertise</a> | <a href="../family-contribute.html">contribute</a> | <a href="../family-contact.html">contact</a> | <a href="../family-unsubscribe.html">unsubscribe</a></div>
          <div id="footer-text">Family Australia | ABN 33150685385 | For all advertising enquiries please contact <a href="mailto:[email protected]">[email protected]</a><br />
    Copyright © 2010 Family Australia. All rights reserved.
    </div>
      </div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("family-subscribe-menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    The links which I want to apply a different style to are contained in the Div Tag called "Footer-Navigation-Bar" .
    a:link {
    color: #30C;
    text-decoration: none;
    a:hover {
    color: #F30;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:active {
    text-decoration: none;
    Hello
    You can see above the CSS that applies to your links.  If you have links that you want to style in a diferent way, just write the rule Like this:
    #Footer-Navigation-Bar a:link {
    color: red;
    text-decoration: none;
    Or whatever.  There are other ways but this will do you as you already have those links you want styled differently in a div with its own ID.  The new rule should come after the other rules in your CSS I think to make sure of the cascade although thinking about it,  there's something called specificity in CSS which means that the rule that I suggest will win out anyway.  All that you are doing in my suggestion is selecting the a:link that is a descendant of an element with that particular ID.
    I hope that helps.  I'm a bit of a novice and might have got a bit jumbled with the cascade/specficity thing but hey, I reckon that will get you where you want to go....
    Martin.

  • How do I (or can I) apply alternating para styles (using "next style") to existing text?

    I am trying to apply background shading to alternate lines of text by creating two paragraph styles and naming each as the "next style".
    This works when manually entering text - but I can't figure out if it is possible to apply it to existing copy with out applying the styles to each line individually.
    Thanks for any help
    d

    Select multiple paragraphs of text, then right-click on the name of your first style in the Paragraph Styles panel. "Apply Style, Then Next Style" should be one of the options.

  • 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 Portlets on the same Portal page?

    How do you apply different styles to Portlets on the same Portal page?
    I'm new to this kind of thing, but understand that something called "cascading style sheets" can help here?
    What are these, how do you use them, and can you make different Portlets (all types - PL/SQL, Java, Applications, etc) on the same Portal page have different styles assigned?
    Thanks!

    Jeff,
    Apply Oracle Portal styles at the region level. Your portlets within each region will inherit the style defined for the region.
    You may want to check out Report #40050 at portalcenter.oracle.com, "Design an Attractive and Compelling Portal Interface" for a good overview of the various design features of Oracle Portal.
    Here is the link:
    http://portalcenter.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/OTN_CONTENT/MAINPAGE/OWSF_2003_PAPERS/40050_STOVER.PDF
    Regards,
    Jay

  • 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

  • Apply different styles to text within a Text field?

    I am working on an application that consumes a user-generated
    HTML file and displays it on part of a Flex screen. The main
    problem is HTML can look something like this (for example):
    Hello <span class="greeting">Mr. Smith</span>,
    how are you doing <span class="title>today</span>.
    Unfortunately, the Flex Text control only accepts a single
    style that is applied to all text within the control and the
    htmlText property only allows for very basic HTML markup and does
    not include support for applying styles to a part of the text.
    I've thought about creating a series of Text controls (each
    with its own style as needed) and putting them together in an HBox.
    However, this messes up word wrapping if the text exceeds the width
    of its container.
    Anyone have any ideas how to solve this problem?
    Thanks!
    Dustin

    Could you please elaborate your requirement since you can have different instances of synchronized text have different formatting.
    So your original menu can consist of various text blocks (marked with different content tags) and then duplicate them and apply different formatting to the copied text. The text is still linked and an update to one will get synced to the other.
    If you are looking at applying different styling to chunks of text within one textframe (marked using a content tag), THAT is not possible, since the tagged content is supposed to maintain integrity of text and not the associated styling (which you should be able to apply independently).
    Hope that makes sense.
    Cheers,
    Vikas

  • GREP help "apply style before the ' – ' and add return"

    Hi,
    I'm a newbie to GREP and not good at code so I need some help.
    I think if I new the code to say " apply Heading Paragraph style to text before the ' – ' and add return.
    Then it would work.
    I'm OK with looping nested paragraph styles.
    This is what I have currently got:
    Nerang Community Respite Centre – 5578 1668
    Provides a podiatry service.
    www.nerangrespite.org.au
    Ozcare Allied Health Program – 5569 6200 / Fax 5578 1331 
    Physiotherapy, occupational therapy, speech pathology, podiatry, dietetics and social work.
    www.ozcare.org.au
    And this is how I need it formatted with styles applied
    Nerang Community Respite Centre (Heading Paragraph Style)
    5578 1668 (Phone Paragraph Style)
    Provides a podiatry service. (Descrip Paragraph Style)
    www.nerangrespite.org.au (URL Paragraph Style)
    Ozcare Allied Health Program (Heading Paragraph Sty
    5569 6200 / Fax 5578 1331  (Phone Paragraph Style)
    Physiotherapy, occupational therapy, speech pathology, podiatry, dietetics and social work. (Descrip Paragraph Style)
    www.ozcare.org.au (URL Paragraph Style)

    Thanks for the help so far. It's working but I still to iron some things out.
    Replacing the em dash with a paragraph space or return is straight forward. But getting the styles applied while doing that is not working.
    Also I want to split the phone and fax separated by the '/" onto separate lines.
    1. Not all the entries are the same see below example.
    This is what I have currently got
    ^p = paragraph
    Nerang Community Respite Centre – 5578 1668^p
    Provides a podiatry service.^p
    www.nerangrespite.org.au^p
    ^p
    Ozcare Allied Health Program – 5569 6200 / Fax 5578 1331^p
    Physiotherapy, occupational therapy, speech pathology, podiatry, dietetics and social work.
    www.ozcare.org.au^p
    Volunteering Gold Coast – 5591 8388^p
    Cerebral Palsy League of Queensland – 5532 2088 / Fax 5591 7725^p
    Provides community access to people with Cerebral Palsy and related disabilities.^p
    And this is how I need it formatted with styles applied
    Nerang Community Respite Centre (Heading Paragraph Style)
    5578 1668 (Phone Paragraph Style)
    Provides a podiatry service. (Descrip Paragraph Style)
    www.nerangrespite.org.au (URL Paragraph Style)
    Ozcare Allied Health Program (Heading Paragraph Style)
    5569 6200 (Phone Paragraph Style)
    Fax 5578 1331  (Fax Paragraph Style)
    Physiotherapy, occupational therapy, speech pathology, podiatry, dietetics and social work. (Descrip Paragraph Style)
    www.ozcare.org.au (URL Paragraph Style)
    Volunteering Gold Coast (Heading Paragraph Style)
    5591 8388 (Phone Paragraph Style)
    Cerebral Palsy League of Queensland
    5532 2088 (Phone Paragraph Style)
    Fax 5591 7725 (Fax Paragraph Style)
    Provides community access to people with Cerebral Palsy and related disabilities. (Descrip Paragraph Style)

  • Can you apply different paragraph styles for each orientation?

    I would like to apply different paragraph styles to the text, depending if it is viewed on portrait or landscape mode, but everytime I change one the other changes automatically. Is there a way to break this link?
    Thanks

    Unfortunately, iBA doesn't provide a lever to pull that can make a particular text style orientation specific.

  • Applying different style sheets

    I'm not sure if this is possible, but I would like to apply
    different style sheets to different outputs.
    For example: (Both outputs use the same data)
    Output to PDF = Style Sheet 1
    Output to WebHelp = Style Sheet 2
    Is there an easy way to do this?

    It would be lovely to select a style sheet as you are
    generating the output, wouldn't it? As far as I can see, however,
    style sheets are assigned per topic thru a reference RH sticks in
    the HTML header.
    Which leaves you two options:
    1) The simple but tedious way: In the Topics list (on the
    right), select all the topics. Right-click and pick Properties.
    When the Properties window opens, choose the stylesheet you want on
    the Appearance tab. Click OK. You would need to do this each time
    you switch from generating WebHelp to generating PDF.
    2) The complex but cool if it works way: I don't use the PDF
    plug-in - do you still generate PDF from the Printed Documentation
    layout? If so, can you use the StyleMapping.dot template? (I seem
    to remember that the PDF goes through a Word stage behind the
    scenes.) You can open StyleMapping.dot in Word (be sure to use File
    > Open so you get the .dot) and change the styles into what is
    effectively a new style sheet. It may take some tweaking - I still
    can't get my bulleted styles to come out quite right - but it's
    great for global changes.
    HTH,
    Elisa

  • Apply different styles to TileList Renderer

    Hi guys,
    I created a TileList:
    <mx:TileList
    id="tile"
    dragEnabled="true"
    dropEnabled="false"
    allowMultipleSelection="true"
    itemRenderer="CamCanvas"
    dataProvider="{model.pictures}"/>
    and I created my own itemRender="CamCanvas":
    which is just a simple Canvas component. What I would like to
    do is to set a border/padding between elements in the TileList.
    By default they are next to each other. Do you know any way
    to do that?

    Jeff,
    Apply Oracle Portal styles at the region level. Your portlets within each region will inherit the style defined for the region.
    You may want to check out Report #40050 at portalcenter.oracle.com, "Design an Attractive and Compelling Portal Interface" for a good overview of the various design features of Oracle Portal.
    Here is the link:
    http://portalcenter.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/OTN_CONTENT/MAINPAGE/OWSF_2003_PAPERS/40050_STOVER.PDF
    Regards,
    Jay

Maybe you are looking for