PDA

View Full Version : template background


tony09uk
11-01-2010, 11:10 PM
I have created a templated with a gradient as the background. When I select a new template and view it in the browser or in the dreamweaver window, there is no gradient....how come?

DWcourse
11-02-2010, 01:22 AM
Either I'm confused by your question or you don't understand Dreamweaver templates (.dwt files). One template doesn't have any impact upon another template.

Did you try to make a new file based upon a template by choosing menu: File New… Then selecting Page From Template in the New Document dialog and choosing your template?

tony09uk
11-02-2010, 08:31 AM
I created my template and saved it with with two editable areas. I then went to file>new>page from template> and selected the template I had created. Upon opening the template the background was a solid colour, and my templates background is a gradient.

DWcourse
11-02-2010, 05:16 PM
Did you insert the gradient background image using the background HTML attribute or the CSS background property. Is there a link where we can look at the page?

tony09uk
11-02-2010, 07:37 PM
I have right clicked>page properties>"appearance css">color#b4E9F9 and my background gradient image repeat x

Ricky55
11-02-2010, 08:56 PM
I dont use templates myself I prefer to use PHP includes but I've just tested this and you're right it does do this.

Its because the path to the background image doesn't remain relative when you create a page based on the template and it should do.

Easy fix for me was to create an external CSS style sheet and have your styles for your background image in there and then link to the style sheet from within the template. This will work for you and its a better way of doing it.

To do this copy the styles out of the head of the template using code view so you'd copy something like

body {
background: url(images/2042_1280.jpg) left top repeat-x;
}

Then create a new style sheet and paste the styles in. Save the file and then delete all styles from your template and link to the style sheet instead. Do this by clicking the link icon from within the CSS panel. When you create a page based on this the link to the style sheet remains relative.

HTH.

Ricky

Ricky55
11-02-2010, 09:00 PM
DWCourse I think he means when he creates a page from the template. I'm sure he knows that you wouldn't create a template from a template. Just a badly worded question.

Ricky55
11-02-2010, 09:06 PM
Seems others have had the same issue.

http://thedailyreviewer.com/design/view/template-image-path-problem-1081531561

As soon as you save the new HTML file all files paths should change from absolute to relative but for some reason the background image does not.

DWcourse
11-03-2010, 04:45 AM
Ricky 55 Good catch. I think I'll post this on the bugs page of my blog.

I've seen this before but always suspected it was due to people improperly defining their site but it's not. Here's what seems to happen.

When you create a page based upon a template that has a CSS background defined in a style rule within the document the new page initially links to the file on the local disk (and the background doesn't display). This is supposed to be a temporary link until you save the file (until you save the file, DW can't make the link because it doesn't know the path from the file to the image).

When you save the file DW SHOULD correct the link but it DOESN'T.

However if, after saving the file you select menu: Modify>Template>Update Current Page, DW will update the page, fix the link and the background image will display (you can also get the same result by modifying the template, saving it and allowing the template to update the files).

Like you, I prefer to keep my style rules in an external style sheet which totally prevents the problem. In DW you can move style rules to an existing external style sheet or a new one by selecting the rules you want to move and selecting Move Style Rules from the pop-up contextual menu in the top-right corner of the CSS Styles palette.

tony09uk
11-03-2010, 07:09 PM
Cool. Thanks for understanding my poorly worded question (written while I was half asleep after about 2hrs of trying in dreamweaver) I will now go and view a tutorial on applying CCS to other pages............needless to say after such simplistic questions I am a complete ROOKIE!

tony09uk
11-03-2010, 08:21 PM
Sorry Ricky, didnt read you message (and take it in) fully I see you have told me how to do it :D thanks

tony09uk
11-03-2010, 10:15 PM
Sorry Ricky, didnt read you message (and take it in) fully I see you have told me how to do it :D thanks

tony09uk
11-05-2010, 08:44 PM
Ricky is there any chance that you could break it down anymore? (in lamens terms) I have just tried doing what I thought you were trying to explain and deleted all my styles. I cant seem to get them back so I guess I will have to start again :( I will try and put it together quicker this time (hopefully one night), but I dont want to accidently repeat my last cock up.

Many thanks

DWcourse
11-05-2010, 08:57 PM
deleted all my styles.

I'd back up your site before trying it again, just in case.

In DW you can move style rules to an existing external style sheet or a new one by selecting the rules you want to move In the CSS Styles palette and selecting Move Style Rules from the pop-up contextual menu in the top-right corner of the CSS Styles palette.

Ricky55
11-05-2010, 09:56 PM
Don't rely too heavily on Dreamweavers tools. Get into code view and just deal with things yourself and then you can see whats going on.

Back up your site as DW Course suggested but then all you need to do is take your styles from the head of your document into a separate style sheet.

Your styles will be in <style> tags. Just simply copy them Control C, create a new style sheet file and paste them in, control V. Just take the styles inside the tags not the style tags themselves.

If you're still struggling come back to us and I'll record a short video for you and post it to vimeo.

DWcourse
11-05-2010, 10:01 PM
Before you give up on your existing styles though, did you paste them into another document as Ricky55 suggested? If so, find that document, it should still contain the styles. Your problem may be that you didn't link the new style sheet back to the original document or didn't name the style file with the .css prefix. So, see if you can find the file and, if you do, check back here for help.

Ricky55
11-05-2010, 10:15 PM
There you go mate a step by step video tutorial on how to do this.

http://vimeo.com/16549331

Just give it a few minutes for Vimeo to process it.

tony09uk
02-28-2011, 03:07 PM
I though i'd put a note of thanks for the video, but obviously havn't, thanks for your help dude

Ricky55
02-28-2011, 04:36 PM
no worries mate