Emil Arvidsson & Frostbites, Bar5 28.3.2015

Emil Arvidsson & Frostbites ensivierailulla Bar5:ssä. Noin vuosi takaperin oli tarkoitus tapahtua, mutta viime hetken loukkaantumisen vuoksi keikka peruuntui. Tällä kertaa ei tapaturmia tapahtunut, joten mies pääsi paikalle Frostbites-duon (Jaska Prepula, Mikko Peltola) kanssa. Kuvia tuli napattua muutama.  Continue reading “Emil Arvidsson & Frostbites, Bar5 28.3.2015″

Modifying underscores.me theme

Underscores.me is a starter theme for anyone who’s interested in modifying your own theme for WordPress. It creates a solid base which you can modify to your needs. Here I’m writing about the changes I’m doing to functions.php, header.php and style.css, just to name a few. So let’s begin.

Multiple widget areas

Underscores.me theme comes with one active widget area. But every now and then you  might need two or more widget areas. This is what I did to enable a second one.

The function for widget initialization starts from line 86 in functions.php. Copy the 9 lines from “register_sidebar…” to “) );” (88 – 95) and paste them right after the line 95. Change the text ‘Sidebar’ to something like ‘Sidebar 2′ (line 97) and the id ‘sidebar’ to ‘sidebar-2′ (line 98). Now you have a second widget area in the backend (Appearance/Widgets).

Now, to activate it on the front-end you have to decide, where do you want it to appear. Should it be in the header, sidebar, footer, or somewhere else; that’s up to you. Here I will add it to the footer, just for fun.

Open footer.php and go somewhere inside <footer…> … </footer> and add the following.

<?php
if ( ! is_active_sidebar( 'sidebar-2' ) ) {
 return;
}
?>
<div id="tertiary" class="widget-area" role="complementary">
 <?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #tertiary -->

Underscores.me uses <div id=”primary”…> for the content area, and <div id=”secondary”…> for widget area, so I use #tertiary for the second widget area.

Site navigation (no more floating)

I’m not so fond of floating things around, so I try to avoid them as much as I can. Therefore I removed the float:left properties from selectors .main-navigation and .main-navigation li. Instead of float:left I added display:inline-block to .main-navigation li selector.

There is a rule to change the navigation from a visible menu to a button for screens <600px. I modified the rule so the max-width for the button to appear is 767px and the menu from horizontal to vertical by adding a selector .main-navigation li  with display:block in to the media query (max-width:767px).

Responsive design

To begin with, underscores.me isn’t really responsive from the start. There is one rule for navigation-menu, which changes the menu from horizontal into a button and that’s it. To make my theme responsive, I’m using Tiyo Kamtiyonos‘  tutorial as a starting point. I suggest that you check it out before continuing with my modifications.

#content.site-content{width:100%;padding:0 10%;}
@media only screen and (min-width: 991px) {
.hfeed{}
.site-header{width:100%;padding:0 10%;}
.site-main{width:100%;padding:0;overflow:auto;}
.content-area{width:63%;padding:0;float:left;display:inline;}
#secondary.widget-area{width:35%;padding:0;float:right;display:inline;}
.site-footer{width:100%;padding:0;}
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hfeed{}
.site-header{width:100%;padding:0 10%;}
.site-main{width:100%;padding:0;overflow:auto;}
.content-area{width:63%;padding:0;float:left;display:inline;}
#secondary.widget-area{width:35%;padding:0;float:right;display:inline;}
.site-footer{width:100%;padding:0;}
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.hfeed{width:100%;padding:0 10%;}
.site-header{width:100%;padding:0;}
.site-main{width:100%;padding:0;}
.content-area{width:100%;padding:0;}
#secondary.widget-area{width:100%;padding:0;}
.site-footer{width:100%;padding:0;}
#content.site-content{padding:0;width:100%;}
}
/* Mobile Layout: max 479px. */
@media only screen and (max-width: 479px) {
.hfeed{width:100%;padding:0 10%;}
.site-header{width:100%;padding:0;}
.site-main{width:100%;padding:0;}
.content-area{width:100%;padding:0;}
#secondary.widget-area{width:100%;padding:0;}
.site-footer{width:100%;padding:0;}
#content.site-content {padding:0;width:100%;}
}

First of all, I added a rule for #content.site_content to create an empty space around the content and sidebar areas. For Mobile layouts (max 479px and min 480px) I reset the #content.site-content rule to padding:0 just to remove unwanted empty space from those screen sizes.

That’s for starters, I might continue some day.