Accomplishment this week

Menu

I started this week’s work with the small-screen menu. I wanted it to have similar style of the large-screen menu. The basic color scheme is also grey, red and white.

Problem#1: I used superfish for the menu and set the breakpoint to be 600px. The superfish shouldn’t work when the screen width is smaller than 600px but actually it does.

jQuery(document).ready(function($){
 var breakpoint = 600;
 var sf = $('ul.nav-menu');
 ...
  else if($(document).width() < breakpoint) { //<--shouldn't work when window size < 600px
 sf.superfish('destroy');  
 }
});

Solution: Then I realize it’s because of some mistake I made when I modified the layout file. I didn’t notice that in the widget Nav Menu there are 10 levels of menu items and they expand out of window when the window size is small. So the actual window size is not as small as I thought.

//in sidebar-content.css
.site-content .widget-area {
 width: 250px;
 float: left;
 padding: 1rem;
 margin: auto;
 overflow:hidden; // <-- add this to keep widgets inside widget area only
}

However I don’t think this is a proper solution because the result is really unpleasant. The content outside widget area is simply cut and there is no way for users to see those abandoned content.

Problem#2(not solved yet!!): The level 3 menu items act weird. They are in the list originally but expand outside window when the mouse if over level 2 or level 3.

Search Box

Problem#1: When the input text field is focused, the outline color of input field changes to blue color which is not something I want (the menu button in responsive menu design also has this problem).

Solution: One line code will solve this:

outline: 0!important;  //add this to button:focus and input[type="***"]:focus

I found some useful advice about this from Stack Overflow which says

Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.

When I remove the blue outline for input field, it doesn’t have any indication for focus so I added some shadow to indicate it.

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
 color: #111;
 outline: 0!important;
 box-shadow:2px 2px 5px #000;
}

Problem#2: For the responsive design of search box, the search icon is falls to the next line of Menu button even when the line height is sufficient.

Solution:

.main-navigation .menu-toggle {
 float:left;
 }
 .main-navigation.toggled .menu-toggle {
 float: none;
 }

Widgets

Problem#1: When I added float: left; to the footer widgets, the site-info appeared on the top of footer widgets.

.footer-widgets .widget {
 float: left;                //<--this line causes problem
 width: 350px;
 margin: 0 2rem 4rem 2rem;
}

Solution: Then I realized the floating element doesn’t count for the space. Because all widgets are floating, the parent <div class=”footer-widget”> has 0px for height. Therefore, site-info comes up. After I added clear: both; to site-info class, the site-info appeared in the right place, the bottom of website.

.site-info { 
background-color: #000; 
background-color: hsl(0,0,0%); 
text-align: center; 
clear: both; //<-- this line solves problem 
}

Problem#2: Definition of widthcol in Masonry? At first I thought it means the minimum width of column of the floating elements, but when I set the value to be 300px it doesn’t work. It works when I set it to 30px.

Single Post and Index Page

When formatting single page template, I found that the font I chose for meta and navigation is very similar to the font used in body part. So I changed PT Serif to Sans Serif and used that instead.

I encountered with great trouble when I was doing the Index Page. I was planning to do something but failed. For posts with feature images, I wanted to show feature image and put the title, meta and continue-reading icon above the image (like the screenshot at right from a theme demo). Posts without feature image would be displayed normally with title, meta, excerpt and so on. I tried different ways but didn’t find a way to achieve this.

Outcome (so far)

Through these two weeks of theme developing, I am more familiar with the theme development progress and hierarchy of the template files. There were always unexpected problems popping up and I’ve learnt a lot when I tried to solve those problems.

Underscores provides a very good start point. All contents are already there, I can simply move the elements to the place I prefer and modify their looks. However, there were also elements that I failed to find their original places. For example, when I modify the comments, I wanted to do some change to the meta part. I could only find the PHP codes that fetch all information into an array but didn’t find the codes that wrap the information with HTML tags. These template files are convenient to use but quite complicated in nature.

I found that it is not difficult to develop a theme but very difficult to make it special, unique and at the same time appealing to users. I am restricted by my imagination and programming skills. The outcome of this first theme is very plain and I am not really satisfied. Sometimes when I wanted to do something, like the index page, I couldn’t find the way to achieve it then I had to change my design.

I looked through some popular themes, most of them make use of large, high-resolution images as their feature images or header images. They look really cool with those demo images. But when a theme depends highly on the uploaded images, how to make sure it won’t look strange when user chooses not to upload images or the image is not suitable?

Below are some screenshots of my theme:

Planning for Next Week

If we are stilling doing theme next week, I will try to make it better. There are still some unsolved problems like the bug in responsive menu and there are some undone work like gallery and content-aside template.

In the mean time I want to take some time to read books. I found the book WordPress for Dummies not useful so I want to read another one which is  Professional WordPress: Design and Development. It introduces the back-end process which I think will be useful.

TODO: Gallery, content-aside template.