为了避免对原主题造成破坏性影响，所做的美化几乎都是按照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.6 let themeColorRgb = hexToRgb(themeColorHex,op1); let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient') document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb) let op2 = 0.8 let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim(); colorTint92 += ', '+op2; document.documentElement.style.setProperty('--color-tint-92',colorTint92) let op3 = 0.65 let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim(); colorShade90 += ', ' + op3; document.documentElement.style.setProperty('--color-shade-90',colorShade90) let op4 = 0.8 let 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;
}
.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; }
便携性优化
点击文章摘要可以跳转文章详情
点击文章封面可以跳转文章详情
Intriguing overview! The structure seems solid, but I wonder about long-term statistical trends here. For deeper analysis, check out slo100 ক্লাব. It gives a good starting point!
Interesting read! The interplay of chance & skill in gaming is fascinating-especially with platforms like km88 download offering diverse options. Secure, licensed platforms are key for responsible play, as KM88 highlights with its KYC process. 👍
The emphasis on non-destructive, variable-based customization is a masterclass in modern UX architecture. It proves that deep personalization doesn’t require core file modification. This modular approach is critical for maintaining stability, whether designing a beautiful theme or ensuring a secure platform like jl pub legit remains robust.
The mastery of CSS variables and JavaScript for theme customization is superb. This principle of non-destructive, variable-based styling is crucial for modern UX, ensuring brand consistency across any digital product, from a blog to a high-security platform like jl1111 slot download. Truly advanced implementation!
That’s a solid point about value betting – often overlooked! Seamless payment options like GCash are key for PH players, and checking out the 588jl ph app casino for quick deposits seems smart. Good analysis overall!
It’s fascinating how probability shapes gaming! Seeing platforms like kwarta bingo slot download offer diverse bingo & slots with reported 94-97% RTP is interesting. Fair play & transparency are key, right? 🤔
That’s a fascinating point about longshot value – often overlooked! Seeing platforms like jilee prioritize localized payment options (GCash, PayMaya) is smart for accessibility. It’s all about creating a smooth experience for players, isn’t it? Really enhances engagement!
This transparency approach for Argon theme is brilliant! Similar to how gaming platforms like jl111 link balance visual depth with usability, your gradient overlay technique preserves theme integrity while creating modern depth. The CSS variable manipulation shows sophisticated understanding of WordPress theming architecture – impressive non-destructive modification strategy that maintains update compatibility.
Excellent approach to theme customization! The CSS variable manipulation technique for transparency is particularly elegant. I’ve seen similar implementations at openclaw forum where non-destructive styling preserves theme integrity while achieving visual impact.
Really enjoying this article! Thinking about trying some online games myself – heard good things about the variety on 333jili online casino. Seems easy to get started, even for beginners like me! 👍
请问argon如何使用除了自带的数学题还有其他的验证码吗（比如谷歌的reCAPCTHA、极验）
大佬，似乎你博客的ssl证书过期了（）
支持
学习了，感谢
查看图片
我这个代码框也太丑了，博主选择的那个？还有首页第一屏如何和下面的界面共用一张背景图
博主，你好，请问首页和文章页的背景图如何做到无缝相接的，首页箭头拉到文章页时，背景没变，但是我看后台有两个设置背景的地方
求助一下大佬，我在写博文时涉及很多数学公式，发现公式过长时，他总是会显示到文章边界之外，我在style.css 中添加了下面的代码还是不起作用，该怎么解决呢？
.MathJax_Display {
overflow-x: auto;
white-space: nowrap;
}
请问菜单栏上“教程”、“笔记”等文字前面相应的图标是如何实现的？
外观-菜单-导航标签
<i class=”fa fa-comments-o”> 留言板
以上是一个例子，‘’留言板‘’更改其他内容
“fa fa-comments-o”可在https://fontawesome.com/v4/icons/中寻找并更换图标
字体的url怎么找，nginx是怎么定位？
作者请问一下这个评论显示ip属地使用了哪个插件ovo
主题自带的，有个开关，无需额外下载
左侧个人信息栏的文章超链接怎么做的感谢
位置处于：控制台->外观->菜单
你需要做的：
大佬好，关于这个背景透明的，我用了你给的脚本，效果达到了，但是公告栏出了点问题，就是在夜间模式公告栏颜色没有从主题色变回深灰色，还是日间模式的主题色，而把脚本删了就不会这样了。
这有点不太好定位问题，检查一下代码copy的正确性？或者回忆一下是否此前对相关样式做过其他修改，导致“覆盖”？
你好，请问你的问题解决了没，我也出现了这种情况
博主，请问字体如何更改？先谢谢了
还有，请问这个显示浏览器的插件是什么？谢谢啦
这个在Argon主题选项中：评论->评论区->评论者 UA 显示，选择“平台+浏览器”
谢谢了！
字体样式已经修改已经加到文章中，之前遗漏了|´・ω・)ノ
老哥 这个用来展示代码的是什么？
主题自带的代码高亮
博主，你顶部导航栏上的子菜单卡片是怎么弄成透明的呀？就是比如指针停留在教程的时候，下面的子菜单卡片，我的是纯白色底的不是透明的
我没有刻意的改变过子菜单卡片的透明度，本文提到的“背景主题色半透明”是我唯一改变博客主题透明度的地方，所以多半是子菜单卡片继承了其中的透明度改动。😳
感谢佬的回答~已经解决啦，原来是我透明度拉太低了导致看起来不透明哈哈哈
你们背景图片都是哪里搞得？ 我的放进去不是自动拉伸就是糊的一批
我的背景图是平时保存的图片，担心拉伸的话，你可以直接按照屏幕比例裁剪图片
OK 还有一个问题 站主你写写代码得快的放大效果怎么做的？
没太明白你的意思，详细一点？
我这个是使用了Argon主题模版。
如果你想自己实现一个，原理其实非常简单（前提是有一定的前端代码基础）：
大佬，你博客首页进入能完全显示背景，下滑才到博客内容，这个怎么搞的。
全屏，banel
内容有点多，后面慢慢补
第二步，在 Argon主题选项->脚本 的 页尾脚本 添加下面的脚本：不知道在哪里 麻烦告知一下
已经解决
解决了就好👌，最近没注意消息(:з」∠)