你的主题好看，能分享下吗？

okccn

ink 你的主题好看，能分享下吗？

ink

/* 跳动标题 */
.Hero-title {
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

@keyframes my-face {
    2% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    4% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    6% {
        transform: translate(0,1.5px) rotate(-1.5deg);
    }

    8% {
        transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    10% {
        transform: translate(0,2.5px) rotate(1.5deg);
    }

    12% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    14% {
        transform: translate(0,-1.5px) rotate(1.5deg);
    }

    16% {
        transform: translate(0,-0.5px) rotate(-1.5deg);
    }

    18% {
        transform: translate(0,0.5px) rotate(-1.5deg);
    }

    20% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    22% {
        transform: translate(0,0.5px) rotate(-1.5deg);
    }

    24% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    26% {
        transform: translate(0,0.5px) rotate(0.5deg);
    }

    28% {
        transform: translate(0,0.5px) rotate(1.5deg);
    }

    30% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    32% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    34% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    36% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    38% {
        transform: translate(0,1.5px) rotate(-1.5deg);
    }

    40% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    42% {
        transform: translate(0,2.5px) rotate(-1.5deg);
    }

    44% {
        transform: translate(0,1.5px) rotate(0.5deg);
    }

    46% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    48% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    50% {
        transform: translate(0,0.5px) rotate(0.5deg);
    }

    52% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    54% {
        transform: translate(0,-1.5px) rotate(1.5deg);
    }

    56% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    58% {
        transform: translate(0,0.5px) rotate(2.5deg);
    }

    60% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    62% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    64% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    66% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    68% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    70% {
        transform: translate(0,1.5px) rotate(0.5deg);
    }

    72% {
        transform: translate(0,2.5px) rotate(1.5deg);
    }

    74% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    76% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    78% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    80% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    82% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    84% {
        transform: translate(0,1.5px) rotate(2.5deg);
    }

    86% {
        transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    88% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    90% {
        transform: translate(0,2.5px) rotate(-0.5deg);
    }

    92% {
        transform: translate(0,0.5px) rotate(-0.5deg);
    }

    94% {
        transform: translate(0,2.5px) rotate(0.5deg);
    }

    96% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    98% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    0%,100% {
        transform: translate(0,0) rotate(0deg);
    }
}
/* 不要在全部标签页上展示竖排、信息流广告，以及在线用户、论坛统计 */
.TagsPage .item-forumStatisticsWidget {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .item-forumStatisticsWidget {
        display: none;
    }
}

body {
    background-image: linear-gradient(135deg, rgba(186, 186, 186, 0.03) 0%, rgba(186, 186, 186, 0.03) 10%,rgba(133, 133, 133, 0.03) 10%, rgba(133, 133, 133, 0.03) 14%,rgba(38, 38, 38, 0.03) 14%, rgba(38, 38, 38, 0.03) 17%,rgba(93, 93, 93, 0.03) 17%, rgba(93, 93, 93, 0.03) 25%,rgba(80, 80, 80, 0.03) 25%, rgba(80, 80, 80, 0.03) 45%,rgba(239, 239, 239, 0.03) 45%, rgba(239, 239, 239, 0.03) 100%),linear-gradient(135deg, rgba(236, 236, 236, 0.03) 0%, rgba(236, 236, 236, 0.03) 47%,rgba(182, 182, 182, 0.03) 47%, rgba(182, 182, 182, 0.03) 63%,rgba(223, 223, 223, 0.03) 63%, rgba(223, 223, 223, 0.03) 81%,rgba(86, 86, 86, 0.03) 81%, rgba(86, 86, 86, 0.03) 89%,rgba(23, 23, 23, 0.03) 89%, rgba(23, 23, 23, 0.03) 90%,rgba(226, 226, 226, 0.03) 90%, rgba(226, 226, 226, 0.03) 100%),linear-gradient(45deg, rgba(52, 52, 52, 0.03) 0%, rgba(52, 52, 52, 0.03) 31%,rgba(246, 246, 246, 0.03) 31%, rgba(246, 246, 246, 0.03) 63%,rgba(188, 188, 188, 0.03) 63%, rgba(188, 188, 188, 0.03) 71%,rgba(15, 15, 15, 0.03) 71%, rgba(15, 15, 15, 0.03) 87%,rgba(127, 127, 127, 0.03) 87%, rgba(127, 127, 127, 0.03) 93%,rgba(234, 234, 234, 0.03) 93%, rgba(234, 234, 234, 0.03) 100%),linear-gradient(90deg, #ffffff,#ffffff);
    .CommentPost.Post--by-actor {
    // This sets the left border to be the same color as the forum primary.
    border-left: solid @config-primary-color;
}

.Hero {
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
/* 卡片主题 */
.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem {
    transition: all 0.1s;
 /* 动画时间 */;
}

@media (min-width: 991px) {
    .IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover {
 /* 悬浮效果 */
        transform: scale(1.01);
 /* 缩放 */;
    }
}

@media (min-width: 768px) {
 /* pc 端 */
    .IndexPage .DiscussionListItem-content,
.UserPage .DiscussionListItem-content,
.DiscussionPage-discussion .DiscussionListItem-content {
 /* 首页、用户页、讨论页卡片大小、描边 */
        padding-left: 80px;
        padding-right: 80px;
        padding-top: 10px;
        border-radius: 8px;
        padding-bottom: 10px;
        border: 1px solid #dbdfe6!important;
    }

    .IndexPage .Post.CommentPost,
.UserPage .Post.CommentPost,
.DiscussionPage-discussion .Post.CommentPost {
        margin-top: 20px;
        border-radius: 8px;
        border: 1px solid #dbdfe6 !important;
    }

    .IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags {
        top: 23px !important;
    }

    .DiscussionListItem {
        position: relative;
        margin-right: 0;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        border-radius: 8px;
        margin-top: 15px;
    }
}

@media (min-width: 768px) {
    .IndexPage .DiscussionListItem:hover {
        background-color: #fff;
        -webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
        box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
    }
}
/* banner */
.WelcomeHero {
    color: #282828;
}

.Hero h2 {
    font-size: 25px;
    font-weight: 700;
}

.Hero {
    box-shadow: 0px 1px 10px 0 rgba(151,158,181,0.28);
    background-color: #fff;
    margin-bottom: 15px;
}
/*.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; }*/
.WelcomeHero .Hero-subtitle {
    color: #000;
}
}

	/* 固定左侧标签栏 */
@media (min-width: 992px) {
    .sideNav,
			.sideNav>ul {
        width: 190px;
        position: sticky;
        top: 80px;
    }

    .App {
        overflow-x: visible;
    }
			/* 版块页不受影响 */
    .CategoriesPage.TagsPage .sideNav,
			.CategoriesPage.TagsPage .sideNav>ul {
        position: unset;
    }
			/* 标签页不受影响 */
    .TagsPage.TagsPage .sideNav,
			.TagsPage.TagsPage .sideNav>ul {
        position: unset;
    }
}
/*右上角楼主*/
div.PostStream-item[data-index="0"] article.CommentPost.Post.Post--by-start-user header.Post-header ul:not(ul.PostUser-badges.badges):after {
    content: "楼主";
    background: #F05D1D;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/*沙发*/
div.PostStream-item[data-index="1"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "沙发";
    background: #f947c8;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/*板凳*/
div.PostStream-item[data-index="2"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "板凳";
    background: #db45fb;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/*地板*/
div.PostStream-item[data-index="3"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "地板";
    background: #2a92f4;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/* 不要在分区版块上显示论坛统计、在线会员、地球 */
.CategoriesPage.TagsPage .item-forumStatisticsWidget,
.CategoriesPage.TagsPage .item-onlineUsers,
.CategoriesPage.TagsPage .item-flagrow-ad {
    display: none !important;
}

.TagsPage .OnlineUsers {
    display: none;
}

@media (max-width: 721px) {
    .OnlineUsers {
        display: none;
    }
}

okccn

ink 非常感谢您的回复和分享，还想请教一下。是不是还需要的主题插件控制横板？

ceshi123

ink

大佬，主页有一点小bug，麻烦大佬看看gif动画，我录下过程了。

Image description

WuLoos

ink 您好，这个主题，帖子阅读页，帖子标题的背景在哪里修改？谢谢！

zhetengtiao

okccn 不需要的，复制上面那个代码，到网站后台的外观里，拉到最下面有个自定义样式，把代码粘贴进去，点击保存就可以

ink

WuLoos 😅不明白

WuLoos

ink Image description

就是这个标题的背景，在未使用您这个模板之前，是随着标签的背景颜色的，使用之后就不变了，好像。

ink

是的，这是我设置的

WuLoos

ink 是的，我想知道这个背景在哪里改呢？多谢哈。

ink

.Hero {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
修改。不用删除这行即可

WuLoos

ink 好的，多谢多谢。

WuLoos

ink 把这个删除后，之前的帖子标题背景变成一片白了。晕。

ink

WuLoos 刷新，清楚缓存

ink

能发发网址吗？

WuLoos

ink 私信你了。

witchsman

大佬，，我把代码都复制之后，发现有个问题，就是文字的颜色是那种白色，然后加上背景颜色衬托，就更加看不清了，我想修改文字颜色变成深色一点，比如黑色，蓝色之类的，但在这里代码里没找到修改文字颜色相关的地方，然后我尝试把带有#的颜色代码，修改了下，几乎都是背景啊或者别的之类的，唯独这字体不知道在哪，麻烦请告知