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

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

different background for checkout page

Thread began 12/05/2011 7:13 pm by studio366170 | Last modified 2/06/2012 11:37 am by Jason Byrnes | 1888 views | 16 replies |

studio366170

different background for checkout page

Hi, I am customizing my powerstore and would like to make the background and midground for the checkout.php page different to the others.

What file/s do I need to go into to do this, I have tried several but am having no success.

Thanks

Sign in to reply to this post

Jason ByrnesWebAssist

background colors are controlled through your sites CSS.

to change the background for the entire checkout page, edit the body tag on the checkout page:

<body style="background-color:#c3c3c3;">

Sign in to reply to this post

studio366170

Thanks, yes I had sorted that one out but what I would like to do is change the 'midground' ie the central info area background..... how do I do that for the checkout page as I can't seem to get it to work.....

Sign in to reply to this post

Jason ByrnesWebAssist

can you post a link to your site, the change to make will depend on the site design you are using.

I recommend downloading the firebug extension for fire fox, it will allow you to select elements of your page, and see the css that is controlling that element, it will also allow to make changes to the css in the browser and see the effects in real time, it makes experimenting with design changes much easier.

Sign in to reply to this post

studio366170

That's okay, all I need to know is what file to add the midground code to.... css is no problem :)

It is the page that displays when the customer has purchased an item and wants to check out.

Which php file do I add it to? The background of the page remains the same, it is the midground (the part with the rainbow colours attached) I need to change to fit the extra long content of that particular page.

Thanks again,
simone

Sign in to reply to this post

Jason ByrnesWebAssist

this is why i asked for a link.

i cannot tell you what page to edit unless i see your site.

the page to edit will be different depending on the theme you are using in power store.

this is also why i suggested using fir bug, you can use fire bug to help you determine what css file edit, it is the tool i will end up using.

at any rate, i need a link to your site to determine the page that needs to be edited.

Sign in to reply to this post

studio366170

Here it is ... I tried to attach a pic last entry but it didn't work :)

Link
checkout.php
you can see that I need to extend the midground down so that it is behind the extra info that page has on it.... the existing one is perfect for all other pages.

Thanks!

Sign in to reply to this post

Jason ByrnesWebAssist

the problem is that you are using an image for the background, and the image has a height of 1389px. You cant stretch the image height, and using the repeat option would not look that good.


you will need to create another background image that has the height you need to cover the entire checkout form. upload it to the same folder as the existing midground.gif. then on the checkout page add the following style just before the closing </head> tag:

<style type="text/css">
#page {
background-image: url("../images/checkout-midground.gif");
background-repeat: no-repeat;
}
</style>

Sign in to reply to this post

studio366170

Fantastic! Thanks again :)

Sign in to reply to this post

studio366170

Me again... I added the code you recommended to the checkout.php page and also the revised graphic to the folder, but it is still not working, not trying to read the new graphic at all.

Have I added

<style type="text/css">
#page {
background-image: url("images/checkout-midground.gif");
background-repeat: no-repeat;
}
</style>

to the right document?

Thanks in advance!

Sign in to reply to this post
loading

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...