一种将外部样式表临时添加到可共享的现有网站的方法

时间:2014-10-10 18:46:36

标签: html css

我不确定这是否已存在于某个地方,但我搜索过并找不到任何东西..

这是我的问题:

我们的客户拥有一个非常陈旧且过时的网站,但他们没有完全重新设计的预算。基本上他们想要做的是稍微更新样式(更改颜色和字体,增加字体大小等),基本的CSS编辑。在此之前,我需要能够在我们向客户提交创意总监之前,在内部审核样式更改。

我的问题是,有一个非常简单的方法,我可以采取当前在线的现有网站,在其上拍一个不同的/新的外部样式表,并在一个新网址下生成一个临时的“更新”网站,我将能够发送给我的创意总监进行审核吗?是否有网站/服务可以做到这一点?

编辑: 浏览器扩展无法解决问题,因为它只适用于我。我需要能够在内部共享链接以进行审核,并可能将其发送给客户。

我想我真正想要的是一个带有两个文本字段的简单网站。 [插入现有页面URL]和[插入新样式表的路径]。它会生成一个临时的实时网页,其中包含我可以共享的唯一网址。我无法想象那样的东西还不存在。

提前致谢..

4 个答案:

答案 0 :(得分:1)

听起来很有趣所以我只是掀起了以下内容:

  1. 指定网站的网址
  2. 指定CSS的网址
  3. 就是这样

    使用以下内容在您自己的服务器上模拟创建php页面。您可以进一步自定义和保护,但我的初始测试在这个stackoverflow页面上运行良好

    <?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>
    

    生成的页面应包含您可以发送的URL。就像我说的那样,你可以进一步确保这一点,但任何无力支付网站改造费用的人都很可能不知道如何滥用你发送的链接:)

    希望这就是你要找的东西

答案 1 :(得分:0)

不确定这是否是你所追求的。

您可以访问自己喜欢的浏览器上的任何网站。保存页面(Ctrl + S)。

打开您使用自己喜欢的文本编辑器保存的文件。

搜索&#34; .css&#34;。

将引用的css文件替换为您自己的样式表的路径。

有意义吗?

答案 2 :(得分:0)

您可以加载实际的真实网站,并使用GreaseMonkeyTamperMonkey(取决于您的浏览器)注入样式等工具,仅针对您网站的浏览器视图。通过这种方式,原始网站保持不变,您可以根据需要自由地尝试自己的视图。

答案 3 :(得分:0)

如果您使用的是Firefox,则可以:

  1. 右键单击页面
  2. 选择“检查元素(Q)”
  3. 在检查器中打开代码的“head”区域
  4. 找到他们的CSS链接
  5. 点击该链接,然后将其更改为指向您撰写的文件(即http://www.example.com/style.css
  6. 点击关闭并观看页面更改。
  7. 如果你想进行小的单独编辑,你可以做同样的过程,但是选择你想要改变的元素,并在右边改变它的CSS。