Book Review: What A Plant Knows

Warning! Your feelings about plants will never be the same after reading this book. This is a small book and is an easy read. Small as it is, it packs a lot of really interesting information addressing the questions – can a plant smell? see? feel? hear? know where it is at? have any memory?

What A Plant Knows

What A Plant Knows

The author, Daniel Chamovitz, provides a lot  of detailed information on experiments preformed by biologists and other people who deal with plants. After reading this book you will know why and how a plant bends towards the light. I found out that plants are able to be aware that a plant next to them is being attacked by some predator and is able to put up some defenses. And of course, the details of just how this takes place is revealed.

It is really interesting to learn about how plants react to various frequencies of light. Not only will the frequency of light have a difference but the duration of the light source will cause things to happen.

Plants reaction to touch is explored also. Plants do react to touch and external pressure/motion such as wind. The details of the experiments reveal the intricate mechanisms that are behind this. After reading this book, I am somehow affected knowing that any time I touch my plants they are reacting in some way.

The various experiments date all the way back to the days of Darwin through current research. Some findings remain solid to this day while other findings have been overturned or tweaked based on new research.

I highly recommend this book. It will keep your interest all the way through and perhaps even make you think differently about those little green living things you tend to every day.

[Scientific American / Farrar, Straus and Giroux – 2012]

 

0

Changing ICON Fonts in Canvas Theme Widget Area

You are probably just like me when it comes to tweaking your WordPress Theme “look and feel”; something is not quite right and you’re not going to be satisfied until it’s changed just the way you want it. I have found that it can be quite a painful and time consuming effort to figure out how to achieve the desired results.

This post will hopefully save you some time and provide you with some important information if you want to change the look and feel of the social icons that come stock with the sidebar Subscribe & Connect widget in the WooThemes Canvas WordPress Theme. In the process of trying to figure out how to make the changes, I found that critical information was not all in one place. I had to visit many sites to extract the details and figure it all out as well as contacting WooThemes. What you will find here is the flow of how to make the changes with reference links to some good sites to provide you with deeper background details. Alot of the detailed information that you will need can be found in an article written by Chris Ferdinandi called “Using ICON Fonts” . You should refer to it as you read through my post.

My Goal: Change the round social icons that are used in the WooThemes Canvas Theme sidebar Subscribe & Connect Widget to square social icons.

What are ICON Fonts? The social icons used in this widget are implemented using ICON Fonts. Why not use jpg or similar images? Using ICON Fonts helps your website be more responsive and quicker. Website response is a big thing these days; not having to wait a long time for things to load is a good thing. Instead of having to load many images, you need to just load one small font file once. It is scalable and can also be styled using CSS.

Canvas code that displays the widget

Canvas widget code area

 

 

 

 

 

 

 

 

 

 

 

 

 


Where are these ICON Fonts used in the Canvas Theme?
A good way to reveal this is to use the Firefox browser with the Firebug Tool installed. This is very easy to install. Do it now since it will be very handy for so many things. With the tool installed and running, a code window will be displayed on the bottom half of your browser window. The web browser will highlight the displayed part of the page which corresponds to the line of code where you place your curser.  The Figure below shows where in the code we have to go to get to the place where the social icons are dealt with.

The associated areas in the themes styles.css file is shown in the Figure below.

Where icon fonts show up in Canvas style.css

Canvas style.css area

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The @font-face declaration –  Using the ICON Fonts requires the use of the @font-ICON rule in the code. This is located in the themes style.css file. See the Figure below.  See the W3schools.com write up on the details of this.

The four icon font files

The four icon font files

 

 

 

 

 

 

 

 

 

 

Note that the @font-face declaration specifies the name of the font, some attributes about it, and where the font files are located. You can see that there are four different font files specified; eot, ttf, svg, and woff.  The reason for this is that some browsers require the font in a specific format.  Note that the Figure above also shows some code that deals with an IE issue with eot format.

Where are the four ICON Font files located? They are located in the  public_html/wp-content/themes/canvas/includes/fonts/ folder. The four files are social.eot, social.ttf, social.woff, and social.woff.

What exactly needs to be changed in order to change the look and feel of the social icons displayed?
(a) Four new ICON font files described above will have to be created and replace the  existing files.

(b) Several areas of the styles.css file will have to be modified.

How to generate the new ICON font files.  There are many available programs and sites that will provide the ability to generate these new files. The Canvas theme utilizes the IcoMoon site and app to generate the files. Here is a summary of how to generate your new ICON Font file.

(a) Determine which social icons you want to have displayed in your widget.

(b) Go to the IcoMoon site and click on the app to start it and look through the inventory of icons that you want to use. Click on each icon you want to be a part of your ICON font. Notice that there are slightly different variations of each specific icon (For example there are two to four different styles for you to select.) See Figure below. If your end result is to have square icons, then choose the square ones. When you click on each desired icon, it will be highlighted. And magically, when you return to the site later, the same icons will still be highlighted! You may have to play around with different styles and regenerate the font file as you seem fit.

Choice of different icons

Choice of different icons

 

 

 

 

(c) On the bottom of the page, click the “font” button.

(d) You will now see displayed the “glyphs” that you have selected as shown below. Note that on this page, this particular app has issues and sometimes becomes unresponsive.

Your chosen glyphs in your font

Your chosen glyphs in your font

If all is well, when you place your cursor over any picture of an icon, it will turn blue and be able to be “opened”.  If the app is having issues, it will not be clickable and will not display a different hover color and there will be a message at the bottom of the page indicating that the app is not responding. You can click the control to attempt recovery and this usually will get things working again and the page will be refreshed.

 

 

 

(e) Select the icon size by clicking on the icon which will display a new box which shows the graphic.

Icon size

Icon size

In the upper right corner you will see a drop down menu to select the icon size; 16, 20, 24, or 32 pixels. The size selected will have an effect on scaling. You will need to research the size best for you. After selecting the size, you can close the window by clicking on the “X”. Do this for all ICONS. See the Figure on the left.

 

 

 

(f) Next you need to make sure that the Unicode number associated with each ICON is correct. Note that these are unique/private  ICONS and thus must have a number within a certain specified range dedicated to private charactars. Some good reference information on Unicodes can be found at Wikipedia and Univ. Of Wisconsin. The numbers chosen must be in the range of E000 – F8FF. These numbers must match up with the numbers that correspond to the appropriate social ICON specified in the styles.css file as shown in the Figure below.

Make sure Unicode numbers match

Make sure Unicode numbers match

 

 

 

 

(g) Click on Preferences tab at the top of the IcoMoon app. Make sure the following parameters are entered (See the Figure below):

Preferences Tab

Preferences Tab

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

–  Font Name = social (matches what is in the Canvas code)
–  Class Prefix = icon-
–  Check “Include Metadata In Fonts”
–  Check “Encode and Embed Font in CSS”
–  Font Metrics; “eM square height” = 512 or 1024, depending on ICON size
“Baseline Height” (%e M) = 6.25, depends on your particulars
“Whitespace Width” (% eM) = 50
–  URL = Your URL
–  Version = Use this if you are going to be changing and modifying. It will be handy.

(h) On the bottom of the page, click on the “Download” button. You will see the familiar dialogue box at the bottom of your browser asking you if you want to open it or save it. Use the “save as” function and save it to your selected location using your selected name.

(i) Replace the original four files with these new files of the same name.

Making changes to the Canvas files.  You need to make the following changes:

(a) In the #connect .social a:before {  …. } area (See one of the previous Figures) , change the following:

–  Change webkit-border-radius: from 300px to 0px.

–  Change moz-border-radius: from 300px to 0px.

–  Change border-radius; from 300px to 0px.

(b) Make sure the Exxx values specified in the code below the above match up with the Exxx values you used in your generated file for each social icon.

(c) The above changes just change the social icons from round to square. If you want to do something else, then you will have to change other things in the style.css file.

(d) You can modify the existing style.css file, add custom CSS code to the custom CSS area that is provided by the Theme, or add any CSS changes into a Child them.

There are many really good articles and tutorials on this subject and I have listed a few of them below.

IE8 Web Font Support            Can I Use SVG Fonts?

SVG Forum                                Create an ICON Font

How to Get Started With SVG    Inkskape Tool

Windows Font Viewer             WOFF Info 

WOFF File Info                        Font Squirrel Font Generator

Font Converter                         Coderwall Info

Glyphs

0

Powered by WordPress. Designed by WooThemes