我如何主题我的Wordpress网站的剩余epsilon?

时间:2016-01-18 15:57:34

标签: css wordpress wordpress-theming

我正在使用Wordpress网站,目前位于http://dev.cjshayward.com,其子主题为二十九岁。目前我唯一的定制是style.css,虽然我想要编辑的道路略有下降,例如404页面包含https://cjshayward.com/missing.html的有趣部分。我现在最感兴趣的两个变化是在这个术语的最佳意义上是可用和无聊的:未加访问的页面的下划线蓝色链接和访问的带下划线的紫色,没有小于默认字体大小的文本。

我的更改已根据需要影响了大多数文字,但左上角的徽标链接“CJS Hayward”是黑色的,除非您将鼠标悬停在其上方,并且某些内部链接是不同的蓝色阴影(NB与其复制的位置不同,它们是默认颜色)。我已经尝试从Chrome的调试器中检查有问题的元素,并且Chrome将我的覆盖显示为活动状态(稍微有点帮助!重要的)相反的颜色和sizings为非活动状态,但这些保留看起来像普通的旧的未编辑的二十几岁。

我的孩子主题style.css是:

/*
 Theme Name:   Twenty Sixteen UX Tweaks Child
 Theme URI:    https://cjshayward.com/twenty-sixteen-ux-tweaks-child/
 Description:  Twenty Sixteen UX Tweaks Child Theme
 Author:       CJS Hayward
 Author URI:   https://cjshayward.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      MIT
 License URI:  https://opensource.org/licenses/MIT
 Tags:         ux, usability, light, dark, two-columns, right-sidebar,          responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-ux-tweaks-child
*/
a
    {
    text-decoration: underline;
    }
a:alink, a:active, .site-branding .site-title a:active
    {
    color: #800000;
    }
a:link, .site-branding .site-title a:link
    {
    color: #0000ee !important;
    } 
a:vlink, a:visited, .site-branding .site-title a:link
    {
    color: #551a8b !important;
    }    
body, button, .entry-footer, input, select, .site-title, textarea, .widget,
.widget-title, h2.widget, h2.widget-title
    {    
    font-family: Verdana, Arial, sans !important;
    font-size: 20px !important;
    }

我如何获得顶级“CJS Hayward”链接以及右栏中的小部件h2,分别按照我在child style.css中定义的规则进行着色和调整大小?

2 个答案:

答案 0 :(得分:0)

如果我理解正确,您希望所有链接(包括.site-branding)都是蓝色,并且所有访问都是红色的。例如。

如果是这样,您的css规则必须是:

body, button, .entry-footer, input, select, .site-title, textarea, .widget, .widget-title, h2.widget, h2.widget-title
{    
    font-family: Verdana, Arial, sans !important;
    font-size: 20px !important;
}
a, a:link {
    text-decoration: underline;
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    //color for cover;
}
a:active {
    color: #800000
}

根据w3schools

,必须按此顺序定义链接状态

如果您想以不同方式设置徽标样式,则可以使用.site-branding .site-title a

答案 1 :(得分:0)

如果要设置徽标和小部件标题的样式,请在child的style.css

中添加
.site-branding .site-title a,
.widget .widget-title {
   background: #0000ee;
}