Different languages in different styles

In the previous version of Pages, I could choose a language for my different styles. Now, it automatically chooses a language for me. I use both English and French, and I would need to be able to assign a language for every style. Help please?

You could create different styles and name them French, English or which ever you like, and use them for the text you see is French, English or which ever. The Spell check will work for any language (that the computer have dictionaries for) if you have Automatic language set in the System preferences.

Similar Messages

Different Styles in PlainView - Syntax Highlighting?

Hi,
I've managed to extend PlainView and looking at old JEdit code I have the syntax highlighting working for the most part. However, at certain times while typing the cursor starts to get way ahead of the text it's typing. And as I backspace on the line the cursor eventually gets closer to the character the closer it gets to the start of the line.
I'm overridding the "drawUnselectedText()" method in PlainView to do the coloring.
Here's the code, you can see the call to SyntaxUtilities.paintSyntaxLine() which is JEdit's class to do the drawing.
         * Renders the given range in the model as normal unselected text. This
         * is implemented to paint colors based upon the token-to-color
         * translations. To reduce the number of calls to the Graphics object,
         * text is batched up until a color change is detected or the entire
         * requested range has been reached.
         * @param g
         *            the graphics context
         * @param x
         *            the starting X coordinate
         * @param y
         *            the starting Y coordinate
         * @param p0
         *            the beginning position in the model
         * @param p1
         *            the ending position in the model
         * @returns the location of the end of the range
         * @exception BadLocationException
         *                if the range is invalid
        protected int drawUnselectedText(Graphics g, int x, int y, int p0, int p1) throws BadLocationException {
            System.out.println("p0: " + p0 + " p1: " + p1 + " x: " + x + " y: " + y);
            // Get the start of the element
            int lineIndex = doc.getDefaultRootElement().getElementIndex(p0);
            // Get the element for the line
            Element elem = doc.getDefaultRootElement().getElement(lineIndex);
            System.out.println("lineIndex: " + lineIndex + " elemStartIDX: " + elem.getStartOffset() + " elemEndIDX: " + elem.getEndOffset());
            // Get the line text
            doc.getText(p0, p1 - p0, currentLineText);
            // If highlighting, mark the tokens
            if (marker != null) {
                Token t = marker.markTokens(currentLineText, lineIndex);
                x = SyntaxUtilities.paintSyntaxLine(currentLineText, t, styles, this, g, x, y, p0, p1);
                System.out.println("Painted line at: " + x);
            } else {
                // No highlighting requested, draw normal text
                Font defaultFont = g.getFont();
                Color defaultColor = styles[0].getColor(); // Default color of text
                g.setFont(defaultFont);
                g.setColor(defaultColor);
                x = Utilities.drawTabbedText(currentLineText, x, y, g, this, p0);
            // Set the last line processed
            lastLine = lineIndex;
            return x;
Here is the code from the paintSyntaxLine() method:
     * Paints the specified line onto the graphics context. Note that this
     * method munges the offset and count values of the segment.
     * @param line
     *            The line segment
     * @param tokens
     *            The token list for the line
     * @param styles
     *            The syntax style list
     * @param expander
     *            The tab expander used to determine tab stops. May be null
     * @param gfx
     *            The graphics context
     * @param x
     *            The x co-ordinate
     * @param y
     *            The y co-ordinate
     * @return The x co-ordinate, plus the width of the painted string
    public static int paintSyntaxLine(Segment line, Token tokens, SyntaxStyle[] styles, TabExpander expander, Graphics gfx, int x, int y, int p0, int p1) {
        Font defaultFont = gfx.getFont();
        Color defaultColor = Color.black;
        FontMetrics fm = gfx.getFontMetrics(defaultFont);
        int offset = 0;
        while (tokens != null && tokens.id != Token.END) {
            int length = tokens.length;
            if (tokens.id == Token.NULL) {
                if (!defaultColor.equals(gfx.getColor()))
                    gfx.setColor(defaultColor);
                if (!defaultFont.equals(gfx.getFont()))
                    gfx.setFont(defaultFont);
            } else {
                styles[tokens.id].setGraphicsFlags(gfx, defaultFont);
//                fm = gfx.getFontMetrics();//[tokens.id].getStyledFont(defaultFont);
//                FontMetrics dfm = Toolkit.getDefaultToolkit().getFontMetrics(defaultFont);
//                System.out.println("Font Info: CharWidth[" + fm.charWidth(line.array[p1])+"], Max Advance[" + fm.getMaxAdvance()+"]");
//                System.out.println("Default Font Info: CharWidth[" + dfm.charWidth(line.array[p1])+"], DMax Advance[" + dfm.getMaxAdvance()+"]");
////                x = fm.charsWidth(line.array, p0, length);
            line.count = length;
            x = Utilities.drawTabbedText(line, x, y, gfx, expander, p0);
            line.offset += length;
            offset += length;
            tokens = tokens.next;
        return x;
I'm not sure what the problem is..i thought it might be an issue with the View and drawing multiple font styles. Since plain view only deals with a single font color and size. I tried using LabelView but that seems to need a StyledDocument and I had problems when I tried to use DefaultStyledDocument for my syntaxdocument. I was getting strange offset issues when using the Segment class.
Here's what I posted: http://forum.java.sun.com/thread.jspa?threadID=780801
I am using PlainDocument because that seemed to be what everyone was using for a syntax editor..since the structure of the document in a Plain Document is less complex.
I orginally started out using the setCharacterAttributes() method on the DefaultStyledDocument and letting the views draw the text. That all seemed to work except for the "segment offset" issue. And I wasn't sure where the best spot to get the document to redraw subsequent lines in the case of changing a multiline comment, etc.
So, everything I read about others attempts for syntax highlighters seems to use either StyledEditorKit with a fixed language set with custom parsing and using the setCharacterAttributes method. Or they use the plaindocument approach with a custom view..(which no one seems to share the source) or the project just simply uses the JEditTextArea directly (which we can't do in our product).
We don't need multiple fonts per-line.. The document will always use one font face (Arial, Helvetica, etc) but may use different styles per word (bold, italic, etc).
I thought I'd need to use FontMetrics to get the size of the font and such. But there didn't seem to be a difference in measurements based on the style of the font. (i.,e A bold font has the same charWidth('m') size as a regular style.
At least that's what my test program showed..
The other thing I noticed is that when the document is successfully colored and I use the mouse to select a region of text, the style of the text reverts back to normal. I'm sure that's because I only override the drawUnselectedText() method.
Any ideas? Is there anyone who has successfully done this?
Thanks,
- Tim

I just tried using a proportional font in my editor, and now I'm seeing your runaway-caret problem. Specifically, the caret remains in sync with the text as long as no bold characters are encountered, but it gets noticeably farther out of whack with each bold character it passes. I suspect that, when you measured the charWidth, your FontMetrics object wasn't really based on a bold font, because bold versions of proportional fonts are larger. And of course, the model/view conversion methods assume that the same style of the same font is used throughout the document. I've never had to deal with that problem, since I've always used monospaced fonts by preference, and bold versions of monospaced fonts really are the same size as the non-bold versions. I suggest you do the same, because getting this to work with proportional fonts look like a major hassle.

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

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>
</div>
</div>
    </div>
</div>
</div>
<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>
</div>
</div>
    </div>
</div>
</div>
</div>
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>
</div>
</div>
<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>
</div>
</div>
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>
</div>
</div>
</div>
</div>
</div>
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.

Different styles to the portlet regions

Oracle Portal 9.0.2.2.22
How to apply different styles to the portlet regions within a page?
Regards
Rajesh Kumar

Hi Rajesh -
Unfortunately you can only change the style of item regions, not portlet regions. If you only need to change the portlet background color there is a little trick you can do with version 9.0.2.6 (I do not have a 9.0.2.2 build to try with)
Place the portlet that should have a different background color on a different page. Set the Style property for this page. The style should set the Common background color as the color you wish to be the portlet background color. In the style, set the portlet background color to NULL (allowing the common background color to show through). In the page properties, on the optional tab, expose this page as a page portlet, and ensure the page does not use the style of the page on which the portlet is placed.
Now expose the page portlet on the page you originally wanted the portlet to show.
Hope this helps. I would be interested to know if this also works in 9.0.2.2 as in 9.0.2.6.
Thanks,
Candace

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

Select different style for each border of a rectangle

Hi,
I just wanted to have a Rectangle (or some other component) which one must have different style for each of its borders.
For example I want the top and the right border with a thickness of 2 and others with a thickness of 0 (so we can only see those two borders).
How can I do it ?
I tried with stroke (but stroke is for all borders, we can't specify which style for which border).
Thanks,
Jeff

Well it is not clear what he is looking for just rect or a component with specific border. I havnt used flex 4 so i am not sure how to get it working for that
, but i am sure it will work on the same lines.
I have also given another option to create a it using lineTo() and moveTo().But this should only be used if this rect is not going to be used as a container.
I think i should elaborate...
Create a custom component using UIComponent. In updateDisplayList() after super.updateDisplayList() call a method say drawRect(). In this drawRect() use lineTo() and moveTo() to draw the rectangle. you would have to use the component's height and width to draw the rect.
Let me know if you need more clearification...

Assigning Different Style Classes to Portlet Columns

Is it possible to use the CSS mill to create a style sheet that assigns certain properties to particular columns in the portal body? For example if I wanted the third column in my page layout to tell portlets to turn their borders off and have a gray background while keeping the borders and white background for the other columns.
I was also told that narrow portlets and wide portlets reference different style classes but I don't see them from viewing the source from my browser. I see platportletNarrowHeader and platportletWideHeader which is for the Portlet Title Bars but not the body. If I wanted all narrow columns to reference a different style class than wide, how could I go about that?

Allow me to clarify how this works.
It isn't so much of a difference between narrow portlets and wide portlets, it is a difference between portlets in the narrow columns and portlets in the wide column. (Narrow portlets can be placed in the wide column.)
Portlets in the wide column reference the styles platportletHeaderBg, platportletWideHeader, and platportletBorder.
Portlets in the narrow column reference the styles platportletHeaderBg, platportletNarrowHeader, platportletBorder, and platportletLightBg.
As you can see there are some styles that the two have in common. platportletHeaderBg controls the table row that contains a portlet header. platportletBorder controls the table that contains the portlet content.
For portlets in the narrow column platportletNarrowHeader controls the text inside the portlet header (the portlet's name). platportletLightBg controls the table row that contains the portlet content.
For portlets in the wide column platportletWideHeader controls the text inside the portlet header (the portlet's name). There is no style that controls the table row that contains the portlet content for portlets in the wide column. Instead it uses the color of the body of the page.
So changing the common styles will affect all columns, while changing the narrow column or wide column specific styles will affect those columns. So you can't just change the style for a third column.
If you want to go beyond those limitations it would involve making a code change in MyPortalContentView.

How to define different styles to different levels of hierarchical titles?

With difficulty, I found how to define a style for hierarchical titles, i.e.:
1. First level
1.1. Second level
1.1.1. Third level
etc.
But all levels will have the same character parameters (font, size, etc).
What I would like is, e.g.:
1. First level
1.1. Second level
1.1.1. Third level
In MS Word, it is easy: you define a different style for each level. In Pages, I found no way to do this, and no clue in the user's manual.
Is it possible (I guess it should be), and if so, how?
Thanks
Éric

You need to use the Styles Drawer. Go to: View > Show Styles Drawer. To define a Style, highlight the formatted text then click the plus sign at the bottom of the styles drawer. To delete a style, secondary click on the style and choose Delete Style.

How to set different style for headings in quicklaunch

Hi,
would like to assign a special style for Headings in the Quicklaunch. Is it possible to assign a different style to headings using CSS?
Thanks
Sven

Hi Sven,
Please refer to the following article, it might help.
Customize Change quick launch style and design SharePoint
.s4-ql UL.root > LI > .menu-item {
PADDING-BOTTOM: 1px; MIN-HEIGHT: 30px; BACKGROUND: url(http://md-jayabharathi:28586/SiteAssets/BCKHover.jpg) no-repeat 0px -10px; FONT-SIZE: 1em; PADDING-TOP: 1px
Please don't forget to mark it as answered, if your problem resolved or helpful.

Different styles

Post Author: Andres
CA Forum: Xcelsius and Live Office
Hello.
I would like to know why does Crystal Xcelsius shows me, for example, a Gauge with a different style to those showed as examples in the Xcelsius webpage.
If I download an example, I can use the Gauge of the example, but I can't copy it to my graph.
What can I do to copy the style of the things I like in the demos?
Thanks.

Post Author: bowens
CA Forum: Xcelsius and Live Office
Andres,
The examples are probably using a different "Skin". To change skins, from the tool bar go to View - Change Skins. There are about six different Skins that you can use. One thing to be aware of is that changing the skin may change all the components; it is worth experimenting with.
Bill

Tutorial: How to work with different styles?

Hi all
I got the task to learn how to use different styles in Reports so I can assign different styles to the same report. Is there a tutorial available describing this?
Thank you.
Joshua Muheim

Hi Dirk,
I think some people are misunderstanding your issue, or are just sidestepping it.
Do you basically have three seperate Service Desk configurations on one Solution Manager? Meaning their own subjects, categories, actions, org structures, statuses, etc...
Perhaps the Service Provider functionality could help you. I haven't used it before but my understanding is it's for people supporting multiple customers with the Service Desk.
I think Christian gave you the best route to start exploring. Good luck and let us know how it goes.
I might be wrong but I think this is not possible. It is always ABA Message/Basis Notification/SLF1 (however you call it) which will be created in first place.
You may change the transaction type which will be generated from this automatically. For instance from SLFN to ZLFN. (Probably it is possible to modify this copy procedure to get ZLF1 if iBase component is SID1, ZLF2 if SID2, and so on - but I did not have a look into this yet).
If you raise the message from different systems your message will contain the appropriate iBase component.
regards,
Jason

Report's pages in 2 different styles

Hello there,
can we implement the report with first page and rest of the pages in 2 different styles.
Thank you

oh thanks but can i pass a parameter to the jsp page residing in another server using redirect? e.g.
response.sendRedirect("http://www.anotherserverpage.jsp?valuetopass=10");
will i be able to use Response.getParameter in the page residing in the other server?

Tool Tips - Different Styles?

Hi,
Had a browse through the Flex 2 docs but couldn't find
anything around this...
I'm able to style a tool tip through an external stylesheet
using
ToolTip
// style code here
Is it possible to define different styles for different tool
tips? Say you have 2 text fields on a form - could you have the
tool tip for the 1st text field say with orange text and the
tooltip for the 2nd text field have blue text?
Thanks in advance!

You can always roll your own. Just use a canvas, detect the
mouse events and use a timer if you need a delay before it shows.
Mouse events are nice cause you can have a follow tooltip that
moves with the mouse.

Different languages in different styles

Similar Messages

Maybe you are looking for