文章转载自：
– 文章：Argon主题美化
– 作者：北冥红烧鱼
– 链接：https://blog.hongshaoyv.com/argon-beautification/版权归原作者所有
为了避免对原主题造成破坏性影响，所做的美化几乎都是按照wordpress和Argon主题提供的方案进行。
只有极个别“改动范围小、直接改源文件会方便很多很多、几乎不可能破坏原主题”的样式美化才改动了主题源文件
背景主题色半透明
在不改变主题色的前提下，将卡片等事物的背景透明化（可以自己更改透明度）
第一步，在 自定义->额外css 添加
leftbar_announcement {background: var(--themecolor-gradient) !important;}footer{background: var(--themecolor-gradient) !important}第二步，在 Argon主题选项->脚本 的 页尾脚本添加下面的脚本：
<script> function hexToRgb(hex,op){let str = hex.slice(1);let arr;if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];return `rgb(${arr.join(', ')}, ${op})`;}; let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();let op1 = 0.6let themeColorRgb = hexToRgb(themeColorHex,op1);let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient') document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)let op2 = 0.8let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();colorTint92 += ', '+op2;document.documentElement.style.setProperty('--color-tint-92',colorTint92) let op3 = 0.65let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();colorShade90 += ', ' + op3;document.documentElement.style.setProperty('--color-shade-90',colorShade90) let op4 = 0.8let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();colorShade86 += ', ' + op4;document.documentElement.style.setProperty('--color-shade-86',colorShade86) </script>如何修改透明度（透明度变量说明）：
- op1——“白天”状态主题色透明度op2——“白天”状态卡片颜色透明度op3——“夜间”状态卡片颜色透明度op4——“夜间”状态主题色透明度
动手改一下4个op变量的数值试一试，你会明白他们的含义的！
字体
网站字体样式
字体来源：可以到 100font.com、字体天下 进行下载
转换字体文件：前往 TTF to WOFF2 将字体文件转换问woff2格式
存放文件：转换后的字体文件，可以可以选则存放到你自己的网站文件目录下面，或者某个CDN当中
修改css：最后只需要在网站的 自定义->额外css 中添加字体样式即可，如下所示
/*设置网站字体*/@font-face{ font-family:btfFont; src: url(https://blog.hongshaoyv.com/font/jyhphy-2.woff2) format('woff2') } body{ font-family:"btfFont" !important }
上面的css代码中，我在url中写的是我自己存放字体文件的位置，我将字体文件存放在服务器，并利用nginx定位到它。
我在css中将此字体命名为“btFont”，并将它应用在“body”范围内。
网站标题字体彩色霓虹效果
在 自定义->额外css 中添加：
@keyframes ColdLight {0%{background-position: 0%;}100%{background-position: 200%;}}.banner-title{position: absolute;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size:200%;animation: ColdLight 3s linear infinite;color:transparent !important;-webkit-background-clip: text;font-weight: 900; /* 加粗核心属性（400正常，700加粗，900最粗） 可选：进一步增强加粗效果 */text-shadow: 0 0 2px rgba(255,255,255,0.5); /* 轻微文字阴影增强辨识度 */} .banner-title::before {content: '';position: absolute;top: 0;left: 50%;bottom: 0;right: 0;transform:translatex(-50%);max-width:500px;z-index: -100;background:white;filter: blur(30px);opacity: 0.5;}.banner-title .banner-title-inner{position:relative;background:inherit;}.banner-title .banner-subtitle{position:relative;background:inherit;}顶部导航栏
左上角图片大小
.navbar-brand img {height: 60px;}自己设置一个喜欢的值即可
左上角图片和右侧文字的间距
.mr-lg-5, .mx-lg-5 {margin-right: 1rem !important;}自己修改成合适的间距即可
菜单项间距调整
如果你的菜单项不太多（5、6个左右），那么基本不需要额外设置此样式；反之，你可能会因为菜单项过多而造成拥挤，建议手动设置间距。
在 自定义->额外css 中添加：
.navbar-expand-lg .navbar-nav .nav-link {padding-right: 0.5rem;padding-left: 0.5rem;}自己调到合适的值即可
banner下方小箭头滚动效果
这是目前唯一一个改动了主题源文件的样式美化
打开 外观->主题文件编辑器
在右侧 主题文件 处找到 主题页眉（header.php文件）
在第 439 行找到：
<div class="cover-scroll-down">将这个div代码块中的内容（也就是原本的<i>标签）用下面的代码替换：
<i class="fa fa-angle-down" aria-hidden="true" id="pointer1"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer2"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer3"></i>接着，在 自定义->额外css 添加如下代码：
@keyframes up-down-move {0% {opacity:0;transform:translate(-50%,-150px); }50% {opacity:1;transform:translate(-50%,-130px); }100% {opacity:0;transform:translate(-50%,-110px); }} .cover-scroll-down .fa-angle-down{font-size: 3rem;text-shadow: 0px 0px 8px #dc1111;position:absolute;transform: translate(-50%,-80px);opacity:0;} .cover-scroll-down #pointer1{animation: up-down-move 3s linear infinite; } .cover-scroll-down #pointer2{animation: up-down-move 3s 1s linear infinite;} .cover-scroll-down #pointer3{animation: up-down-move 3s 2s linear infinite;}