Accomplishment this week:

For my new theme, which I named first-try, I developed it according to the sequence introduced in the Underscores course.

Firstly, I went to google fonts to choose my fonts. I chose three fonts for all my design

• font-family: ‘PT Sans’,sans-serif; (400italic,400,700,700italic) for meta, page navigation, menu
• font-family: ‘Tillana’, cursive; (700,800,600) for titles
• font-family: ‘Volkhov’, serif; (400,400italic, 700,700italic) for body content

and I enqueued them in function.php.

I also want to make a record of the colors I used so that it’s easier for me to check:

•  #5b5b5b, hsl(0,0,36%);       dark gray
• #e6e6e6, hsl(0,0,90%);         light gray
• #ffffff, hsl(0, 0, 100%);          white
• #cc3300, hsl(15,100,40%);   red
• #801515, hsl(0, 72%, 29%); dark red
• #ffffa6, hsl(60,100%,83%);   light yellow

Layout

(Sorry that I don’t have screenshots for problems under layout because I have fixed them when writing this report. I will remember to keep screenshots for latter parts.)

In order to be different from the theme I tried, I decided to use sidebar_content.php as my layout.

Problem#1: After I enqueue it in function.php, something strange happens. The bottom scrolling bar appears and there is a small empty space at the right side of screen.

Solution: Then I realize it’s because of an image in the post Markup: Image Alignment. The image is 1200px wide and extends to the right a bit. I deleted the image and insert it again and the bug disappears.

Question: In function.php we defined content_width to be 600px (as below). But when we upload and insert image the image can still choose to be its full size, then what is the use of content_width?

function first_try_content_width() {
                   $GLOBALS['content_width'] = apply_filters( 'first_try_content_width', 600 );
}
add_action( 'after_setup_theme', 'first_try_content_width', 0 );

Problem#2: When I tried to use the similar method to place the widget-area and content-area using the code below, the padding of content-area extends outside the window and the bottom scrolling bar appears.

.content-area {
    width: 100%;
    float: right;
    margin-right: -380px;
    padding-right: 380px;//the padding extends out of window
}
.site-content .widget-area {
    width: 380px;
    float: left;
}

So I tried a different way. The idea comes from a website which also has the layout of 2 columns, the content area and sidebar area.

.content-area {
 width: 75%;
 float: right;
 padding: 1rem;
}
.site-content .widget-area {
 width: 250px;
 float: left;
 padding: 1rem;
 margin: auto;

I added a media query at width=1020px when the sidebar goes down automatically (since 20% is not enough for 250px width).

@media screen and (max-width: 1020px ){
 .content-area {
 width: auto;
 float: none;
 padding: 1rem 4rem 4rem 4rem;
 }
 .site-content .widget-area {
 width: 100%;
 float: none;
 padding: 1rem 4rem;
 }
}

Header

I think the image in header section is very important for an oriental style theme. It tells visitors directly what style of theme they can expect to see. So I want this image to be fixed.

Therefore, I disabled the Custom Header Feature in function.php and used the <div class=”site-branding”> to display the image.

.site-branding {
 height:634px;
 text-align: center;
 background-image: url(images/header_large.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover!important;
 }

I used media queries to create three different looks for different browser sizes.

Menu

The most challenging part for menu is how to make it different from the previous one. The color set of white, gray and black can always make a simple and elegant menu but I don’t want to make it that monochromatic.

After several attempts of combining gray, white and red, I came up with this design:

Problem#1: When the window size is small, there is a bug that the menu items in the second layer cannot float to the left, the menu item that the mouse is over seems to block them.

Solution: Then I realize it’s because of the red color border I added to those items  that mouse is over. So I added border with the same color as the background to every item.

//red-color border to those menu items that the mouse is over
.main-navigation li:hover > a,
.main-navigation li.focus > a {
 color: #cc3300;
 color: hsl(15,100,40%);
 border-bottom: 2px solid #cc3300; //<--this is the code that causes problem
}

//solution: add border to every item
.main-navigation a {
 display: block;
 text-decoration: none;
 padding: 1rem 0.8rem;
 color: #5B5B5B;
 color: hsl(0,0,36%); 
 text-transform: uppercase;
 border-bottom: 2px solid #e6e6e6; //<--solution part
}
//need to add to other 3 places as well

Readings:

I read some parts of WordPress For Dummies this week and I think it would be better if I write down the things that I think are important.

• three types of WordPress:
  • hosted version at wordpress.com, the server of WordPress is used
  • self-hosted version from wordpress.org, can be hosted at local server or other paid web server
  • WordPress MU, a network of blogs, I am wondering is OSS a kind of WordPress MU?
• database <= posts, comments, options in dashboard; file system <= theme
• register a domain name, popular registrars like GoDaddy. (It has a sale till 30 Sep of the Managed Hosted WordPress, the basic one needs only SG$1.99/month!! Check this!! I am not sure if it includes all the things we need)

Planning for next week:

Get the responsive design for menus done (currently meeting some problems, will be recorded in the next post) and move on to footer and other parts of the theme. I feel the time may not be enough I will try getting the whole picture than fine tune later if there is time.

TUDO: add tags of the theme to style.css when it is finished.