如何把Flarum 左上角文字标题换成 Logo 图片

Flarum为了极致的简单所以这个功能没给UI替换设计，但也有简单的预留方案，只要后台修改CSS就可以一步到位搞定了。

进入 Flarum 后台：

外观 → 自定义 CSS → 粘贴下面代码

/* 隐藏左上角文字标题 */
.Header-title {
    font-size: 0;
    color: transparent;
    display: inline-block;
    width: 140px; /* 调整 logo 宽度 */
    height: 40px; /* 调整 logo 高度 */
    background-image: url(https://你的图片地址.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/* 让导航栏对齐更自然 */
.Header-title a {
    display: block;
    width: 100%;
    height: 100%;
}

你只需要改 1 个地方

https://你的图片地址.webp

换成你自己的 logo 地址就行。

想调整大小？

直接改这两个值就行：

width: 140px;   /* 宽度 */
height: 40px;   /* 高度 */

想做成二次元 / 圆角 / 柔和风格？

用这个进阶版：

.Header-title {
    font-size: 0;
    color: transparent;
    display: inline-block;
    width: 140px;
    height: 40px;
    background-image: url(https://你的图片地址.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    border-radius: 6px; /* 圆角 */
}
.Header-title a {
    display: block;
    width: 100%;
    height: 100%;
}

二次元/柔和风进阶版可以用下面这段CSS

/* ========== 核心：替换左上角文字为二次元 Logo ========== */
.Header-title {
    font-size: 0; /* 隐藏文字 */
    color: transparent;
    display: inline-block;
    width: 150px; /* Logo 宽度（可调整） */
    height: 45px; /* Logo 高度（可调整） */
    background-image: url(https://你的二次元Logo地址.webp); /* 替换为你的图片地址 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    /* 二次元圆角+柔和阴影 */
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
    /* 渐变背景衬托 Logo（可选，适配透明底 Logo） */
    background-color: #fff0f5;
    background: linear-gradient(135deg, #fff0f5 0%, #f8f0ff 100%);
    /* 内边距让 Logo 不贴边 */
    padding: 4px 10px;
    box-sizing: border-box;
}

/* 确保 Logo 点击区域完整 */
.Header-title a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== 二次元悬浮动效（核心亮点） ========== */
.Header-title {
    transition: all 0.3s ease; /* 平滑过渡 */
    transform: translateY(0);
}
/* 鼠标悬浮时轻微上浮+阴影加深，有灵动效果 */
.Header-title:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.2);
    /* 轻微放大，增强交互感 */
    scale: 1.05;
}

/* ========== 移动端适配（避免 Logo 变形） ========== */
@media (max-width: 768px) {
    .Header-title {
        width: 120px; /* 移动端缩小 Logo */
        height: 40px;
        border-radius: 8px; /* 移动端圆角稍小 */
    }
    .Header-title:hover {
        transform: translateY(-2px); /* 移动端悬浮动效稍弱 */
        scale: 1.03;
    }
}

/* ========== 可选：导航栏整体二次元风格适配 ========== */
/* 导航栏背景渐变，和 Logo 风格统一 */
.Header-nav {
    background: linear-gradient(90deg, #fef7fb 0%, #f5fafe 100%);
}
/* 导航栏文字hover颜色（二次元粉紫调） */
.Header-nav .item-link:hover {
    color: #e91e63 !important;
}

我对NCN适配主题做了优化是这段：

/* ========== 核心：EVA主题 - 替换左上角文字为Logo ========== */
.Header-title {
    font-size: 0; /* 隐藏文字 */
    color: transparent;
    display: inline-block;
    width: 150px; /* Logo 宽度（可调整） */
    height: 45px; /* Logo 高度（可调整） */
    background-image: url(https://你的EVA主题Logo地址.webp); /* 替换为你的EVA Logo地址 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    /* EVA风格：机甲圆角+赛博阴影（初号机紫绿调） */
    border-radius: 8px; /* 硬朗圆角，贴合机甲风格 */
    box-shadow: 0 0 15px rgba(102, 0, 204, 0.3), 0 4px 10px rgba(0, 204, 153, 0.2);
    /* EVA初号机渐变背景（紫绿赛博风，适配透明底Logo） */
    background-color: #0a0a1a;
    background: linear-gradient(135deg, #120629 0%, #081818 50%, #120629 100%);
    /* 内边距让Logo不贴边 */
    padding: 4px 10px;
    box-sizing: border-box;
    /* 轻微发光边框，强化EVA科技感 */
    border: 1px solid rgba(102, 0, 204, 0.4);
}

/* 确保 Logo 点击区域完整 */
.Header-title a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== EVA主题悬浮动效（机甲激活感） ========== */
.Header-title {
    transition: all 0.4s ease; /* 稍慢的过渡，贴合机甲启动感 */
    transform: translateY(0);
    filter: brightness(0.9);
}
/* 鼠标悬浮：初号机暴走效果（发光+上浮+放大） */
.Header-title:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(102, 0, 204, 0.6), 0 6px 15px rgba(0, 204, 153, 0.4);
    scale: 1.08; /* 稍大的放大比例，强化冲击感 */
    filter: brightness(1.1); /* 亮度提升，模拟机体激活 */
    border-color: rgba(0, 204, 153, 0.8); /* 边框变亮 */
}

/* ========== 移动端适配（EVA风格适配） ========== */
@media (max-width: 768px) {
    .Header-title {
        width: 120px; /* 移动端缩小 Logo */
        height: 40px;
        border-radius: 6px; /* 移动端更紧凑的圆角 */
        box-shadow: 0 0 10px rgba(102, 0, 204, 0.3); /* 移动端阴影弱化 */
    }
    .Header-title:hover {
        transform: translateY(-2px); /* 移动端悬浮动效稍弱 */
        scale: 1.05;
        box-shadow: 0 0 18px rgba(102, 0, 204, 0.5);
    }
}

/* ========== EVA主题导航栏整体适配 ========== */
/* 导航栏背景：NERV 黑红/初号机暗紫调 */
.Header-nav {
    background: linear-gradient(90deg, #050510 0%, #10051f 50%, #050510 100%);
    /* 导航栏底部发光线，模拟EVA机体纹路 */
    border-bottom: 1px solid rgba(102, 0, 204, 0.5);
}
/* 导航栏文字：默认浅灰，hover触发初号机绿/二号机红 */
.Header-nav .item-link {
    color: #e0e0e0 !important;
    transition: color 0.3s ease;
}
.Header-nav .item-link:hover {
    color: #00cc99 !important; /* 初号机绿，hover高亮 */
    text-shadow: 0 0 8px rgba(0, 204, 153, 0.6); /* 文字发光 */
}