Spark itemRenderer background color troubles

I've been spinning my wheels on this one all day. I have a DataGrid, and using a CSS file I have made the background transparent. I needed a column with icon images in each cell so I'm using an itemRenderer to add the images, which is working fine.
The problem is that the background of the cells using the item renderer is an off white solid color, where I need it to remain transparent like the rest of the DataGrid. I've tried using styles and setting backgroundAlpha, and I've also tried using the inline contentBackgroundAlpha, all to no avail.
The weird thing is that in all the documentation I've read says that the default background for an itemRenderer is transparent, which I'm finding is not the case. If anyone that has a solution to this, it would be much appreciated.

I still haven't solved this but after some experimenting I noticed that if I don't make the data grid background transparent (solid color rows) then the itemRenderer doesn't draw a white background. As soon as I set that backgroundAlpha property in the css to 0, it comes right back.

Similar Messages

Datagrid row selection Z-index & itemRenderer background

Hi, I have datagrid with custom item renderers (HBox). Now if
I change the Hbox bacground color and move the mouse above some row
in datagrid, actually focused row visualization (azure row) is
UNDER the itemrenderer background color so I can't see which row is
actually focused with the mouse. I would like to have this row
selection above the item renderer.
Thanks for help.

Solved. Done through overriding an updateDisplayList function
in the custom itemRenderer class.

I have trouble reading in Black and White. changing the background color for all

I have trouble reading in Black and White. On my PC I can change the background color (and I am not just talking about for a word or pages document) but for eveything so anything that was a white background I can put in what ever color I like but it still prints in Black and white.. I can't see how to do this on the Macbook air. on my PC I do this in display. Sort of putting colored film over the screen I dont know what to do. Can anyone help?

Hello Floridamacbookpro,
You may be interested in the 'invert colors' Accessibility feature. This can be invoked by pressing the Control, Option, Command, and 8 keys on your keyboard. This only affects your display, and does not have any affect on printed items.
Mac OS X displays inverted image colors (white on black, reverse type)
http://support.apple.com/kb/HT3488
Cheers,
Allen

Spark VideoDisplay - how to set `background` color

Hello!
How can I set the background color of the Spark VideoDisplay to be something else than the default black one?
Thank you.

There is no button involved in the following code, but it may
be of use to you:
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script>
<![CDATA[
private var origColor:uint;
private function init():void {
origColor = dc.getStyle("selectionColor");
public function setBackGrdColors(newColor:uint):void {
dc.setStyle("selectionColor", origColor);
if(dc.selectedDate){
var dayOfWeek:Number = dc.selectedDate.day;
else{
return;
switch(dayOfWeek) {
case 0:
if(sun.selected)
dc.setStyle("selectionColor", newColor);
break;
case 1:
if(mon.selected)
dc.setStyle("selectionColor", newColor);
break;
case 2:
if(tue.selected)
dc.setStyle("selectionColor", newColor);
break;
case 3:
if(wed.selected)
dc.setStyle("selectionColor", newColor);
break;
case 4:
if(thu.selected)
dc.setStyle("selectionColor", newColor);
break;
case 5:
if(fri.selected)
dc.setStyle("selectionColor", newColor);
break;
case 6:
if(sat.selected)
dc.setStyle("selectionColor", newColor);
break;
default:
break;
]]>
</mx:Script>
<mx:VBox horizontalAlign="center" verticalGap="20">
<mx:DateChooser id="dc" textAlign="left"
change="setBackGrdColors(cellColor.selectedColor)"/>
<mx:HBox width="100%" horizontalAlign="center">
<mx:CheckBox id="sun" label="Sun"/>
<mx:CheckBox id="mon" label="Mon"/>
<mx:CheckBox id="tue" label="Tue"/>
<mx:CheckBox id="wed" label="Wed"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center">
<mx:CheckBox id="thu" label="Thu"/>
<mx:CheckBox id="fri" label="Fri"/>
<mx:CheckBox id="sat" label="Sat"/>
</mx:HBox>
<mx:HBox width="300" horizontalAlign="center">
<mx:Label text="Background Color" />
<mx:ColorPicker id="cellColor"
selectedColor="#FF00FF"/>
</mx:HBox>
</mx:VBox>
</mx:Application>

Trouble changing background color. Using Dreamweaver CS4

I can't get to change the back ground color [The greenish grey color] , within a table, of a web page... Please see http://www.urefillit.com/index2.html Can use some help here... Also I notice that the foliage background is slow in loading... Any suggestions as to what is causing the loading delay?
Thanks in advance!!!!!
Using CS4.........The Code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Urefillit manufactures and markets Octenol, Asian Tiger lure, and Kaboom replacement type products</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="We are focused on providing high-quality products and a commitment to customer satisfaction - We will do everything we can to meet your expectations for the best priced and highest quality mosquito control and Kaboom replacement type products available on the market today" />
<meta name="Keywords" content="Octenol, Lure, Asian Tiger mosquito lure, Kaboom refills, mosquito magnet mosquito killing machine" />
<meta name="Robots" content="index, follow" />
<style type="text/css">
/*<![CDATA[*/
body {
        background-image: url(images/SambucusBlackLaceFoliage.jpg);
        background-color: #FFCC66;
body.c7 {background-attachment:fixed}
div.c6 {text-align: center}
p.c5 {font-family: Arial; font-size: 70%; text-align: center}
span.c4 {font-family: Arial; font-size: 70%}
span.c3 {font-family: Courier}
p.c2 {text-align: center}
span.c1 {font-family: Courier; font-size: 120%}
/*]]>*/
.c7 table tr .c11 {
        background-color: #F60;
        font-size: 18px;
tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: 16pt;
.c7 table tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: x-large;
.c7 table tr .c11 table tr td p {
        font-family: "Times New Roman", Times, serif;
        font-size: 16pt;
.c7 table tr .c11 #table2 tr th {
        background-color: #0F6;
/*]]>*/
</style>
<script src="file:///C|/Scripts/swfobject_modified.js" type="text/javascript">
</script>
<style type="text/css">
/*<![CDATA[*/
table.c16 {background-color: #FFD9B3}
p.c15 {text-autospace:none;}
th.c14 {background-color: #00FF99}
td.c13 {background-color: #00FF99}
th.c12 {background-color: #FF6666}
h2.c11 {font-size: 120%}
span.c10 {font-size: 150%}
span.c9 {text-decoration: underline}
div.c8 {font-size: 70%; text-align: right}
td.c7 {background-color: #003399}
p.c6 {text-decoration: underline}
table.c5 {background-color: #FFCC66}
td.c4 {background-color: #FFFFFF}
div.c3 {text-align: center}
table.c2 {
        background-color: #0F6;
        font-size: 18px;
th.c1 {background-color: #FFFFFF}
.c7 table tr th .c7 {
        color: #008040;
.c7 table tr th .c7 strong {
        color: #000;
.c7 table tr th .c7 {
        color: #000;
.c7 table tr th .c1 strong {
        color: #008000;
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
body {
        background-color: #FFCC33;
th.c1 {background-color: #FFCC66}
/*]]>*/
th.c11 {background-color: #FFFFFF}
th.c11 {
        background-color: #F93;
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        visibility: visible;
        width: auto;
.c7 table tr .c11 #table2 tr th .c2 a .c3 strong {
        color: #00F;
.c7 table tr .c11 #table2 tr td a {
        color: #00F;
.c7 table tr .c11 #table2 tr td a {
        color: #00F;
.c7 table tr .c11 #table2 tr td p a {
        color: #00F;
.BLUE { color: #00F;
.BLUE { color: #00F;
.blue { color: #00F;
.blue { color: #00F;
p.c1 {text-align: center}
p.c13 {font-size: 80%; text-align: center}
p.c71 {margin-right:0in;
margin-left:0in;
font-size:9.5pt;
font-family:"Comic Sans MS";
color:#000040;
span.c101 {font-size: 80%}
span.c12 {font-family: Courier New, Courier, monospace}
span.c6 {font-family: Arial}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c16 {border:0;width:88px;height:31px}
span.c15 {font-size: 120%}
div.c14 {color: #FFFFFF; font-size: 150%; text-align: center}
span.c13 {font-size:18.0pt; color:#B90D09;}
strong.c12 {text-decoration: underline}
span.c11 {font-family:'Comic Sans MS'; color:red;}
em.c10 {text-decoration: underline}
span.c9 {color:red;}
table.c8 {background-color: #006600}
td.c7 {background-color: #006600}
span.c6 {font-size: 150%; text-decoration: underline}
p.c5 {text-decoration: underline}
p.c4 {text-align: center; text-decoration: underline}
p.c3 {text-align: center}
span.c2 {text-decoration: underline}
div.c1 {text-align: center}
/*]]>*/
.c7 table tr .c11 #table2 tr td p {
        color: #00F;
.eight {
        color: #F00;
</style>
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
table.c11 {background-color: #0033FF}
th.c10 {background-color: #8D8D5E}
span.c9 {font-family:'Times New Roman','serif'; font-size:18pt;}
p.c8 {line-height: normal; margin-bottom: .0001pt; text-align: center}
p.c7 {; font-family: 'Times New Roman', 'serif'; font-size: 14pt; text-align: center}
p.c6 {; font-family: 'Times New Roman', 'serif'; color: #00F; font-size: 18pt; font-style: italic; text-align: center}
span.c5 {font-style: italic}
span.c4 {line-height:115%; font-family:'Times New Roman','serif'; font-size:16.0pt;}
p.c3 {text-align: center}
strong.c2 {text-decoration: underline}
th.c1 {background-color: #FFFFFF}
/*]]>*/
</style>
</head>
<body>
<![CDATA[*/
&amp;lt;!--
#Layer1 {position:absolute;
        width:110px;
        height:34px;
        z-index:1;
        left: 430px;
        top: 1116px;
        visibility: visible;}
#Layer2 {position:absolute;
        width:170px;
        height:33px;
        z-index:1;
        left: 536px;
        top: 652px;}
p.c7 {color: #000000; font-family: Arial; font-size: 80%}
--&amp;gt;
/*]]>
*/ <script src="file:///C|/Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<table class="c11" width="1250" border="15" align="center" cellpadding="5">
<tr>
<th width="888" height="2254" align="center" valign="top" class="c11 c10" scope="col">
<p><br />
<img src="images/webpagepicture.jpg" alt="WEB PAGE HEADER" width="1267" height="212" border="6" align="middle" /><br /></p>
<table width="1188" border="6" align="center" class="c2" id="table2">
<tr>
<th width="143" scope="col">
<p><a href="OctenolLure.html">Octenol Lure</a></p>
</th>
<th width="145" scope="col"><a href="FlowtronTypeLure.html">FlowtronTypeLure</a></th>
<th width="145" scope="col">
<p><a href="AsianTiger.html"></a><a href="AsianTiger.html">Asian Tiger Lure</a></p>
</th>
<th width="146" scope="col"><a href="Combolure.html">Combo Lure</a><br />
(Octenol & Lactic Acid)</th>
<th width="146" scope="col">
<p><a href="SkeeterVacLure.html">SkeeterVac Lure</a></p>
</th>
<th width="145" scope="col">
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Mosquito Magnet</a></p>
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Repair Guide</a></p>
</th>
<td width="145" align="center" valign="middle" scope="col"><a href="Kaboom.html">Kaboom</a><a href="/Kaboom.html">Replacement Tablets</a></td>
<th width="111" height="104" align="center" valign="middle" scope="col"><a href="https://www.paypal.com/us/verified/pal=sales%40urefillit%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" alt="Official PayPal Seal" width="98" height="108" border="0" align="top" /></a><br />
<br /></th>
</tr>
</table>
<br />
<table width="282" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" width="128" scope="col"><img src="images/flying%20mosquito.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" width="97" height="75" /></th>
<th class="c1" width="104" scope="col"><a href="#" onClick="window.open('https://www.sitelock.com/verify.php?site=www.urefillit.com','SiteLock','width=600,height=6 00,left=160,top=170');"><img src="//shield.sitelock.com/shield/www.urefillit.com" alt="website security" align="absmiddle" title="SiteLock" /></a></th>
</tr>
</table>
<p>



======================================================================================</p >
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">All About Urefillit, LLC</strong></p>
<p class="c3"><span class="c4">Urefillit, LLC prides itself on quality and consistency of its fine products, which are designed, made and manufactured in the USA. From production to quality control to final shipment, our highly trained team ensures the best quality, and reliable service for our customers. We are focused on providing high-quality products along with a commitment to customer satisfaction. We will do everything we can to meet your expectations for the best priced and highest quality mosquito lures, Kaboom replacement tablets, and bromine tablets available on the market today. With a variety of offerings to choose from, we're sure you will be happy with your purchase. Thank you for visiting our website and if you have any comments or questions, please feel free to contact us. We hope to see you again soon!</span><br /></p>
<p class="c3"><img src="images/made_in_USA.jpg" width="221" height="228" alt="usa" /><br />
<br /></p>
<p class="c3">****************************************************************************** *************<br />
<br /></p>
<p class="c6">REFUND POLICY: <span class="c5">Our number one goal is your satisfaction. If our product does not perform as advertised you may return then unused item for a refund. A 25% restocking fee may apply. Buyer pays the return shipping costs. Special and international orders items DO NOT qualify for a refund.</span><br />
<br /></p>
<p class="c7"><img src="images/ebay-top-rated-seller-tracking.jpg" width="230" height="158" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=fjp800&ftab=Feedbac kAsSeller"><br />
Check Out Our E-Bay Feedback</a></p>
<p class="c7"><br />
****************************************************************************************** ********************<br /></p>
</td>
</tr>
</table>
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">Using Octenol to Attract Mosquitoes<br /></strong><br /></p>
<p class="c3">Octenol is an natural chemical that occurs naturally as a by-product of plants and some animals that eat a lot of vegetable produce. If carbon dioxide is mixed with octenol, it has been found to be an attractant to several mosquito species. There are other insects such as no-see-ums and biting midges that are also attracted to this scent. It has been proven to be a very effective product, especially for no-see-ums.<br />
<br />
<img src="images/12137165-cartoon-stop-mosquito.jpg" width="168" height="168" alt="mosquito" /><br />
<br />
Octenol is also a pesticide ingredient that is used to attract mosquitoes and biting flies. It does not kill the insects; it only attracts them. It can be used in combination with other products and devices that do kill them once they are successfully attracted to the device. It is important to be aware that non-pest insects are also attracted and destroyed by some of the devices.<br />
<br />
If octenol is ingested, there is a possibility for toxicity. It is not, however, harmful in the air to humans, pets, or the environment. It is vitally important that it is kept safely away from children to avoid the possibility of ingesting. Placement of the attractant and device utilized to catch biting insects should be carefully considered. It should be kept safely away from children and pets.<br /></p>
<p class="c3">To be most effective in mosquito control, the attractant should be placed between the breeding grounds of the mosquito and the area where the people are located. There are range limits that the attractant will reach and this needs to be considered in the placement of the trap as well.<br /></p>
</td>
</tr>
</table>
<a href="http://www.startlogic.com/join/index.bml?AffID=626972&cid=592'"><br /></a> ==============================================================
<p><img src="images/americanatural_1875_97577.gif" width="234" height="118" alt="** PLEASE DESCRIBE THIS IMAGE **" /></p>
<p>Considering buying a mosquito trap? If so, compare the following traps before you make a purchase:</p>
<a href="http://www.bluerhino.com/BRWEB/Outdoor-Living-Products/Mosquito-Traps.aspx">SkeeterVac</a>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td align="center">
<div class="c3"><a href="http://www.mosquitomagnet.com/">Mosquito Magnet</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://www.megacatch.com/">Mega-Catch</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://koolatrononline.stores.yahoo.net/mosquito-control.html">Koolatron</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td width="273">
<div class="c3"><a href="http://www.mosquitocontroltrap.com/comparisons">Mosquito Trap Comparison Chart</a></div>
</td>
</tr>
</tbody>
</table>
<p><br /></p>
<table width="126" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" scope="col"><a href="mailto:[email protected]">E-mail Urefillit</a></th>
</tr>
</table>
<br />
<p class="c8"> </p>
<p class="c8"><span class="c9">Urefillit, LLC<br />
800 Shore Drive East<br />
Oldsmar, Florida 34677-4402</span></p>
<p class="c8"> </p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br /></p>
<p> </p>
</th>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</body>
</html>

Copy & Paste this code into a new, blank document. SaveAs index3.html. Feel free to adjust CSS colors and backgrounds as desired.   You'll find plenty of code comments to help you.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>U Refill It</title>
<meta name="description" content="Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom">



<style>
/**CSS Reset**/
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
img {
    vertical-align: baseline;
    display: block;
    max-width: 100%
/**layout**/
body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    /**CSS gradient**/
/* Old browsers */
    background: rgb(180,221,180);
    /* FF3.6+ */
    background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(180,221,180,1)), color-stop(17%, rgba(131,199,131,1)), color-stop(33%, rgba(82,177,82,1)), color-stop(67%, rgba(0,138,0,1)), color-stop(83%, rgba(0,87,0,1)), color-stop(100%, rgba(0,36,0,1)));
    /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* good browsers */
    background: linear-gradient(to bottom, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* older IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400', GradientType=0 );
#wrapper {
    width: 75%;
    margin: 0 auto; /**with width, this is centered**/
    background: #FFC;
    border: 4px groove #F30;
    border-radius: 20px;
header, footer {
    color: #F30;
    text-align: center;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
header img {
    border-radius: 15px 15px 0 0;
    width: 100%
/**top menu**/
nav {
    width: 90%;
    margin: 25px auto;
nav li {
    list-style: none;
    font-weight: bold;
    display: inline;
/**menu link styles**/
nav li a {
    display: inline-block;
    font-weight: bold;
    color: green;
    text-decoration: none;
    padding: 1.15em;
    border: 2px outset green;
/**menu links on mouse over**/
nav li a:hover, nav li a:active, nav li a:focus { background: gold }
/**main content**/
article { padding: 2% }
figure img {
    margin: 0 auto;
    border: 3px solid #FFF;
    border-radius: 10px;
    box-shadow: 1px 2px 5px #333;
/**typography**/
header h1 {
    font-size: 55px;
    text-shadow: 2px 3px 3px #666;
header h2 {
    font-size: 18px;
    font-style: oblique
h3 { margin-top: 20px; }
p {
    margin-bottom: 18px;
    font-size: 18px;
    color: #000;
figcaption {
    text-align: center;
    font-style: oblique;
    margin-bottom: 18px;
</style>
</head>
<body>
<div id="wrapper">
<header>
<img src="http://www.urefillit.com/images/webpagepicture.jpg" alt="U Refill It banner">

<h1>U Refill It</h1>
<h2>Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom.</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</nav>

<article>
<h3>Article Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure>

<img src="http://placehold.it/500x325" alt="figure">
<figcaption> Figure Caption </figcaption>
</figure>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>

<footer>
<small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
 </div>
</body>
</html>
Nancy O.

Problem with cfdocument and background colors with table borders

i am having a great deal of difficulty with cfdocument
rendering my tables with cells that have background colors. the
background colors seem to bleed through the table border. a picture
at 100% magnification can be seen at
http://www.vitad.com/cfdoc.jpg
and at 1600% magnification at:
http://www.vitad.com/cfdoc2.jpg.
i am attaching sample code of the what generated the pdf in the
pictures. btw, i am running cfmx 7 with hot fix 2.

Hi fresher4flex,
Since you are using the item Renderer for the DataGrid Column try to apply the styles dynamically to the background of your itemRenderer by making using of the rollOver and rollOut events.
Thanks,
Bhasker

How to change the background color of a cell in datagrid using flex3

i want to change the background color of a cell.....how can i achieve this.....and also i want to know how a spacing cane be done between cells in a datagrid...plzzz help me???

The only way I can see to do this is to use an item renderer for your cells. This is really scruffy and would need tyding up, and maybe with a little more time could do better or someone else may have an idea but none the less this works.
Define a custom component as below;
This has logic to see what the value of the data is proveided by the dataprovider for the row, and if it matches the conditions in this case is equal to 5 sets the background color.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="88" height="26" dataChange="doColor()" borderColor="#000000" borderStyle="solid"
    backgroundAlpha="1">
    <mx:Script>
        <![CDATA[
            private function doColor():void {
                if (data.value == 5) {
                    setStyle('backgroundColor', 0xcccccc);
                } else {
                    setStyle('backgroundColor', 0xffffff);
        ]]>
    </mx:Script>
</mx:Canvas>
Now just apply the item renderer in the datagrid and that will do it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var ac:ArrayCollection = new ArrayCollection([
                {value : 1},
                {value : 2},
                {value : 3},
                {value : 4},
                {value : 5},
                {value : 6},
                {value : 7},
                {value : 8},
                {value : 9},
                {value : 10}
      ]]>
    </mx:Script>
    <mx:DataGrid x="40" y="36" width="408" height="193" dataProvider="{ac}">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="value" itemRenderer="MyComp"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
I hope this helps
Andrew

How to change background color of row of a table in a panel table

hi! im trouble right now, somebody help me. i have a matrix of row and column, panel row and panel table in jsp. my problem is how can i change the background color of a row once it clicked. i have row in table which have panel table with panel column and panel row.
i have already work for it but i only change the background color once i clicked is the first row and first column then the rest row and column is not working..pls.. give me sample code for it..thnx a lot!!!
Thnank's,
froilet

Ok! I have 2 jsp, the input jsp and display.jsp! Once i input value on input.jsp, it will display on display.jsp. I have also my javascript named updateBin.js. Now, how can i update each row once i clicked it... the succeeding rows and columns..hope u help me with this..here is my code:
Display.jsp
<html:html locale="true">
<head>
     <html:base/><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Strip Map Loader</title><script type="text/javascript" src="js/updateBin.js"></script>
</head>
     <%
          int intRow = Integer.parseInt(request.getParameter("intRows"));
          int intColumn = Integer.parseInt(request.getParameter("intColumns"));
          int intPanelRow = Integer.parseInt(request.getParameter("intPanelRows"));
          int intPanelColumn = Integer.parseInt(request.getParameter("intPanelColumns"));
     %>
<BODY bgcolor="#33b9ec" leftmargin="50%">
     <b>Strip ID:  </b><font color="red" face="arial"><b><bean:write name="strStripID" scope="request" /></b></font>
     <br><br>
     <font size="3" face="tahoma"><b>Bins Updater Tool:</b></font>
     <table border="1" width="365px" bgcolor="#1ea6f7" height="15">
          <tr>
               <td valign="top" align="center">
                    <table><tr><td><font size="2">Select Bin Type:</font></td>
                    <td><select id="binType" onchange="updateBin()" size="1">
                         <OPTION></OPTION>
                         <OPTION value="green">Good Bin</OPTION>
                         <OPTION value="red">Reject Bin</OPTION>
                    </select></td></tr></table>
               </td>
</tr>
</table>
<table id="tbl" align="center" border="1" cellspacing="3" cellpadding="5" bgcolor="#CC9900">
<tr>
<td>
     <%for (int pnlrows=1; pnlrows<=intPanelRow; pnlrows++){%>
          <table id="table" width="100%" border="1" bgcolor="#CC9900" cellspacing="7" cellpadding="0" align="center">
          <tr>
          <%for(int pnlcols=0; pnlcols<intPanelColumn;pnlcols++){%>
          <td>
                    <%for (int rows=1;rows<=intRow; rows++){%>
                    <table cellspacing="5" width="100px" align="center" bgcolor="#CC9900">
                    <tr>
                         <td>
                         <%for(int cols=1; cols<intColumn; cols++){%>
                         </td>
                         <td id="col" bgcolor="#008000" align="center" ondblclick="changeCol()"> X </td>
                         <%}%>
                         <td id="row" bgcolor="#008000" align="center" ondblclick="changeRow()"> X </td>
                         <td></td>
                         <%}%>
                    </tr>
                    </table>
          <%}%>
          </td>
          </tr>
          </table>
     <%}%>
</td>
</tr>
</table>
and this is my javascript code:
     function updateBin()
          var binType=document.getElementById("binType")
          if(binType.value == "green")
          [binType.selectedIndex].value
          //binType = changeR();
          //alert('Good Bin Selected');
          if(binType.value == "red")
          [binType.selectedIndex].value
          //binType = changeC();
          //alert('Reject Bin Selected');
          if(binType.value == "")
               alert('Please select only on the category!')
     function changeRow()
          if(binType.value=="green")
          x=document.getElementById('row').style.background="green";
          alert('Updated!')
          if(binType.value=="red")
          x=document.getElementById('row').style.background="red";
          //alert('Reject Bin Updated!')
     function changeCol()
          if(binType.value=="green")
               x=document.getElementById('col').style.background="green";
               alert('Updated!')
          if(binType.value=="red")
          x=document.getElementById('col').style.background="red";
          //alert('Reject Bin Updated!')
this code only updates the first row and column..but the succeeding panel row and panel column can't update...what will i do? theres something wrong in my javascript or in my jsp...pls help me......thanx.....in advance!!

How do I change the background color of the pages?

I have been having trouble finding how to change the background color of the pages. I would prefer a black background.
thanks

Do you know how to edit the template? If not simply choose a rectangle shape, change colour to Black and using ARRANGE, send to back and bring forward till it replaces whatever is there.
The best way is to pull down the book slide to reveal the Layout - which shows you the chapters and section etc which make up a template. You have to use the same procedure on ever page from the template you intend to use.
In the Template Layout, select your page. Click on whatever your background colour is...IF its unlocked you see the square pull handles in corners - now simply select Black and it should change the colour - if not and its unlocked, it may be a black image, in which case delete it, Insert a new rectangle, pull to fit the page and change colour to black. It should now be hiding the other content, ARRANGE > Send to Back and it should sit behind all your content. Now go back to arrange and LOCK.
You should see a red marker on the left with whatever page you are editing "Save Changes" click it and its done... repeat on all other pages.

Page Properties- Background Color Change

Can anyone help me here? I know how basic the subject sounds
but for some reason it does cause me trouble here today.
We recently had a company design our site and now we are
using contribute to edit pages etc. Now, we have admin access so
that isnt an issue. But when we want to start a BRAND NEW PAGE
outside of any templates, we cannot change the background color. It
is greyed out when you go to Format- Page Properties- Appearance.
Its frustrating. It should be as easy as changing it, but no can
do. Any thoughts?

It's good then that you have adminstrator rights, because the
solutiojn is in the role settings. You will have to edit the role
settings to your needs.
In the menu pick Edit, Administer websites, Choose your
website.
Choose Users and roles, Edit role settings
Choose Styles and fonts
I think you'll find all the options you need here, check the
ones you want and of you go again!
grtz.
Hayo

Background Color on Application tag not showing...

I just recently upgraded to the nightly build version # 4.0.0.10045 and the backgroundColor property on the main application tag is no longer rendering the background color. I noticed a new ApplicationSkin.mxml in the spark skins with the following:

    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor color="{getStyle('backgroundColor')}" />
        </s:fill>
    </s:Rect>
However adding a backgroundColor property to the Application tag or in the CSS has not given any results.

Ok it turns out it is not the application tag causing problems, but the halo VBoxes, HBoxes and Viewstacks. It seems I can no longer apply background colors to them at all.
Here's an example:
<mx:VBox id="footerVBox" horizontalAlign="center" verticalGap="-5" paddingBottom="5" paddingTop="0" backgroundColor="0xFF0000" width="600">
     <mx:HBox horizontalGap="1" verticalAlign="middle">
          <mx:Label text="{copyrightSymbol} 2009 SearchIgnite" fontSize="12" color="#003366" />
          <mx:VRule height="12" strokeColor="#003366"/>
          <mx:Label text="{'Version ' + version}" fontSize="12" color="#003366"/>
          <mx:VRule height="12" strokeColor="#003366"/>
          <mx:Label text="Customer Service 888-744-6483" fontSize="12" color="#003366" />
     </mx:HBox>
</mx:VBox>
Is rendering with a white background behind it, obsucring the background color of my application. The backgroundColor style property is not getting applied at all.
Upon rewriting this group as:
<s:Group id="footerVBox" width="100%">
     <s:layout>
          <s:VerticalLayout horizontalAlign="center" paddingBottom="5" paddingTop="5" />
     </s:layout>
     <s:Group>
          <s:layout>
               <s:HorizontalLayout verticalAlign="middle" />
          </s:layout>
         <s:Label text="{copyrightSymbol} 2009 SearchIgnite" fontSize="12" color="#003366" />
         <mx:VRule height="12" strokeColor="#003366"/>
         <s:Label text="{'Version ' + version}" fontSize="12" color="#003366"/>
         <mx:VRule height="12" strokeColor="#003366"/>
         <s:Label text="Customer Service 888-744-6483" fontSize="12" color="#003366" />
</s:Group>
</s:Group>
I am able to get the background color of the app to show through. Again I am using build version 4.0.0.10045 and this was not an issue in the previous builds.

Background Color Issues!

I am having trouble viewing artwork after applying a new background color. The artwork was originally black, but was changed to white prior to the background change. I changed from a default white artwork background to a black background. My artwork doesn't show through the black. Im sure I am missing something simple, but please help! Im new to the program, and am trying to teach myself. Any general tips/shortcuts would also be greatly appreciated.

Sounds like it might be an overprint problem. First check your artwork in Overprint Preview. If everything that should be white looks black it is most likely that when you changed from balck to white you forgot to remove the overprint. Check Attributes panel.

TLF background color nigthmare

I have done this to test the background color style on tlf.
The problem is that the background color does not take the whole textline height just the ascent + decent height ignoring the leading.
I have attached an image of the current l&f and the desired one.
Can someone point me in any direction to achieve this? I have been hours trying with style settings and nothing good happens.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="addText()">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.elements.TextFlow;
import spark.utils.TextFlowUtil;
private function addText():void{
var myText:String = "<p><span lineHeight='120%' backgroundColor='#000000' backgroundAlpha='1' color='#ffffff' fontSize='20'>Pitty title<br/>Pitty sub title</span></p>";
var tft:TextFlow = TextFlowUtil.importFromString(myText);
titleTextComp.textFlow = tft;
]]>
</fx:Script>
<s:RichText id="titleTextComp" y="16" left="14" width="400" height="200" />
</s:Application>

Ok,
I'm too tired of attempting to perform this by css with no luck. I think I will take a programatic approach then (if someone knows if this is possible by using css only please post it!).
By now I think I will do something similar as what's described in the chapter "7.18 Highlight the Last Character" in a TextFlow of the book "Flex 4 Cookbook".
Has TLF been lend to Apache? Maybe if this is really not possible using the current features a change could be done to control the way background is drawn by adding a new css property.
thanks harUI!

Change Safari background color

Hello everyone,
I've some trouble with my eyes and therefor I like to change the backgroud color of the browsing tabs. I use Firefox now but is this also possible with Safari?
Thank you!

Hi,
If you still need help with this...
Not sure if Safari can be modified to change the background color of tabs but open System Preferences then select Universal Access.
Select the Seeing tab. Under Display select: *White on black*
You can use the slider for contrast.
Maybe that will help.
Carolyn

Background color question..

I can't for the life of me figure out how to add or change the background color on
any pages I create. There is nothing I can find in the inspector, such as Iweb has, for the entire page to have a certain color.
For example, if you try the "for sale," "lost and found" or "for rent" flyer templates, how do you change the background colors. I don't see the blue, green, or grey anywhere in the inspector. Is this not an option?
wade

wad,
I looked at the first one ("for sale", the one with the bicycle), and had no trouble changing the color of the large gray box. Select the box, click on the Graphics inspector, select Color Fill from the Fill menu, then click on the color swatch. Click on the little box of crayons on the right side of the color palette, then on the color you want.
Regarding the "for rent" flyer, do the same thing as mentioned able, except note that when you select the green box, little x's appear in the corners. This indicates that the object is locked. So before you can do anything else, click on Arrange > Unlock. Then follow the above steps.
"Lost and Found" works the same way as "for sale" above.
-Dennis

Spark itemRenderer background color troubles

Similar Messages

Maybe you are looking for