How can I theme the remaining epsilon of my WordPress site?

3 Views

I am working on a WordPress site, presently at http://dev.cjshayward.com, with a child theme of twentysixteen. For now the only customization I have is the style.css, although slightly down the road I want to edit e.g. the 404 page to include the interesting parts of https://cjshayward.com/missing.html. The two changes I am most interested in now are meant to be usable and boring in the best sense of the term: underlined blue links for unvisited pages and underlined purple for visited, and no text smaller than the default font size.

My changes have affected most text as desired, but the logo link “CJS Hayward” at the top left is black unless you hover over it, and some internal links are a different shade of blue (N.B. different from where they were copied, where they are the default color). I’ve tried inspecting the elements in question from Chrome’s debugger, and Chrome shows my overrides as active and (with a little help from !important) contrary colorings and sizings as inactive, but those holdouts look like plain old untweaked twentysixteen.

Read More

My child theme style.css is: 

/*
 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;
    }

How can I get the top “CJS Hayward” link, and the widget h2’s in the right column, to be respectively colored and sized by rules I define in the child style.css?

Post Views: 3

Related posts

2 comments

  1. If I understand you correctly, you want all your links (include .site-branding) to be blue, and all visited to be red for example.

    If so, your css rules must be:

    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
}

    The link states must be defined in this order, according w3schools

    If you want to style your logo differently, then you can use .site-branding .site-title a

  2. If you want to style the logo and the widget title, add this in child’s style.css

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

Comments are closed.