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
CSS, Themes and Customization

Creating a child theme

That looks pretty good for a start. Next, I’m going to create a child theme before making any other changes. This is rather technical and not required but it’s recommended for various reasons as explained in the WordPress codex entry.

Having created the appropriate folder and files, it’s a simple matter to activate the new theme. There is no image associated with it yet so I’ll go ahead and take a screenshot and place it in the child folder per this page.

Refreshing the page and voila, the new theme is active and working fine. Time to test the CSS editor just for grins. Changing the background color is trivial and working fine (although using the example from W3Schools is quite ugly it gets the point across):

uglycss

Standard
Plugins, Themes and Customization

Twenty Sixteen test drive

Time to check out “Twenty Sixteen” and see if I can get past that link on the homepage logo with reasonable effort. Easy enough: search for the theme, install it, activate it:

2016

Sadly, there is no easy editor for custom CSS or JavaScript. Playing with some plugins and most of them are just come-ons for a premium version but Potent Plugins has both a CSS and JS editor available free and completely functional. While there is a large banner at the bottom of the window, these look like they will do the trick:

CSSEditor

I’m happy enough with the status of the site appearance for now. Since I don’t really have any specific design criteria right now I can play with the page layout to my heart’s content. How long it will take to get the link functionality the way I want it remains to be seen and I really hope I don’t have to dig into the PHP to make it happen but that’s fodder for the next post.

Standard