CODEWITHSUNDEEP
htmlcss
pko10ko
pko10ko

Reputation: 33

A way to temporarily add an external stylesheet to an already existing website that is shareable

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

Here's my problem:

We have a client who has a really old and outdated website, but they don't have the budget for a full redesign. Basically what they want to do is to update the styling slightly (change colors and fonts, increase font size, etc), basic CSS edits. Before that happens, I need to be able to review the style changes internally with my creative director before we present it to the client.

My question is, is there a really simple way that I can take an existing website that is currently online, slap a different/new external stylesheet on it, and generate a temporary "updated" website under a new url that I will be able to send to my creative director to review? Is there an website/service that does this?

EDIT: A browser extension would not solve the problem since it would only work for me. I need to be able to share the link to review internally and potentially send it to clients also.

I guess what i'm really after is a simple website with two text fields. [Insert existing page URL] and [Insert path to new stylesheet]. And it generates a temporary live webpage with a unique URL that I can share. I can't imagine that something like that doesn't already exist.

Thanks in advance..

Upvotes: 3

Views: 247

Answers (4)

Onimusha
Onimusha

Reputation: 3385

Sounded interesting so I just whipped up the following:

  1. Specify URL to site
  2. Specify the URL to your CSS

That's it

Simly create a php page on your own server with the following. You can customise and secure further but my initial test worked fine 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>

The resulting page should have the URL you can send. Like I said, you can further secure this but anyone who can't afford to pay for a site makeover will most likely not know how to abuse the link you send :)

Hope it's what you're looking for

Upvotes: 1

Pixel Rubble
Pixel Rubble

Reputation: 1101

If you're using Firefox, you can:

  1. Right click on the page
  2. Select "Inspect Element (Q)"
  3. Open the "head" area of the code while in the inspector
  4. locate their CSS link
  5. click the link, and change it to link to the file you're written (ie http://www.example.com/style.css)
  6. Click off and watch the page change.

If however you want to make small individual edits, you can do the same process, but select the element you want to change, and alter it's CSS to the right.

Upvotes: 0

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

You can load an actual real live site and use tools like GreaseMonkey or TamperMonkey (depending on your browser) inject styles just for your browser view of the site. This way original site stays intact and you're free to experiment with your own view of it as much as you need.

Upvotes: 0

Karim Tabet
Karim Tabet

Reputation: 1847

Not sure if this is what you're after.

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

Open the file you've saved with your favourite text editor.

Do a search for ".css".

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

Make sense?

Upvotes: 0

Related Questions