How to duplicate the look of a page on wamp?

[Callan S.]

I'm trying to duplicate the layout of this page: http://www.boringrpg.com/screenshots

On my computer, using wamp. I've copied the page over, copied the style.css and put it in.

But the structure doesn't show at all. I made an images directory and put in just the logo to begin with. That doesn't even show.

I'm not very knowledgable with css. Any tips? I want to recreate it on my comp, then I'll adjust the graphics used for my own purposes.

[Ark]

I pressed ctrl + s on chrome and saved the files on my desktop and when I opened, it appeared exactly. Didn't tried on wamp though. But you could try that.

[Jackolantern]

So you want the style of the "boringRPG" site that is holding the screenshots, right? I am assuming the styles in the screenshots are not what you want, since of course you can't get the style from a screenshot.

I have not had a ton of luck from just "saving" a page. Typically if I want to recreate something, I view the source, copy that, then start clicking the links to any linked resources, such as scripts, CSS files, etc., and save those. Then I adjust the links in the main page that copy those onto the page to fit with the folder structure I am using. I think that is where my issues have been in simply saving a page, because I think the saving mechanism does not always correctly recreate the folder structure the page is looking at.

Also, bring up a developer console in the browser you are using to see what errors you are getting. It should tell you images are missing, resource links are broken, etc.

[Callan S.]

I tried a save in firefox, although the structure was preserved, the background isn't there. I've coped it to an equivalent images folder, I think

In the CSS it has

Code: Select all

#wrapper {
	background: url(images/bg02.jpg) repeat-x left -50px;
}

So I just need an images folder where I've got this, then bg02.jpg inside that? I've got that, but the background still doesn't show?

[Callan S.]

Ah, I think it might have been

Code: Select all

<link href="screenshots_files/style.css" rel="stylesheet" type="text/css" media="screen">

the 'screenshots_files/' bit - that copy of style.css seemed condensed and possibly just wasn't working. Instead direted it to the style.css I downloaded, which is human readable and then the page worked!

Sorry, pretty new to CSS, thanks for taking a look over it, all! Sometimes just talking about it helps!