Copy entire elements from one webpage to another?

Posted on 2012-09-03
Last Modified: 2012-09-03
There are times that I see one element on a WordPress page that I'd like to copy (maybe alter a little) and include on a WordPress page that I am working on.

I can use Firebug to select the element and I can see the many CSS statements (on many different pages) and I can see the HTML code as well.  I suppose that I could slog through all of this to eventually get CSS and HTML that I could use elsewhere, but it seems like there should be a better way to do this.

Is there a tool (or browser add-in) that I can use to select an element (like firebug) and that will copy out the needed code to replicate this in my webpage?

What would be awesome as hell would be a copy and paste for webpage elements that you could use to copy elements from another page into your CSS/HTML pages.

I know that the originating page may point to graphics on its own site.  These would need to be highlighted and changed to avoid problems should the originating site change these elements (or delete them), it's nice not to leech off other people's bandwidth by showing their graphics on your page without permission.

Anybody know of such a tool?
Question by:JimHubbard
    LVL 58

    Expert Comment

    Well firebug shows you all the css and html so all you need do is copy the computed css and html else check this out

    Author Comment

    All scrapbook does is copy the webpage (or part of it) - something you can do just by saving a page normally in Firefox.

    Scrapbook is not even as helpful as Firebug for the intended purpose of copying an element from one webpage to another.

    It seems to me that it should not be such a large stretch to allow the saving of the HTML and related CSS into a text file from something like Firebug.  Even the "computed" CSS tab in Firebug does not allow you to copy all of the listed styles into a single CSS stylesheet (or even an inline style).  This makes no sense to me.

    CSS should be the easiest thing to copy.  HTML components should be simple as well.  And, while Firebug does allow copying HTML, it is messy and unformatted.  Not great for editing.

    The only real issue would be getting any associated javascript with the items.  But, I'd settle for just the formatting of an element at this point.
    LVL 58

    Accepted Solution

    Select the css dropdown, display style information, select the element and it will give you the css for the element including any inherited styles.
    The html you can grab with firebug
    Thats about the best you are going to get

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now