CARDS主题 & 导航栏样式修改
每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式。
首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入css样式,调试出我们所想得到的结果并记住所对应的样式选择器。
其次,我们需要在cards主题中找到拥有这些样式选择器的模块,修改代码,写入我们刚刚调试过的代码,最后执行清理、部署、运行即可。
主题main_color
颜色配置,自定义喜欢的色调
style:
# 颜色配置
color:
main_color: '#3c4f65'
导航栏顶部固定以及子栏目间距调整
- 在浏览器开发者工具模式预先调试出理想的样式,找出对应的选择器
- 在
themes\cards\source\css\style\_functions\header.styl
文档中,找到对应的选择器,修改样式
.header /* 顶部固定 */
display flex
justify-content space-between
align-items center
height 54px
padding 0 calc(var(--space)/2)
top 0
z-index 10
position sticky
background-color var(--bg-content-color)
.header__right /* 子栏目间距调整 */
.navbar__menus
padding 0 0 0 15px
.navbar-menu
font-size 16px
padding 16px 12px 16px 12px
border-radius 5px
#btn-search
#btn-toggle-dark
padding 21px 12px 16px 12px
写在最后
在最起初建站时,对HEXO还是足够陌生的!对于这样的系统文档的结构总是摸不到头脑。我其实一开始就想更改某些样式,但是无从下手,郁闷极了!
在这种程度的状况下,我从配置文档说明开始研究,能搞懂多少是多少,在三番五次的折腾中,局势就慢慢开朗了!当然折腾从未结束,更多的问题还要去琢磨。
CARDS主题 & 导航栏样式修改的更多相关文章
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- React-Native 之 GD (二)自定义共用导航栏样式
1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...
- (七十)Xcode5及以上对于状态栏和导航栏样式的设定方法
[状态栏] 在Xcode5以前,状态栏是通过UIApplication单例来管理的,而在此后,默认情况下状态栏通过控制器来管理,而且如果控制器有NavigationController,那么设置状态栏 ...
- iOS设置导航栏样式(UINavigationController)
//设置导航栏baritem和返回baiitem样式 UIBarButtonItem *barItem = [UIBarButtonItem appearance]; //去掉返回按钮上的字 [bar ...
- js动态控制导航栏样式
导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...
- [Xcode 实际操作]三、视图控制器-(6)UINavigationController导航栏样式
目录:[Swift]Xcode实际操作 本文将演示对导航栏进行样式设置,以及更改导航顶部的提示区. 选择编辑第一个视图控制器文件. import UIKit class FirstSubViewCon ...
随机推荐
- Spring Cloud 学习笔记 (一)-- Eureka 服务器
开局一张图,截取了本人学习资料中的一张图,很好地展示了Eureka的架构. Eureka服务器 管理服务的作用.细分为服务注册,服务发现. 所有的客户端在Eureka服务器上注册服务,再从Eureka ...
- 云计算之路-出海记:蹭一张 aws 船票
出海记开篇之后,在 aws 上搭建博客园海外站的出海计划今天开始迈出第一步 -- 注册一个 aws 海外区域账号. aws 现在针对新注册用户提供12个月免费套餐(正在园子里推广并提供了专属注册通道) ...
- NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的
NB-IoT技术自出现以来就以其强大的覆盖范围和通讯距离长而受到广泛的欢迎,发展到现在已经成为万物互联网络中的一个重要分支.那么NB-IoT覆盖范围到底有多大,是怎么来衡量其覆盖能力? 强大的覆盖范围 ...
- [Luogu P4147] 玉蟾宫 (网格DP)
题面 传送门:https://www.luogu.org/problemnew/show/P4147 Solution 裸的求极大子矩阵 感谢wzj dalao的教学 首先,有一个很显然但很重要的结论 ...
- 【CF1443E】Long Permutation 题解(排列生成模板)
原题链接 题意简介 给定一个长度为 n 的排列 {1,2,3,...,n} .现有两种操作: 对某个区间 [l,r] 求和 将排列往后推 x 次 (按字典序) 其中 \(n,q \leq 2\time ...
- GANSS 87C键盘在Linux无法正常使用的解决办法
前几天在狗东入手可以一把GANSS的87C键盘,满心欢喜拆开来用却发现在开发电脑(Deepin和ubuntu)上F1-F12都不能正常使用,这对一个搞web开发的人来说,无疑是要了我的老命,无奈找各种 ...
- 力扣 - 445. 两数相加 II
目录 题目 思路 代码实现 题目 给你两个 非空 链表来代表两个非负整数.数字最高位位于链表开始位置.它们的每个节点只存储一位数字.将这两数相加会返回一个新的链表. 你可以假设除了数字 0 之外,这两 ...
- ci框架根据配置自动生成controller控制器和model控制器(改版本)
CI修改如下: if($modle_file=config_item('modle_file')) { if ($modle_file === TRUE) { $modle_file=config_i ...
- 等效介质理论模型---利用S参数反演法提取超材料结构的等效参数
等效介质理论模型---利用S参数反演法提取超材料结构的等效参数 S参数反演法,即利用等效模型的传输矩阵和S参数求解超材料结构的等效折射率n和等效阻抗Z的过程.本文对等效介质理论模型进行了详细介绍,并提 ...
- C# type对象
新建控制台应用程序 新建一个类 class MyClass { private int id; private int age; public int numb; public string Name ...