...

View Full Version : how do capture a website CSS?



Bluelondon
05-24-2008, 06:58 AM
Hi all

Is there any way to save a websites CSS file as well as the html pages and images etc?

rangana
05-24-2008, 07:10 AM
In FF, you can Ctrl+S which saves the web page completely.

Bluelondon
05-24-2008, 07:24 AM
i did, but when i open the website on my PC the css components look different to those of the website. for example certain boxes that had round edges show up with sharp edges.

any ideas?

rangana
05-24-2008, 07:44 AM
Check the CSS file, the stylesheets.

See the images used, usually background, FF does'nt change the name of the images, inside the stylesheet, you have to change it yourself.

vtwopoint0
05-24-2008, 10:43 AM
The CSS of the page you want is probably being referred to in an external css file through link rel, href, style. the href is the address of the css file you want. So, say if you're on http:// whatever .com, and you check the source and it says <link rel="stylesheet" href="includes/styles.css" type="text/css"> then you would want to just add "/includes/styles.com" to the end of the url, making it http:// whatever .com/includes/styles.css. this will be a text file with the css codes. Copy that page and save it with the same name and in the same directory as the page you saved offline, and then it will apply to the page when you open it.
So if the page you saved is at C:\My Documents\whatever.com, then you will want to create a folder named "includes" in your My Documents folder, and then place the "styles.css" file inside that folder. Once all the files are in the right place, it should look just like it does online. :)

abduraooft
05-24-2008, 10:55 AM
And there is one more problem. Usually when we save a webpage, it will omit all images which are set as background by CSS. You may need to save them separately and then edit the paths in CSS as well.

effpeetee
05-24-2008, 11:30 AM
I usually use the "base" tag.
Place it immediately under the <head> tag.
Thus;-

<head>
<base href=" url here ">

Then it will pick up the images etc.

CSSVista will also help you to get the css in most cases.

This is one that I downloaded.

http://www.exitfegs.co.uk/testa.html

The images come from the original site over the web.
You can right click on them and save them locally.
I used cssvista to get the css.

Frank

Frank

Bluelondon
05-24-2008, 12:51 PM
thanks for the help guys.

ok let me show you why i asked this question.
i am in the process of building a new website for my dads company, and i came across this website (which i might add has nothing to do with my dads line of work). so this website i stumbled upon looks really neat and tidy.

http://www.techradar.com

now i saved this website to my HD to play around with it and come up with something similar with the same dimensions, color scheme, etc. but after i saved the site in firefox (which saves everything including the css) nothing on the site has round borders anymore! not the menu buttons, not the boxes in the main body of the site, nada!

anyone know what the problem is with this particular site?

thanks again for your help

Bill Posters
05-24-2008, 01:28 PM
So, basically, you're ripping off the style and code?

Nice

VIPStephan
05-24-2008, 01:42 PM
As abduraooft said: background images are omitted. For example if you right (or „control“ on Mac) click a rounded corner of the main box and choose “view background image” it’ll show you the corner image (a small white corner with transparency which covers the blue background and makes the corners rounded). You see the file path in the address bar. And if you search for that file in the CSS file you’ll probably find it linked there.

Bluelondon
05-24-2008, 01:43 PM
So, basically, you're ripping off the style and code?

Nice

wrong bill. i'm still learning and experimenting and i see nothing wrong with being inspired by other designs and styles, as long as i don't copy them and throw out a replica website and call it my own, there is no harm.

effpeetee
05-24-2008, 02:07 PM
This site will enable you to make your own corners.

Make your own Rounded Corners.. (http://www.roundedcornr.com/)

Frank

Bill Posters
05-24-2008, 02:15 PM
wrong bill. i'm still learning and experimenting and i see nothing wrong with being inspired by other designs and styles, as long as i don't copy them and throw out a replica website and call it my own, there is no harm.

Inspiration is one thing. Using huge portions of someone else's codebase as a template goes some way beyond that, imo.

You won't get genuine understanding or even the best learning experience simply by tweaking a few lines of someone else's code.

Still, if you don't see any harm, then that's all that matters, right?


Each to their own.

VIPStephan
05-24-2008, 02:56 PM
This site will enable you to make your own corners.

Here it is. (http://www.roundedcornr.com/)

Frank

Frank, another link for your collection: Don’t use “click here” as link text. (http://deyalexander.com/publications/clickhere.html) ;)

effpeetee
05-24-2008, 02:59 PM
Frank, another link for your collection: Don’t use “click here” as link text. (http://deyalexander.com/publications/clickhere.html) ;)
Thank you VIP. Point taken.

Regards.

Frank

Bill Posters
05-24-2008, 03:10 PM
Fwiw, I can't recall the url at this time, but a while back I read a marketing-oriented, usability study/article which concluded that using "Click here" (or a variant) at the start of meaning link text gave the greatest click-through rate in certain instances, even when the meaning text already contained another 'call to action'.

e.g. Click here to read the report.

Obviously, prepending 'click here' will not always be suitable, inline links being one example.

So, whilst 'click here' alone should be avoided for the reasons outlined in the previously linked article, it has some value as a prefix for certain types of links.


Yes, I'm aware that some object to 'click here' on the grounds that it's not device-independent. However, studies have shown that users of all variants of desktop and AT UAs understand the notion of 'clicking' on a link and it serves well as a cognitive convention.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum