[开箱即用]自定义主页背景 #169

fengidog · 2024-07-05T08:14:40Z

初始状态下，背景毫无美感，但无法向flame中一样自定义CSS，从本作的Issue中看到作者回复，可以从自定义页脚中实现，因此参考flame中的自定义CSS，让AI帮我搓了一个改变背景图片的代码，粘贴进自定义页脚中保存即可。
改变问候语文字大小，是蔚来在手机端访问时问候语不会和天气图标干涉。

由于我搞不懂html格式，AI搓的代码有少量BUG，如点击进入应用（/applications）与书签（/bookmarks）页面时，背景不会更改，另在设置中，主题/天气/搜索页时同样不会更改，水平有限，期待各位大佬完善

更改问候语大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page with Styled h1 Element</title>
    <style>
        /* Custom h1 styles */
        h1.plugin-container {
            font-size: 25px; /* 字体大小 */
        }
    </style>
</head>
</html>

更改背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Image Example</title>
    <style>
        /* Background image */
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0; /* 确保body没有默认的margin */
            height: 100%;
            overflow: auto; /* 允许页面滚动 */
        }

        body:before {
            content: "";
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: url("https://wallpaperaccess.com/full/1286235.jpg");/* 背景图片地址 */
            background-size: cover;
            z-index: -999;
            background-position: center center; /* 背景图片居中显示 */
            height: 100%;
            width: 100%;
            transform: scale(1.1);
            filter: blur(0.2rem);
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <div class="container">
        <!-- 你的页面内容放这里 -->
    </div>
</body>
</html>

请描述你想要得到的结果

实现后效果如下：

后两套主题见评论

请描述你想要的替代方案

无

搜索

在提交这个表格之前，我已经进行了相关问题搜索，没有找到相关的问题或解决方案。

补充描述

No response

The text was updated successfully, but these errors were encountered:

gsh456 · 2024-07-22T00:40:12Z

wanrenbuwanxin · 2024-07-25T09:21:49Z

删掉了

fengidog · 2024-07-26T07:18:51Z

删掉了

附一下这位大佬的代码其中关于管理处的网页可以替换为自己的地址，大家在分享时也注意安全，不要泄露。

        <center class="dibu">
            <div style=" line-height: 20px;font-size: 13pt;font-weight: bold;">
                <span>
                    "
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span> "
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                    <small>
                          ᅟᅠ        ‌‍‎‏ 
                    </small>
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="你的后台地址">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        后台
                    </a>
                </span>
            </div>
        </center>
        <br />
        <br />
    </div>



    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>



<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
                "❤敬业❤", "❤诚信❤", "❤友善❤");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>

fengidog · 2024-07-26T07:26:45Z

新折腾了两套主题，粘贴进自定义页脚中保存即可

赛博朋克风格：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page with Styled h1 Element</title>
    <style>
        /* Custom h1 styles */
        h1.plugin-container {
            font-size: 25px; /* 字体大小 */
        }
    </style>
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Styled Page</title>
    <style>
        /* Reset some basic elements */
        body, h1, h5 {
            margin: 0;
            padding: 0;
        }

        /* Background image */
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0; /* Ensure body has no default margin */
            height: 100%;
            overflow: auto; /* Allow the page to scroll */
        }

        body:before {
            content: "";
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: url("https://s3.leaves.red/c33abb6ba76a441c9f0683b1723b90a7:red/2024/07/26/66a34aaacd92e.png"); 
            background-size: cover;
            z-index: -999;
            background-position: center center; /* Center the background image */
            height: 100%;
            width: 100%;
            filter: blur(0.08rem);
            opacity: 0.6;
        }

        /* Widen Container Layout */
        .Layout_Container__2Hv3J {
            padding: 1.25rem 0 !important;
        }

        /* Sets Overall Grid Handling */
        .AppGrid_AppGrid__33iLW {
            grid-template-columns: repeat(3, minmax(18.75rem, 18.75rem)) !important;
            align-items: left !important;
            column-gap: 3.125rem !important;
            row-gap: 1.2rem !important;
        }

        /* AppCard Customisation */
        .AppCard_AppCard__1V2_0 {
            padding: 0.8rem !important;
            border-radius: 0.6rem !important;
            background-color: rgba(0, 0, 0, 0.3) !important;
        }

        .AppCard_AppCard__1V2_0 a {
            border-radius: 0.41rem !important;
            padding: 0.3rem !important;
        }

        .AppCard_AppCard__1V2_0 a:hover {
            background-color: rgba(0, 255, 0, 0.3) !important;
            border-radius: 0.31rem !important;
            padding: 0.3rem !important;
        }

        /* Apps Layout in AppCards */
        .AppCard_Apps__3ud43 {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-gap: 0.3125rem !important;
        }

        .AppCard_Apps__3ud43 a {
            line-height: 1rem !important;
        }

        .AppCard_Apps__3ud43 a:hover {
            line-height: 1rem !important;
        }

        /* Push description to reasonable space */
        .AppCard_AppCardDetails__tbAhY h5 {
            font-size: 0.7692rem !important;
        }

        /* Settings button style */
        .Home_SettingsButton__Qvn8C {
            border-radius: 0.5rem !important;
        }
    </style>
</head>
<body>
    <!-- Page content goes here -->
    <div class="container">
        <!-- Your page content goes here -->
    </div>
</body>
</html>

塞尔达：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page with Styled h1 Element</title>
    <style>
        /* Custom h1 styles */
        h1.plugin-container {
            font-size: 25px; /* 字体大小 */
        }
    </style>
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Styled Page</title>
    <style>
        /* Reset some basic elements */
        body, h1, h5 {
            margin: 0;
            padding: 0;
        }

        /* Background image */
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0; /* Ensure body has no default margin */
            height: 100%;
            overflow: auto; /* Allow the page to scroll */
        }

        body:before {
            content: "";
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: url("https://s3.leaves.red/c33abb6ba76a441c9f0683b1723b90a7:red/2023/05/15/64613a26ca9a3.jpg"); 
            background-size: cover;
            z-index: -999;
            background-position: center center; /* Center the background image */
            height: 100%;
            width: 100%;
            filter: blur(0.15rem);
            opacity: 0.2;
        }

        /* Widen Container Layout */
        .Layout_Container__2Hv3J {
            padding: 1.25rem 0 !important;
        }

        /* Sets Overall Grid Handling */
        .AppGrid_AppGrid__33iLW {
            grid-template-columns: repeat(3, minmax(18.75rem, 18.75rem)) !important;
            align-items: left !important;
            column-gap: 3.125rem !important;
            row-gap: 1.2rem !important;
        }

        /* AppCard Customisation */
        .AppCard_AppCard__1V2_0 {
            padding: 0.8rem !important;
            border-radius: 0.6rem !important;
            background-color: rgba(0, 0, 0, 0.3) !important;
        }

        .AppCard_AppCard__1V2_0 a {
            border-radius: 0.41rem !important;
            padding: 0.3rem !important;
        }

        .AppCard_AppCard__1V2_0 a:hover {
            background-color: rgba(0, 255, 0, 0.3) !important;
            border-radius: 0.31rem !important;
            padding: 0.3rem !important;
        }

        /* Apps Layout in AppCards */
        .AppCard_Apps__3ud43 {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-gap: 0.3125rem !important;
        }

        .AppCard_Apps__3ud43 a {
            line-height: 1rem !important;
        }

        .AppCard_Apps__3ud43 a:hover {
            line-height: 1rem !important;
        }

        /* Push description to reasonable space */
        .AppCard_AppCardDetails__tbAhY h5 {
            font-size: 0.7692rem !important;
        }

        /* Settings button style */
        .Home_SettingsButton__Qvn8C {
            border-radius: 0.5rem !important;
        }
    </style>
</head>
<body>
    <!-- Page content goes here -->
    <div class="container">
        <!-- Your page content goes here -->
    </div>
</body>
</html>

wanrenbuwanxin · 2024-07-26T09:22:48Z

老哥，请问下，图标是怎么自定义的？

fengidog · 2024-07-30T00:09:41Z

老哥，请问下，图标是怎么自定义的？

我后面都改成自带的图标了，之前那个图标就是你开目标网页，按F12，然后刷新，在network选项卡里面，有一个favincon.svg，右键复制链接，就是自定义图标，比如：https://github.githubassets.com/favicons/favicon.svg

universeXiong · 2024-08-26T05:49:36Z

删掉了

附一下这位大佬的代码其中关于管理处的网页可以替换为自己的地址，大家在分享时也注意安全，不要泄露。

        <center class="dibu">
            <div style=" line-height: 20px;font-size: 13pt;font-weight: bold;">
                <span>
                    "
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span> "
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                    <small>
                          ᅟᅠ        ‌‍‎‏ 
                    </small>
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="你的后台地址">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        后台
                    </a>
                </span>
            </div>
        </center>
        <br />
        <br />
    </div>



    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>



<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
                "❤敬业❤", "❤诚信❤", "❤友善❤");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>

老哥，你用这个js正常吗？我在设置页面能生效，在首页就没效果了，控制台也不报错，然后会莫名其妙多了一个这个请求：http://127.0.0.1:5005/'none'，不出所料的404

universeXiong · 2024-08-26T06:13:39Z

删掉了

附一下这位大佬的代码其中关于管理处的网页可以替换为自己的地址，大家在分享时也注意安全，不要泄露。

        <center class="dibu">
            <div style=" line-height: 20px;font-size: 13pt;font-weight: bold;">
                <span>
                    "
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span> "
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                    <small>
                          ᅟᅠ        ‌‍‎‏ 
                    </small>
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="你的后台地址">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        后台
                    </a>
                </span>
            </div>
        </center>
        <br />
        <br />
    </div>



    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>



<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
                "❤敬业❤", "❤诚信❤", "❤友善❤");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>

老哥，你用这个js正常吗？我在设置页面能生效，在首页就没效果了，控制台也不报错，然后会莫名其妙多了一个这个请求：http://127.0.0.1:5005/'none'，不出所料的404

哦没事了，重新拉了一个镜像才发现CSP这个错误码，配置一下应该就可以了

fengidog added 悬而未决 🥷 申请功能 🎁 申请一个新的程序功能 labels Jul 5, 2024

fengidog assigned soulteary Jul 5, 2024

fengidog changed the title ~~可以自定义背景的代码~~ [开箱即用]自定义主页背景 Jul 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[开箱即用]自定义主页背景 #169

[开箱即用]自定义主页背景 #169

fengidog commented Jul 5, 2024 •

edited

Loading

gsh456 commented Jul 22, 2024

wanrenbuwanxin commented Jul 25, 2024

fengidog commented Jul 26, 2024

fengidog commented Jul 26, 2024 •

edited

Loading

wanrenbuwanxin commented Jul 26, 2024

fengidog commented Jul 30, 2024

universeXiong commented Aug 26, 2024

universeXiong commented Aug 26, 2024

[开箱即用]自定义主页背景 #169

[开箱即用]自定义主页背景 #169

Comments

fengidog commented Jul 5, 2024 • edited Loading

请描述你想要得到的结果

请描述你想要的替代方案

搜索

补充描述

gsh456 commented Jul 22, 2024

wanrenbuwanxin commented Jul 25, 2024

fengidog commented Jul 26, 2024

fengidog commented Jul 26, 2024 • edited Loading

wanrenbuwanxin commented Jul 26, 2024

fengidog commented Jul 30, 2024

universeXiong commented Aug 26, 2024

universeXiong commented Aug 26, 2024

fengidog commented Jul 5, 2024 •

edited

Loading

fengidog commented Jul 26, 2024 •

edited

Loading