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

Similar Messages

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.

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

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

The Content sync feature won't allow me to style specific text within a text block.

I am trying to change the color of a few words within a paragraph but after I add a content tag to it, it will not let me. It will just change the color of all text within the block. Is this a bug?

The issue I am having is that I can't do any text styling to specific words within my text box like I can without a content tag.
Let me explain. I have a few words within a text block that I want to emphasize with a color. It will not allow me to highlight the word and change its color if it has a content tag - it will change all of the text within the block that color. I have no problem doing it without the tag. Why is that?

Finding A Piece Of Text Within A Text?

Hi.
I am trying to create a program to find a piece of text within a file (containing text). I know that my life could be made much easier if I had the util.java.regex package but it doesn't seem to import.
I am working on a Windows XP Platform.
I have tried the Hello World program which works fine but it is just trying to import this package...

I am trying to work through this slowly so that I can understand each stage... so where I have come upto now is why does the following code not compile. I am just interested in taking a .txt file at the standard input which is used to serach against an Actor's name that I specify in the next (argument?) line?
Thanks for all the help
My Code so far...
import java.io.*;
// This line always has to be put in
public class MyFirstFileReadingAppTwo
          // Main method
          public static void main (String args[])
          // Stream to read file
          System.out.print("Enter your filename: ");
          BufferedReader br = new BufferedReader(new FileInputStream (System.in));
          String userName = null;
          try
          // Open the input stream
          String file = br.readLine();
          BufferedReader reader2 = new BufferedReader(new FileReader(file));
          // Read a line of text
               System.out.println(new
               ln(new (fin).readLine() );
          // Close our input stream
          fin.close();
               // Catches any error conditions
               catch (IOException e)
               System.err.println ("Unable to read from file");
               System.exit(-1);
}

PLEASE make it possilbe to apply different styles to synchroniez text !! I have a long restaurant menu which i have to update 3 times insted of just 1 :-(

Br,
Mike

How I got around it is, the heading which is in bold (what the food is) would be in a collection across the desktop, tablet and phone, and then the desciption of what the food is (not in bold) would be in another collection across the 3 platform, this then would updaye it across all three platforms and keep the styling to the text

Select in move text within a text box

I am trying to figure out if there is a setting in illustrator where you can select one or more words and move them to a different part of whatever you have type. As an example let say I type "The dog has brown spots." and I want to move the word brown in front of dog so it says "The brown dog has spots." I hope this makes sense. I am using Illustrator CS4 on a windows pc.

Thanks. Yes I have used many different programs that have the ability to drag text but I was stumped as to whether Illustrator which I have used for awhile would do it also. Seems like such a simple feature to include but then again what do I know since I know nothing about programming. Well cut and paste it is.
Rich

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

Use Conditional Tags to apply different Style Sheets / Skins for branding purposes?

RoboHelp HTML > WebHelp layout appearance using Conditional Build Tags
I have a customer who supplies an application to different corporates, and brands his product by changing the appearance, using a selected style sheet to suit the Brand.
Is there a way to customise a WebHelp layout, to select a style sheet and a skin for Brand A, and another style sheet and skin for Brand B, and so on?
Would this work in RH7? (The customer uses this at the moment.)
Would this work in RH8? (They could upgrade if this solves the problem.)
Philip Tory, Technical Author

Hi Phillip
RoboHelp 8 offers an ability to nominate a specific CSS file in the Single Source Layout recipe. So sure.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

How do I allow a user to enter multiple lines of text within a Text Entry Box?

I need a text entry box that allows for multiple lines to be inputted with in a Text Entry Box. How can I make this possible?

Go to the Options accordion and check 'Show scrollbar'.
Lilybiri

I can't select text within a text frame.

I'm very rusty with InDesign, so forgive me if this is a stupid question. I am simply trying to select text to cut and paste it. I have the Text tool selected, but I can't seem to select the text that's already in the text frame. The cursor doesn't even show up when I click in it. This only happens with one of my text frames. With the others, everything is working as expected.

Three possibilities:
The frame is locked.
The frame is on a locked layer.
The frame is on a Master Page.

How to apply style to partial text within a tag in xml file

I have created a webpage using Dreamweaver CS4 Spry Regions. Everything is functioning as expecting, however now I need to apply a style to part of the text. Every occurance of the company name needs to be in italics - the problem is that the company name appears within different parts of the text within a set of tags.
http://www.certifiedangusbeef.com/private1/sales/facts/index.php
ie - <description> this is my company name which must appear in italics</description>
In this example, only "company name" needs to be italicized. We have created an XSL file that applies the italics properly when the XML file is viewed in the browser. But it does not have any effect on the final web page - as though spry is blocking the XSL or we've missed a step in linking all the files together.
Here's the XSL code:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp   " ">
<!ENTITY copy   "©">
<!ENTITY reg    "®">
<!ENTITY trade "™">
<!ENTITY mdash "—">
<!ENTITY ldquo "“">
<!ENTITY rdquo "”">
<!ENTITY pound "£">
<!ENTITY yen    "¥">
<!ENTITY euro   "€">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="text()[ancestor::description]" name="replace">
        <xsl:param name="pString" select="."/>
        <xsl:choose>
            <xsl:when test="contains($pString,'Certified Angus Beef ®')">
                <xsl:value-of select="substring-before($pString,'Certified Angus Beef ®')"/>
                <i>Certified Angus Beef<sup> ®</sup> </i>
                <xsl:call-template name="replace">
                    <xsl:with-param name="pString"
                    select="substring-after($pString,'Certified Angus Beef ®')"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="$pString"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
    <xsl:template match="text()[ancestor::item]" name="replace1">
        <xsl:param name="pString" select="."/>
        <xsl:choose>
            <xsl:when test="contains($pString,'Certified Angus Beef ®')">
                <xsl:value-of select="substring-before($pString,'Certified Angus Beef ®')"/>
                <i>Certified Angus Beef<sup> ®</sup> </i>
                <xsl:call-template name="replace">
                    <xsl:with-param name="pString"
                    select="substring-after($pString,'Certified Angus Beef ®')"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="$pString"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
</xsl:stylesheet>

An element attribute is set with the method
setAttribute(String name,
                         String value)or the
setAttributeNode(Attr newAttr)method.

Add style to large block of text without affecting existing styles within that text

Hello! First post here.
I have a long document of text that mostly does not have text styles attached (this was a mistake). However, there is a large number of areas of styled text within.
Is there a way to select all the text and apply a style to only the unstyled text without affecting the existing styles?
Doing this by hand text block by text block would take a long long time.
Any help is greatly appreciated.
THX!
Ian

winterm wrote:
What do you mean by "unstyled text"? It must have some definition, anyway.
Like others, [No Paragraph Style] and [Basic paragraph] are searchable, too.
boomshakalaka! Thanks! Im familiar with this panel but didnt see how to specify 'Character Style: [No Character Style]'.
Had to click on the icon

Apply different styles to text within a Text field?

Similar Messages

Maybe you are looking for