add background color gradient to "sidebar best sellers list in a box"

[stupidlammer]

Ive searched around, cant seem to find any solution. I suspect the solution's fairy simple, but ve' been trying for a week now.

how to i add a color gradient to the area enclosed by the best seller box in the sidebar?

[jont]

You need to create a graphic of the gradient, save it to the root of the site folder and then apply the background to the style wrapping the list.. or create a new container and wrap the existing code and style into that.

The actinic.css will look something like:

background: #990000 url('image.gif') no-repeat;

Note the single quote wrapping the filename to ensure Actinic uploads to the server

[stupidlammer]

i could apply it to "section list" , "Cart details" , but not best sellers.

section lists, and cart details have a code starting w/ <table width="100%" border="0" cellpadding="0" cellspacing="0" ....etc

however the best sellers sidebar only has code:
<actinic:variable value="Standard Best Seller Item" name="BestSellerItem" />

so i cannot edit any tables. anyone can offer some insignts?

[jont]

...from before...

or create a new container and wrap the existing code and style into that.

...or edit the layout with for the best sellers (you are 1 level too high the moment - you need to be in the layout list itself)

[stupidlammer]

...or edit the layout with for the best sellers (you are 1 level too high the moment - you need to be in the layout list itself)

do i edit "standard best seller item" or list layout settings of "sidebar best sellers list in a box"?

The actinic.css will look something like:

background: #990000 url('image.gif') no-repeat;

Note the single quote wrapping the filename to ensure Actinic uploads to the server

Ive been trying for awhile now but am still lost. Would really appreciate if you could be more specific. which actinic.css layout do i edit?

[jont]

Switch to design tab. Click on one of the best sellers in the preview window and the code will show in the code panel. Navigate to the parent layout until you get to the layout with the Orange layout list at the top... click on the Orange link. Here you can edit the containing code to incorporate your background image.

Or navigate to the next parent level from the above and wrap the layout between

<div id="bestSellerContainer"> ... </div>

and style the id in the stylesheet.

The stylesheet (actinic.css) can be found under the design tab and the drop down "page type" list.

If you are using a from the box layout this is most likely be using tables to manages the best sellers list so you can style the table code with a background image as you have done in post #3

HTH

[stupidlammer]

thanks for all the help but im still so lost.

clicking on one of the best sellers, this is my code

<actinic:variable name="ListIndex" />. <a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>"><Actinic:Variable Name="ProductName"/></a>
<!-- <actinic:variable name="ProductImageLayout" /> -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
  (Ref: <actinic:variable name="ProductReference" />)
</actinic:block>
<!-- <actinic:variable name="PriceListRetail" /> -->

Moving up to the parent layout of best seller list in a box, this is my code:

<actinic:variable value="Standard Best Seller Item" name="BestSellerItem" />

Above the code in orange, "click here to edit list layout settings"

Clicking on that, i have start of list code:

<div class="sidebox">
   <div class="boxhead"><h2>Best Sellers</h2></div>
   <div class="boxbody">

and end of list code:

   </div>
</div>

which code exactly do i edit? and what do i do?

i cannot find "<div id="bestSellerContainer"> ... </div>" in the stylesheet.

also, after trying everything, the best ive done is to have the best seller layout with background in the following manner:

Best seller
1. item 1 description

Best seller
2. item 2 description

Best seller
3. item 3 description

rather than:

Best seller
1. item 1 description
2. item 1 description
3. item 1 description

which is the default layout, but i cannot get the background in.

[jont]

Unless you want all the side boxes with the same background change the class of <div class="sidebox"> to something else eg : <div id="bestSellerContainer">

In the actinic stylesheet copy the the entire .sidebox { ... } and paste renaming it as #bestSellerContainer with all the code between the braces {}remaining the same. You can then add you background styling to this new #bestSellerContainer

[stupidlammer]

Unless you want all the side boxes with the same background change the class of <div class="sidebox"> to something else eg : <div id="bestSellerContainer">

In the actinic stylesheet copy the the entire .sidebox { ... } and paste renaming it as #bestSellerContainer with all the code between the braces {}remaining the same. You can then add you background styling to this new #bestSellerContainer

It would be great if i could change all the backgrounds of all sideboxes to the same thing. how should i proceed to do that?

[jont]

Unless you want all the side boxes with the same background change the class of <div class="sidebox"> to something else eg : <div id="bestSellerContainer">

The clue is in the "unless"