Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how do capture a website CSS?

    Hi all

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

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    In FF, you can Ctrl+S which saves the web page completely.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.
    Last edited by vtwopoint0; 05-24-2008 at 09:46 AM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    So, basically, you're ripping off the style and code?

    Nice

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    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.

  • #11
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters View Post
    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.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This site will enable you to make your own corners.

    Make your own Rounded Corners..

    Frank
    Last edited by effpeetee; 05-24-2008 at 02:00 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Bluelondon View Post
    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.

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by effpeetee View Post
    This site will enable you to make your own corners.

    Here it is.

    Frank
    Frank, another link for your collection: Don’t use “click here” as link text.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by VIPStephan View Post
    Frank, another link for your collection: Don’t use “click here” as link text.
    Thank you VIP. Point taken.

    Regards.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •