实践笔记:天湾ink主题自定义CSS修改(1)

In 泊人笔记

今天开始记录一下对天湾这边也就是将来的天湾对面所用的ink主题的自定义CSS修改过程,基本上就是一边系统性地自学CSS一边实战应用在自己的博客上,遇到实际问题就去搜索相应的解法,这样等于是系统性学习和针对性学习同时并进,应该是非常有效的。

首先遇到的问题就是旧天湾对面已经实现的网页分享到社交媒体APP(比如微信)时自动抓取博文缩略图这个功能在新天湾这边没出来。折腾了半天网页分享抓取缩略图都失败,完全搞不懂为什么,甚至彻底卸载删除wordpress重装一个新的也没用。同一个主题旧版装在老博客上可以抓,新版装新博客就不能抓,而作者的新版demo又可以抓,真是百思不得其解🤣

最后还是学网上教的装了一个yoast seo插件一下子就解决了,太简单了,哎早知如此还折腾啥。

后来给太联测试站也装了yoast,从来都抓不出来的这个测试站也能抓了,真是相见恨晚啊!有时也不能太不信邪,只想通过修改设置或CSS而不想装插件。该装的插件还是得装!


2023.1.24 更新:

现在采用的找到相关元素的方法是搜style.css,里面挑出可能的元素和类贴到addtional css版里修改,还挺成功的。

目前为止调整了这些:

  • .entry-title
  • .entry-subtitle
  • .entry-title
  • .site-title

以上类别分别对应文章标题、副标题、站点大标题。

再调整了body的line-height,全局a的color、text-decoration和border,以及a:hover的font-weight,这些是为调整全局文字行距、链接颜色和悬停变色变形。暂时没改悬停变色因为全都变了。

接下来重点调整侧栏。包括菜单链接颜色、悬停变色+变形,修改的这些类: .widget_archive,.widget_categories,.widget_pages,.widget_meta,.widget_recent_comments,.widget_nav_menu, .main-navigation里的li的padding-top,padding-bottom和border-bottom这几个值。修改.main-navigation a:hover的color和padding-left,最后的结果是菜单链接为黑色,悬停深粉并右移。

再加上以下这段,修改这些类的链接颜色,不写的话侧栏所有链接都变深粉了:

.widget_archive a,
.widget_categories a,
.widget_pages a,
.widget_meta a,
.widget_recent_comments a,
.widget_nav_menu a,
.main-navigation a {
	color: #222;
}

但日历部分的链接仍是深粉,也蛮好看的暂时不改了。

把文章通用页脚两条横线去掉了一条,并减少了高度:

.single .site-footer {
	margin-top: 20px;
	margin-top: 1.25rem;
	border-top: 0px solid #ccc;
}

页面修改:页脚同post一样,并且改变了高度和位置,页脚改为深底浅字,默认文字为浅色;页头的站点标题和汉堡包菜单改为浅灰;页面背景要每页单独设成深色,会连带页头一起的,只有页脚颜色是单独设。修改的是以下这些类,要和.page搭配写:.page .site-header、.page .site-title、.page .site-footer,意思就是只有page的这三个类才生效。

把评论部分的两个按钮的background,都从默认的深粉色改成了中灰色,submit按钮加长成全宽:.comment-form-actions button、.comment-form .submit。

遗留问题:page整个调成深色系,倒是蛮好看,不过a:hover变色问题还没解决,现在深底浅字,结果hover后变黑色,链接就看不大出了,要想办法在本页内单独设出一个悬停变色。
或者就想办法把page上的文字链接a:hover改成#ff91bd后,要让封面与索引页标题等不能变色,现在它们一起变色变粗了,这几个要不变才好。目前索引页上的分类、时间、作者的悬停的确变色变粗了不过不太明显。

现在暂时解决了page悬停变色问题,在page部分加了一句让它变白:.page a:hover{color: #ffffff;}。但随之侧栏菜单的悬停都变成了白色,后来想出把main-navigation这一大堆都移到page部分的后面,于是侧栏保持了全局一致,单单page的悬浮变成白色。这只是权益之计,我希望是可以用第二种解决办法更好。就是要找出1.站点副标题的元素,2.单帖封面与index、archive页的标题、meta等悬浮的元素。

顺序应该是:

  1. 全局链接深粉、悬停变粗变浅粉#ff91bd,或者更深粉#ff0569
  2. page页头链接黑,站点副标黑,悬浮不变(这样的话可以设回白色页面了)
  3. 主页、存档页、单帖页的标题、meta链接为白,悬浮不变
  4. 侧栏任何元素链接黑、悬停深粉,菜单悬停移位
  5. page回到白色的话,页脚就不用改颜色了,只需要去掉横线就行,放哪里都可以

晚上找到了站点副标题的元素: .site-description。把它加在page那一片里,副标题颜色就变了。所以就把page默认的都改回了白底黑字,页头3个元素: .site-header,.site-description,.site-title都变黑。

页头标题+汉堡包菜单和副标题各设了深灰和稍浅灰,悬停变黑,不影响页面文字、侧栏菜单和footer已经设好的链接色和悬停变色变形。另外也把页面文字的颜色去掉了,回归默认值。

又找到了主页存档页单帖页的标题、副标题、meta元素:.entry-meta .entry-categores .entry-title .entry-subtitle。分别加了链接颜色为白色、不变粗,这时发现原来之前看到的meta变色并不是变色,而是变透明,原始css里给这个hover设了一个0.6的透明度,我就沿用了,并且给标题也加了0.8的透明度 .entry-title a:hover {opacity: 0.8;}

.entry-subtitle 可以单独设颜色变化,但我没有设,它就自动默认和title一样变透明度了,没有找到调整副标题位置的方法,觉得它有点低。

现在几个页面、单帖的链接悬停都各自设好,没有问题了。就是archive页,搜不到帖子时它版面不对。不过等到博文导入后应该就没问题了。还有就是菜单的标题字没有自动变成大写,也要找找的。还有tag的字体不大对。

加了侧栏菜单下面的小组件,比以前难弄很多,加分割线也不好看,现在除了菜单链接色对之外别的侧栏元素链接都是深粉,看上去一片粉,吓人,明天还得改。


2023.1.25 更新:

顺利找到侧栏全局元素.site-nav(不是.widgetd_area,这个也有一定用处但并不针对整个浮动侧栏),设了链接悬停色、背景色,还能设透明度,但没啥意思就没设,这里设了之后发现前面设的一大堆widget多余了,就去掉了重复的,只留了需要的,最后整理一下成了这样:

.site-nav, 
.main-navigation li {
	padding-top: 0px;
	padding-bottom: 5px;
	border-bottom: none;
}
.site-nav a {
	color: #000
}
.site-nav a:hover {
	color: #ff2d81;
	padding-left: 0px;
	font-weight: inherit;
}
.main-navigation a:hover {
	color: #ff2d81;
	padding-left: 10px;
	font-weight: normal;
}
.site-nav form {
	padding: 0px;
	background: transparent;
}
.site-nav {
	background: #f6f6f6;
	opacity: 1
}

还找到了分割线separator元素,也就是hr标签,改了默认的两个线样式,把当中那个小签图标隐藏,就没有背景色对不上的问题了,如下:

hr:not(.stag-divider):not(.is-style-dots)::before {
	background: transparent;
	display: none;
}

但这个小签图标还挺有特色的,所以我想保留,想新设一个分割线样式为纯横线,这样正文里可以用带小签的,侧栏用纯横线,正文里也可以用纯横线,多一个选择。目前还没找到怎么添加分割线新样式。

现在新博客就很像样了,再导入十几个贴看效果,只有一个贴的时候有些效果还看不出来。

还在自定义css框里归类好的几大块都加了/**/注释,以后再找会很容易。

只是昨晚发现一个奇葩问题百思不得其解,搜索栏里搜别的关键词如果搜不到作品会进入设好的404页这个没问题,但一旦搜索一个已知的tag而没有帖子(这次是太空堡垒)时,它不进404,而是进了一个很奇葩的水弓页面,edit会发现就是我的关于作者页,但却有不一样,是那种奇葩灰背景没内容的页面,从没设过这样一个页面,感觉是系统哪个php自动生成的。

不过问题应该不大,等博客导入后,不会有发生这种情况的机会的,只要是tag就一定会搜出结果来,所以暂时就不管它了。


2023.1.27 更新:

过完国庆节继续折腾CSS。今天搞定了分割线hr,这里关系有点复杂,要理理清楚。首先先搞定了只有侧栏分割线没小旗子,正文分割线仍保留小旗子的问题。很简单,只要在上次的hr:这条前面加上.site-nav就行了:

.site-nav hr:not(.stag-divider):not(.is-style-dots)::before {
	background: transparent;
	display: none;
}

也是我举一反三自己琢磨出来的,一试就成功,不禁要赞一下自己🤣

还想在正文里增加新的长条细横线分割线样式,但试了多次也不行。后来发现原来这里有3+5种不同样式,3种在菜单栏第二行添加,应该是ink设计过的,除了dots之外另两个都在中间有小旗子,而且线条都短,5种则是菜单栏的第一行添加,应该是WP自带的,其中strong, double, dashed, dotted都全长,而plain因为和ink设计过的plain重名,所以它也中间有小旗子,也不是全长。

试了好几种办法再增加一种样式都没成功,看来只能在这8种里修改,就改了5种里的double和plain,把double改成细线,plain改成没有小旗子,这样就有了一长一短纯细线两种样式,并把double颜色也改成了淡灰色:

.stag-divider--double { 
	height: 0px;
	border: 1px solid #ccc; } 
.stag-divider::before { 
	display: none; 
}

第二条的这句 :before,就是指5种里的plain上的小旗子元素,如果这里把display none去掉,改成 color: #xxxx,就能把小旗子改颜色,而ink自己的两种不受影响。所以这样就相当于有了8种样式了,足够了。

然后在侧栏去掉了之前用的hr,侧栏如果以block方式插入hr,就只能插入3种,所以我以custom html方式插入hr,填了5种的hr代码,选了浅灰横线,效果就很好了。

这样先前用的那段 .site-nav hr 也就多余了,就去掉了。


2023.1.31 更新:

搞定了一个很小的修改:侧栏菜单的标题改成自动全大写。在同学提醒下用浏览器的inspector查到此标题元素叫widgettitle,本来想去CSS里搜一下相关内容,但先试了试直接在自定义CSS里写上这一小句:.widgettitle {text-transform: uppercase;},一下子就得到想要的结果了。举一反三能力很强啊!再夸一下自己🤣

Submit a comment

Your email address will not be published. Required fields are marked *