close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

PowerStore 3 and featured pod background images

Thread began 2/14/2010 3:02 pm by gw311682 | Last modified 2/16/2010 1:13 pm by Jason Byrnes | 691 views | 3 replies |

gw311682

PowerStore 3 and featured pod background images

Hello,

I need some help changing the background image for the headline (h2) text in the 3 ‘pods’ (Featured, About and Most Popular) on the home page. In PS2 this was easy; just change the image on the home page by editing the background image reference in the #featuredWrapper .box on the home.css page.

In PS3, the background image seems to have moved to the .featurePod .box on the admin.css page. So firstly, I tried changing this image. However, doing so had no affect whatsoever on the image. In fact, deleting the whole block of code in .featurePod .box seems to make no difference to the home page view at all.

Strangely enough, changing the background colour in the #featuredWrapper .box changes the pod’s main background colour but changing the background colour in the .featurePod .box makes no difference at all!

I then thought it must be possible to change the image in the content management section of the Admin pages. No luck here though. It’s necessary to change the text for the pods here but the background image doesn’t appear at all in either the ordinary view or code view. So, still no apparent way to change the image.

(The attached file shows coding extracts from the CSS / content management pages in case this makes things clearer.)

Therefore, I’m at a bit of a loss as to what to try next. Any suggestions will be very welcome and thank you in advance.
pods

Sign in to reply to this post

Andre.M

Hi GW, image background for "most popular: is located in the home.css file, starts on line 128. background for the pods starts on line 43 (second block)

#whatsNew {
background-image:url("../Images/icon_whatsNew.png");
height:35px;
margin-left:7px;
margin-top:7px;
position:absolute;
width:32px;
}
#featuredWrapper .box {
background-color:#CCCCCC;
border:1px solid #8C8E94;
float:left;
height:200px;
margin-right:4px;
width:325px;
}



i would suggest using firefox and the firebug plug-in to help you tweak pages.


im hoping this helps, and good luck.

Sign in to reply to this post

gw311682

PowerStore 3 and featured pod background images

Hello Andre and many thanks for your reply.

Unfortunately, I think you must have misunderstood what I was trying to do. That is change the dark blue background behind the white text (‘Featured Product’, ‘About Our Store’ and ‘Most Popular’) in the ‘featured item’ pods. In PS2 this was controlled by a small gif called ‘featuredBox_bg.png. This was w7px X h37px and, unsurprisingly, dark blue. Change this gif, and the background changed.

In PS3, the gif in the following code in admin.css would appear to be the same:

.featurePod .box {
width: 325px;
background-color: #eeeeee;
border: solid 1px #8c8e94;
margin-right: 4px;
background-image: url("../Images/featuredBox_bg.gif");
background-repeat: repeat-x;
overflow: hidden;
}



However, changing this gif has no effect on the dark blue background to the text at all. Your suggestion about the firebug plug-in helped though. When I now looked at the page in Firefox, I noticed a class called .messageBar. When I checked this out in the home.css code, it became clear that this sets the text background colour to dark blue, as you’ll see from the following code:

.messageBar {
height:37px;
background-color:#06245c;
}



So, all I did was alter the code to the following and managed to achieve the background I wanted...

.messageBar {
height:37px;
background-image: url("../Images/featuredBox_bg-blue.png");
background-repeat: repeat-x;
}



Whether this is the right way to do it or not, I don’t know. Maybe someone from WebAssist will check this anomaly out and let me know if it’s OK to change the background in this manner.

Your help, Andre, was invaluable though as your suggestions forced me to be more curious - many thanks,

Geoff

Sign in to reply to this post

Jason ByrnesWebAssist

the images in power store 3 use transparent backgrounds to simplify skinning.


your method of swapping out the background color for an image is fine, but you can also just change the background color hex value to the color you wish to use.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...