Themes and Customization

Back in the saddle

Well, it hasn’t actually been since January because I was tweaking the timestamps but it has been quite a while. Going to build out the other pages and start soliciting web design business again. The Google Ad Rater gig is intermittent at best plus I need a change of pace or at least task.

Starting with the HTML5 page and it’s going OK except the sub-menus are really ugly:

UglyMenu

Using Firebug we see that the unordered list rule is, not surprisingly, accessed by class “sub-menu”. Since this is a child theme we can try tweaking the rule with CSS but menus can be tricky, especially with a WordPress theme with possible consequences beyond just adjusting the layout. Still, I can’t let the menu be displayed like this so will need to make it acceptable.

Standard
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