Luxeritas子主题(style.css)定制

2019年5月11日

Luxeritas是国内免费且功能强大的Wordpress主题。在此博客中,我将介绍子主题的style.css的定制内容。

如何编辑Luxeritas儿童主题

有两种方法可以编辑style.css

1.直接在“样式表:style.css”中输入

样式表:直接输入style.css

管理屏幕:Luxeritas→编辑子主题→选择“ style.css”标签
在“ / *之后输入代码,请根据您的喜好写出子主题的样式。* /”。

2。输入“其他CSS”以进行外观自定义

在“其他CSS”中输入以进行外观定制

管理屏幕:Luxeritas→自定义(外观)→其他CSS
我们建议这样做,因为您可以在输入代码的同时看到反映代码的结果。

定制的style.css

粗体网站标题

对于那些认为标准字符有点薄并且印象很薄的人。

/ *网站标题* / #sitename {font-weight:粗体;}

在带状菜单下添加阴影,使其看起来像材质

这上面有阴影...

Luxeritas带状菜单:无阴影

就是这个。这是一个细微的差异,但是网站的气氛出乎意料地改变了。

Luxeritas带状菜单:带阴影

/ *全局导航下的阴影* / #nav {box-shadow:0 2px 10px rgba(0,0,0,.2)}

无法通过外观自定义设置的悬停颜色

文章标题以及上一篇和下一篇文章的标准悬停颜色是红色。我不认为可以直接从外观定制中更改任何项目。

颜色:您可以通过将其放入下面您喜欢的颜色的代码中来进行更改。顺便说一句,“#00b22f”是浅绿色。此外,文章标题为粗体,以便于阅读。

 / *文章标题* / .entry-title a:悬停{color:#00b22f;} .entry-title {font-weight:粗体;} / *上一篇和下一篇文章* / #pnavi a:悬停{color:#00b22f }

材料设计博客卡

您将拥有这样的博客卡。移动光标使其蓬松。

博客卡

/ *博客卡设计* / a.blogcard-href {填充:0px;最小高度:102px;框阴影:0 2px 5px rgba(0,0,0,.13);过渡:.3s;} a。 blogcard-href:悬停{box-shadow:0 4px 20px rgba(0,0,0,0.25); transform:translateY(-5px);} .blogcard-img {边距:0px 10px 0 0; border:无} p .blog-card-title {边距:5px 5px 5px 5px;} p.blog-card-desc {显示:无;} p.blogcard-link {清除:无;边距:5px 0 5px 5px;} @media only屏幕和(最大宽度:430px){p.blogcard-link {显示:无;}}

我提到了下一页。
自定义您的Luxeritas博客卡,使其像SANGO一样浮动

更改页面颜色

与文章标题一样,它保持红色,无法通过外观自定义进行更改。 灰色显示为“#999999”。

.pagination> .active> span,.pagination> li> a:悬停{background:none; background-color:#999999;}

当您更改它时,它看起来像这样↓

标签云设计变更

/ *标签云设计更改* / .tagcloud a {border-radius:3px; / *四角* / padding-bottom:1px; padding-left:6px; padding-right:3px; padding-top:1px}

我将标签的角弄圆了以缩小线宽。

标签设计

删除文章标题下的边距

当我在文章标题下放置google adsense广告时,我担心广告前后的行距似乎很大。 除去边距后,我能够尽可能紧凑地安装它。

/ *元信息(已更新),删除下边距* / .meta,.post .meta {填充:5px 0; margin-bottom:0px;} / *删除文章上方和下方的边距* / .post-title-upper, {title-bottom:1px;}下的post-title-

就是这样。