How to create a background image for each item in a List object

Hello.
I am trying to create a background image that displays whenever a user posts something to a list. For example when a user posts text it would appear in a list. The new item in the list would contain a specific background image with the users text appearing on top of the background image. I do not want a background image for the entire list, rather each item within the list.
I am not sure how clear this is so I added an image below. When a user enters text in and clicks the "post-it" button their text would appear below with the sticky note background.
I am not sure which list type would be best for this problem or how to create insert the image, so I am open to suggestions.
Thank you for your help. Any advice or guidance will be greatly appreciated!

Hi
the easiest way would be with itemRenderer.
You have to do two things:
1. In your list declaration use a item renderer: <mx:List itemRenderer="myRenderer"/>
2. create a flex component myRenderer that will be the single item. This can be a canvas with a background image and a text field on it.
When you add a new item to the list, a new myRenderer item will be created and the data property will be passed to it. So you have to put "data" in your textField.
If you need more help try looking at Tour de Flex samples, they're pretty easy.
Andrei

Similar Messages

How to add different background image for submenu items???

Hi all,
I'm pretty new to web design and CSS in particular. Here's my problem...
I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
How would I go about doing this and how would I assign the class to just the submenu items?
Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
Really appreciate any help!

Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
Just one little issue left to tackle...
I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 120px;
    float: left;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-repeat: repeat-x;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #666666;
ul.MenuBarHorizontal li li
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: 24px;
    background-color: #333333;
    background-image: none;
    padding: 0;
    margin: 0;
    left: -1px;
ul.MenuBarHorizontal li li a
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    height: 24px;
    background-image: none;
    font-size: 12px;
    font-weight: normal;
    border: 0px 0 0;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 120px;
    position: absolute;
    left: -1000em;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    height: 24px;
    width: 120px;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal li a
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    text-transform: capitalize;
    text-align: center;
    white-space: normal;
    padding: 0px;
    height: 24px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
    background-repeat: repeat-x;
    line-height: 22px;
ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: none;
    background-repeat: repeat-x;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-transform: uppercase;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Best way to create a background image for all resolutions without drastically increasing file size.

I see a lot of great background images with complex designs that resize with different screen resolutions. I can create the designs, but I don't know how to create a complex image for large screen resolutions without making it a large file, or it loosing quality with it stretches to the larger size. Is there a code that resizes images when stretched, or do I just have to live with a slower load speed with complex background images?

The background doesn't resize, it shrinks:
http://johnpatrickgiven.com/jquery/background-resize/
Basically make a 1920x1080 or higher resolution file and use that script. There will always be a maximum but based on your response that is not your monitor. Photoshop and other tools do a pretty good job compressing jpeg files and most internet connections are fast enough to make it seamless.

How to create different log files for each of web applications deployed in OC4J

Hi All,
I am using OC4J(from Oracle) v1.0.2.2 and Windows2000. Now I want to know
1. how to create different log files for each of my deployed web applications ?
2. what are the advantages in running multiple instances of oc4j and in what case we should run
multiple instances of OC4J ?
3. how to run OC4J as Windows2000 Service rather than Windows2000 Application ?
Thanks and Regards,
Kumar.

Hi Avi,
First of all I have given a first reading to log4j and I think there will some more easy way of logging debugging messages than log4j (If you could provide me a detailed explanation of a servlet,jsp,java bean that uses log4j and how to use log4j then it will be very helpful for me). The other easy ways (if I am not using log4j) to my problem i.e creating different log files for each of web applications deployed in oc4j are
I have created multiple instances of OC4J that are configured to run on different ports and so on each instance I have deployed a single web application . And I started the 2 oc4j instances by transferring thier error/log messages to a file. And the other way is ..
I have download from jakarta site a package called servhelper . This servhelper is a thread that is started in a startup servlet and stopped in the destroy method of that startup servlet. So this thread will automatically capture all the system.out.println's and will print those to a file. I believe that this thread program is synchronized. So in this method I need not run multiple instances of OC4J instead each deployed web application on single instance of oc4j uses the same thread program (ofcourse a copy of thread program is put in each of the deployed web applications directories) to log messages on to different log files.
Can you comment on my above 2 approached to logging debugging messages and a compartive explanation to LOG4J and how to use LOG4J using a simple servlet, simple jsp is appreciated ...
Thanks and Regards,
Ravi.

How to create an inspection lot for each line item of the Purchase order?

Hi,
How to create an inspection lot for each line item of the Purchase order ?
In detail if possible.

Hi
please check this
[thread|Create Inspection Lot;

How to create a custom measure for each level of a dimension

Hi all!
Can Anyone please explain me with an example, how to create a custom measure for each level for a dimension? I dont mine if you use
one or more measures.
thanks in advance
hope someone helps me.

For example:I create a dimension for product_dim witch has 4 levels:total, class, family and item:
d_aben18
n1_aben18
n2_aben18
n3_aben18
n4_aben18
herarchy:h_aben18
cube:cubo_aben18
measure:med_aben18
I create this code to fetch the data to the dimension:
TRAP ON CLEANUP
SQL DECLARE c1 CURSOR FOR SELECT-
total_product_id,1,'N1_ABEN18',total_product_dsc,-
class_id,1,'N2_ABEN18',total_product_id,class_dsc,-
family_id,1,'N3_ABEN18', class_id, family_dsc,-
item_id,1,'N4_ABEN18',family_id,item_dsc-
FROM PRODUCT_DIM
"OPEN THE CURSOR
SQL OPEN c1
"FETCH THE DATA
SQL FETCH c1 LOOP INTO-
:APPEND D_ABEN18, :D_ABEN18_H_aben18_HIERDEF,:D_ABEN18_N1_aben18_LEVELDEF,:D_ABEN18_long_description,-
:APPEND D_ABEN18, :D_ABEN18_H_aben18_HIERDEF,:D_ABEN18_N2_aben18_LEVELDEF,:D_ABEN18_parentrel,-
:D_ABEN18_long_description,-
:APPEND D_ABEN18, :D_ABEN18_H_aben18_HIERDEF,:D_ABEN18_N3_aben18_LEVELDEF,:D_ABEN18_parentrel,-
:D_ABEN18_long_description,-
:APPEND D_ABEN18, :D_ABEN18_H_aben18_HIERDEF,:D_ABEN18_N4_aben18_LEVELDEF,:D_ABEN18_parentrel,-
:D_ABEN18_long_description,-
"SAVE THE CHANGES
UPDATE
COMMIT
CLEANUP:
SQL CLOSE c1
SHOW 'KK2'
Then I create a cube with use compression off, and in rules sum for example.
After, I create a measure and I select Override the aggregation specification for the cube, in rules I put nonadditive and I would like to create aprogram to assign distinct values to each level of the dimension. For example, I put 1, 2 3, and 4 values, but at the end I would like to put count(distinct(values)).
for that I create another program:
VRB D_RETURN DECIMAL
if D_ABEN18_N1_ABEN18_LEVELDEF eq 'N1_ABEN18'
then D_RETURN = 1
if D_ABEN18_N2_ABEN18_LEVELDEF eq 'N2_ABEN18'
then D_RETURN = 2
if D_ABEN18_N3_ABEN18_LEVELDEF eq 'N3_ABEN18'
then D_RETURN = 3
if D_ABEN18_N4_ABEN18_LEVELDEF eq 'N4_ABEN18'
then D_RETURN = 4
else d_return=26
return d_return
"SHOW D_RETURN
cubo_aben18_med_aben18_stored=d_return
but it doesnt work.I dont know how to put to assign or to see what I want.
I report the measure, or I report the program, but then how can I see the values of the measure?
thanks in advance

How to create a background job for call transaction

hi gurus
can any one suggest me
how to create the background job for call transaction.
thank you
regards
kals.

Hi,
Refer
https://forums.sdn.sap.com/click.jspa?searchID=10926107&messageID=889652
Regards
Kiran Sure

Need to create a background image for Joomla

I need to create a custom background image for a Joomla site.
Can anyone offer a simple tutorial on the steps I need to take to create the image?
Thanks

Okay. The image has a gold gradient from top to bottom, but the text repeats in smaller blocks.
First, you need a tiling image of some text, on a transparent background. Then, this image needs to be added as a pattern in Fireworks.
Next, you get to use your new pattern. In your document, create a tall rectangle with a vertical gradient. Make this image the same width as your tiling pattern, so that your resulting background image will also tile. Over that you put a rectangle with no color fill, but fill it with the text pattern. Save this working Fireworks document, then export to use on the Web.
I don't understand the phrase "I need to know how to size the image, possibly with CSS." Background images are the size they are. When this image is set to be the background, then it should be specified to repeat in the horizontal direction (repeat-x).
Here's some info on making a seamless tile:
http://forums.adobe.com/message/2384441
Using patterns:
http://www.entheosweb.com/fireworks/patterns.asp
There have been some recent threads on using gradients, just flip back a page or two (unless my mind's playing tricks on me and they're older).
Hmm... Possibly helpful:
http://spectrum.troy.edu/~techtip/classes/tutorials/fireworks/fw2004/gradient/gradient.htm

How to find out Address no for each item

Hi All,
how to find out address no (ADRNR) for each item in the PO (ME23N).
will it created by automatically or mannually?
Please Very urgent.
Thanks,
Subbu.

Hey Subbu,
We meet again
check
table EKPO
for each line item for a particular PO
there u have adrnr.
This is the address number for each line item

How to deactivate *Schedule Background Job for Work Items with Errors* SWU3

Hello Guys,
Can any one tell me how do I DEACTIVATE Schedule Background Job for Work Items with Errors in sap workflow SWU3.
Currently it is green which I don't want. I want to stop this service.
Regards
NK

Hello,
You could also just stop the job in tx SM37.
But why would you want to do this? As a test?
regards
Rick Bakker
hanabi technology

How to create new Batch No for An Item

Dear All,
I am doing Issue for production task through DI API. In that I need to Create a Batch no for an Item. That item was created as Batch with Release only in Item Master. Please help me how to create the batch no when I am Issue for Production ?.
Thanks,
lingam.

Dear Lingam,
If the process need manual selection as the one you are requesting, it will not be available to DI API. You may try UI API to see.
Thanks,
Gordon

How to do the background image for a site

Hi.
First, thanks for reading this.
I'm planning on using a gradient image as a background on a new site with black on the sides gradiating to blue in the middle which I created in Photoshop. The site is designed for 1024 (955) and up. How would I handle the background image so that no matter what the resolution above 1024, the visitor will see the gradient properly, meaning the blue will always be exactly in the center of the page and the image does not tile horizontally? (I don't want it to repeate from left to right when someone's resolution is really high)
I have seen a couple of sites that use solid images that appear to stretch the background image depending on the resolution, but have not been able to figure out the CSS code. In my case, I can have a single image that's say 5 pixels high, whatever width I need for the maximum (reasonable) resolution, and let it repeat from top to bottom.
Thank you.
MFitz721

Thanks for your reply, SnakEyez02 .
Another concern is wide-spread compatablilty on the largest number of browsers and PDAs possible, so it sounds like using the method you suggested would not be an option. What would you say is my next best option? Should I just design it for 1024 pixels wide (or perhaps 1440) and let what happens happen?
Thanks again.
Fitz21

How to create one primary key for each vendor

Hi all
i am doing IDOC to jdbc scenario
i am triggering idoc from R/3 and the data is going into DB table vendor through XI.
structures are as follows:
sender side: ZVendorIdoc (this is a customized IDOC , if i triger IDOC for multiple vendors then it triggers only 1 idoc with multiple segment )
Receiver side:
DT_testVendor
    Table
        tblVendor
            action UPDATE_INSERT
            access                     1:unbounded
                cVendorName         1
                cVendorCode        1
                fromdate                1
                todate                    1
             Key1
                cVendorName         1
if i trigger idoc for multiple vendors ,for example vendor 2005,2006 and 2010 . then i can see that the only key comes from the very first field (2005) and the whole record for vendor 2005,2006 and 2010 goes into the table with this(2005) as a primary key
now again if i send data for these three vendor 2005, 2006 , 2010, in which record for the vendor 2005 is same and for 2006 and 2010 are different than it takes 2005 as a primary key and it does not update the data in the table.
my requirement is like this:   for each vendor there should be one unique key assigned.
                                          for above said example there should come three keys one for each vendor .
could you please help me how to do this???????????

Hi,
In Mapping Make the statement is 0-unbounded.For each vendor create a statement.This will solve your problem.
Regards,
Prakasu.M

How to create a background image for each item in a List object

Similar Messages

Maybe you are looking for