CSS, Themes and Customization

Rocking the Ryu Child Theme

By writing some basic CSS rules to adjust the fonts and hide elements I don’t want to display I now have a fairly attractive site. Going back to where Twenty Sixteen let me down trying to tweak it I still want to suppress the anchor on the site title. The simplest way would be to use the pointer-events rule in CSS although ultimately to get the complete functionality I want I’m probably going to end up modifying some PHP.

Using the excellent CSS-Tricks site as a reference, we see we can start with putting an ID on the <body> tag with clarification in a more recent post. If you follow the links you’ll notice that the home page still links to itself so I’m not sure why he’s not suppressing it since he states that it’s good design practice but I’m going to play with it anyway. Since we already have .site-title identified as the culprit, it should be a simple matter to add that rule.

And that is working like a charm. This also suppresses the link on the pages but since I have a Home menu item that is not a big deal. Checking browser compatibility lets me know that my targeted platforms will all be supported though IE < 11 is shaky.

Standard
CSS, Themes and Customization

Boo Hiss Twenty Sixteen

Custom CSS is not working in Twenty Sixteen; how disappointing. Still, it was a chance to review what others have said / are saying about the default theme so it was a learning experience. Back to the theme marketplace then and more shopping.

I’m going to play with Ryu for a while; simple, elegant and appears to be highly customizable. It’s built on something called “Underscores” (or “_s” for the geeks out there) which looks fascinating in its own right.

ryu01

I’m liking it enough that I’ve gone ahead and made a child theme for it. The custom CSS plugin is working just fine. Using the browser inspection tool, we see that the post titles are styled by rules in class “.entry-title”.

The parent theme rules are:

.entry-title {
font: italic 700 68px/1 "Playfair Display", serif;
margin: 0;
max-width: 696px;
}
.entry-title a:hover {
color: #333;
}

Let’s go ahead and try styling the post titles to something a little more attractive using the anchor tag pseudo-classes link, visited, hover and active (in that exact order). The new code is:


.entry-title {
font-family:"Times New Roman", Times, serif;
font-style: normal;
font-size: 40px;
}

.entry-title a:link {
color:#000;
}

.entry-title a:visited {
color:#0f0f0f;
}

.entry-title a:hover {
color:#aaa;
}
.entry-title a:active {
color: #ff6666;
}

and a screenshot:

csstweaks

and that should just about do it for today.

Standard
CSS

Basic CSS tweaks

I’m liking the 2016 theme and figure I might as well do a little fine tuning on the layout with CSS even if I might change to a different theme later. Actually, I just want to play with the header and menu, centering them and changing the fonts. This is what we have at the moment:

Header01

Once again using the excellent W3Schools site, we see that the “text-align” property is what we will be using but where to point it? Of course, you could view the source and figure it out but there is a much easier and more efficient way to determine which style rules are being invoked. The three major browsers all have an “inspect (element)” option available by right-clicking anything on the page:

Header02

While I’m not a huge Chrome fan it does have a pretty serious analysis tool built right in without having to install Firebug like you would in Firefox to get the same functionality. Using this we can easily see that the appropriate classes are “site-title” and “site-description” in an enclosing div with class “site-branding”:

Header03

Sadly, the custom CSS plugin doesn’t seem to be functioning at all and changes to the child style sheet don’t seem to take either.

Standard