底部的鱼是怎么实现的

ceshi123

nikooo 真是太骚了，粉色😅

nikooo

ceshi123 哈哈哈，其实还是白或者黑色背景色调界面比较直观，其他颜色的话，要调一些文字的样式，略麻烦，但我在追求好看的路上坚持想走的骚一点，所以来了个粉色论坛

WuLoos

nikooo 求网址观瞻。

nikooo

WuLoos
现在网站还在备案审核，暂时无法域名访问，只有一个公网ip，贴出来我的小站怕被攻击，先弄个gif出来看看界面

WuLoos

nikooo 你这个界面是咋能的啊？跟传统的论坛很像。

nikooo

WuLoos
用了这个插件Flarum Categories，然后在后台管理-常规-论坛首页设置成板块就可以了。然后自己根据需要结合官方插件flarum-tags加减栏目就有这个效果了

是白翼酱呐

需添加内容（包括Footer）
https://discuss.teacsoc.com/
鲸鱼js位于
https://discuss.teacsoc.com/fish.js

kls2012

nikooo 你好，我按照上述方法添加了，能实现功能，可能是我安装了 QQ 登录的原因，点击登录时，登录窗口出不来

yannis

kls2012

可能是footer元素冲突的问题，可以自己改一下~ 因为这里的footer泛指的太广，

footer{
    position: relative;
}

footer.你的冲突元素 {
    position: unset;
}//与鲸鱼动画的footer>position冲突

土拨鼠

为什么添加之后没有文字 Image description

mrblack

总结，在后台-外观-自定义页脚中添加以下代码即可

<div id="flyfish" class="fly-fish" height="200"></div>
<script src="https://discuss.flarum.org.cn/fish.js"></script>

sunjie7777

按照上面的添加了，效果不错，谢谢。

Tim

黑夜模式食用更佳，记得修改对应文字即可

页脚格式：

<!– 页脚 –>
<footer>
<div class=“site-footer”>
<div style=“color: rgb(137, 137, 140);font-size:0.9em;” class=“footer-container rm-link-color”>
<p>
<!– 加载时间 –>
<script>
var start_time = new Date();
var end_time = "";
var loadt = setInterval(function () {
if (document.readyState == “complete”) {
showLoadTime();
}
}, 500)

                function showLoadTime() {
                    end_time = new Date();
                    loadtime_span.innerHTML = "T " + (end_time.getTime() - start_time.getTime()) + " ms";
                    clearInterval(loadt);
                }
            </script>
            <!-- IP -->
			<span id="ip_span" align=center></span>
            <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
            <script type="text/javascript">
                ip_span.innerHTML = returnCitySN["cname"] + " " + returnCitySN["cip"];
            </script>

            <span class="mx-2">|</span>

            <span id="loadtime_span">T</span>

            <span class="mx-2">|</span>

            <a id="stats" href="https://stats.uptimerobot.com/QAL8xc6m8y" target="_blank"></a>

        </p>
        <p>
            <a id="prot_span" href="https://discuss.flarum.org.cn/docs/protocol.html"></a>

            <span class="mx-2">|</span>

            <a id="rept_span" href="mailto:flarumcn@qq.com"></a>

            <span class="mx-2">|</span>

            <span id="ver_span"></span>
			<p id="right_span"></p>
        </p>
        <!-- 声明 -->
        <script type="text/javascript">
            var site_version = "1.1.1-211101";
            var lang = document.getElementsByTagName("html");
            var userLang = lang[0].getAttribute("lang");
            if (userLang.includes("zh")) {
				stats.innerHTML = "状态";
                prot_span.innerHTML = "社区规范";
                rept_span.innerHTML = "违法和不良信息举报";
                ver_span.innerHTML = "版本 " + site_version;
                right_span.innerHTML = "本站独立于 Flarum 基金会运行。<a href=\"https://flarum.org/verified-communities\"><i class=\"fas fa-info-circle\"></i> 了解官方认证社区</a>";
            }
            else {
				stats.innerHTML = "Status";
                prot_span.innerHTML = "Protocol";
                rept_span.innerHTML = "Report";
                ver_span.innerHTML = "Version " + site_version;
               right_span.innerHTML = "This site operates independently of the Flarum Foundation. Read more about <a href=\"https://flarum.org/verified-communities\"><i class=\"fas fa-info-circle\"></i> verified communities</a>.";
            }
        </script>
    </div>
</div>
<div id="flyfish" class="fly-fish" height="200"></div>

</footer>

自定义css：

.site-footer {
margin:0;
/margin-top:64px;/
padding-top:30px;
padding-bottom:30px;
color:hsla(0,0%,100%,.9);
box-sizing:inherit;
text-align:center;
font-size:1em
}
@media (max-width:991px){
.site-footer {
padding-top:0px;
}
}
.site-footer p {
margin:0
}
.rm-link-color > p > a {
text-decoration:none;
color:#89898c
}
.rm-link-color > p > a:hover {
text-decoration:underline
}

.fly-fish{
z-index: -1;
line-height: 0px;
height: 350px;
}
footer{
position: relative;
}
.site-footer{
position: absolute;
width: 100%;
top: calc(100% / 4 * 3);
transform: translateY(calc(-50% + 10%));
padding: 0;
}

.App{
padding-bottom: 0;
}
@media (max-width: 767px){
.App{
padding-bottom: 0;
}
.App-content {
padding-bottom: 0;
}
}

sunjie7777

已经使用上了，很不错。谢谢。顺便配了个性化一下色彩 Image description
。大家看看如何。

烟柳拂风

sunjie7777 你这个颜色是怎么修改的

aliangdog

烟柳拂风 css加个背景色

aliangdog

烟柳拂风或者JS里面修改颜色

sunjie7777

烟柳拂风
我对fish.js稍稍做了修改，使他支持前景色和背景色的自定义。

fish2.txt

11kB

在css设置中添加
.fly-fish{
z-index: -1;
line-height: 0px;
height: 350px;
/前景色/
color:#33ccff;
/背景色/
background-color:#F5FFFA;
}

就是蓝色的大海。
你也可以自己配一下颜色。

CharlieK

手机视图里底部的动画会盖住更多选项的弹窗，请问这个应该如何解决呢？谢谢！
Image description