A way to temporarily add an external style sheet to an existing website that can be shared

I'm not sure if this already exists somewhere, but I've searched and couldn't find anything.

Here's my problem:

We have a client who has a really old and outdated website, but doesn't have the budget for a complete redesign. Basically what they want to do is update the styling slightly (change colors and fonts, increase font size, etc.) Major CSS changes. Before that happens, I will need to review the styling changes inside my creative director before we present it to the client.

My question is, is there really an easy way that I can take an existing website that is currently running on the internet, delete another / new external style sheet over it and create a temporary "updated" website under the new A URL that I will be able to send my creative director to view? Is there a website / service that does this?

EDIT: Browser extension will not solve the problem as it will only work for me. I need to be able to split a link in order to view it internally and potentially send it to clients as well.

I guess what I really am, this is a simple website with two text boxes. [Insert existing page URL] and [Insert path to new style sheet]. And it creates a temporary live webpage with a unique url that I can provide. I can't imagine that something like this doesn't exist yet.

Thanks in advance.

+3


source to share


4 answers


Sounds interesting, so I just hacked the following:

  • Enter the site url
  • Provide the url of your CSS

What he

Just create a page php

on your own server with the following. You can customize and defend further, but my initial test did a great job with this very stackoverflow page



<?php
    if(isset($_GET['url'])){
        $html = file_get_contents($_GET['url']);
        if($html){
            $base = dirname($_GET['url']);
            $html = str_replace(array('</head>','</HEAD>'), '<link rel="stylesheet" type="text/css" href="'.$_GET['css'].'" /></head>', $html);
            if(!strpos('<base ', $html)){
                $html = str_replace(array('</head>','</HEAD>'), '<base href="'.$base.'" /></head>', $html);
            }
            echo $html;
            exit();
        }
    }
?>
<!DOCTYPE html>
<html>
<head>
<title>Stack pko10ko</title>
</head>

<body>
<form action="" method="get">
    Site URL: <input name="url" /><br />
    CSS URL: <input name="css" /><br />
    <input type="submit" value="Generate" />
</form>
</body>
</html>

      

As a result, the page should have a URL that you can submit. As I said, you can protect this even more, but anyone who can't afford to pay for a site makeover most likely doesn't know how to abuse the link you submit :)

Hope you are looking for

+1


source


Not sure if this is what you want.

You can visit any website in your favorite browser. Save the page (Ctrl + S).

Open the file you saved with your favorite text editor.



Do a search for .css.

Replace the css file referenced by the path to your own stylesheet.

Make sense?

0


source


You can load a real real site and use tools like GreaseMonkey or TamperMonkey (depending on your browser) to inject styles for your browser only. This way, the original site remains intact and you can experiment with your own take on it as much as you like.

0


source


If you are using Firefox, you can:

  • Right click on the page
  • Select "Inspect Element (Q)"
  • Open the "head" area of ​​code in the inspector
  • find the css link.
  • click the link and change it to a link to the file you wrote (i.e. http://www.example.com/style.css )
  • Click and view the page change.

If you want to make small individual changes, you can do the same process, but select the element you want to change and change its CSS to the right.

0


source







All Articles