Applying Colour in Google Web Designer

Applying colour in Google Web Designer

I want this next blog to be not only for my own benefit but for others as well. Because, for the month and a half that I have raved and cheer-lead for this great authoring program, there is one thing that before now, 3:30pm on the 18th of November that I hadn’t quite got my head around; using the colour tools.

Because there is a lot of them in this application.  Don’t get me wrong, I can apply colour to shapes and elements and the tools are easy enough to use.  But as I open new documents and point and click to the various tools, I find myself asking the question, “which is the right tool to use?”  “Which one and where”?

There is

  • A colour icon for the text tool for changing text colour of a font.
  • A colour icon for changing background colour of various elements
  • Gradient colouring for elements  
  • A separate one for changing the <div> background in which GWD has created for the text to live in.
  • And more.

How on God’s earth do you keep track of them and know which is the right one to use at the right time?

The Text Tool

I’ll start with what I think is the easiest to understand to begin with. Select the icon at (1) change the colour of your text with the easy tool at the top where you’ll find (2).  That is solely for changing text colour and nothing else!!


So the colour for the text tag is reasonably straight forward. A nice little icon with a basic colour picker which changes the colour of your text via CSS.  Great!

The next Icon I want to investigate is this… The Tag tool.

The Tag Tool

The tag tool presents a selection of icons that represent <Div> elements that you can add to the stage. They are a list of preset settings for instances of the tag tool that you are going to add to the stage. If you will, the DNA,  the building blocks of the work you’re about to do. The colour icon you want for this is here is right there at the top as an option for a fill colour.Image

Below is an image of the colour box your presented with.  What you see is a colour wheel, but there are other options you can select if you prefer.

From right to left the options are.

  • Colour Wheel
  • Colour Palette
  • Gradients
  • No Colour at all


But I think the trick to remember is when you using colour with the Tag tool you not making any changes to any elements already on the stage, but to the next element you create in the future. However you have to remember that this is only for objects created with the tag tool.  New elements with the Text tool are not affected. More on that in a moment.

Colour Panel.

Now that we are clear on this, the next thing to do is to investigate colour application in GWD as found in the properties panels.

Currently there are 2 places where you a affect colour on an element, already placed on the stage; The Colour panel and the properties panel.

Now, I’ve used Photoshop, so what I see in front of me is actually quite familiar and straight forward when you know how.Image

But if you don’t I suppose it can be quite daunting.  Suppose you have an element selected on the stage.  The colour settings, the sliders, the values, the colour indicators will change automatically according to what the default colours are for that element. This could be either GWD’s completely white default, before you’ve done anything with the TAG tool, or your own colours that you applied to an existing element on the stage.  They are all independent of each other which means you have completely free reign to change any of the colours further.

To further clarify this does not change colour defaults for new elements but changes styles (let’s think of these as CSS styles) for elements that exist on the stage.

But what’s that?  There’s yet another way of changing colour styles??

Properties Panel

Let me try and demystify this while all this is finding a solid place in my brain.  Yes there is another spot for changing colour of existing elements. 


You’ll find a area for changing the background colour and for the first time, a space for changing the stroke (that’s the outline in case you’re unsure) of an element.  Relatively straight forward again.   The icons will reveal the same colour pickers that we’ve already learned about.

But the really cool thing is this. Remember the Colour panel right on top? Changing the colour settings on this Properties panel will change the settings in Colour panel too. How cool is that?  Very handy too.  Again, I stress these colours settings are for selected elements that already exist on your stage, not for new ones.

Canvas Shapes

Phew! We’re almost there.  I’ll wrap it up with a few recap conclusions in a moment but before I forget I want to see how these settings effect canvas shapes rather than <div> elements.

<A few minutes later>

Right, put as simply as simply as I can, canvas shapes have colour profiles that are independent of elements created via the tag tool and <div> elements changed via the properties/colours panel.   That means if I switch between a shape created in Canvas and a div element the colours in the properties panel will change to the last settings of each type. They are different entities.


Well… I think I’ve got there. I appreciate I was fast on canvas shapes but  I think I understand the differences in how colour is create in GWD and I hope my readers do too (if they didn’t already).

But to make sure here are some final pointers to make sure the message goes home for all of us. There are a wealth of different methods of applying CSS colour in Google Web Designer

    • Using Tag Tool Elements
    • Using Text Tool for changing font colours
    • Canvas shape colours
    • Using the colour panel
    • And by using the properties panel
  1. Colour settings changed using the Tag Tool are for making new default settings for any element you want to create (other than the text tool and canvas shapes)
  2. The Tag Tool, Text Tool and Canvas shape Tools all have separate colour profiles
  3. The Text Tool and Canvas shapes are used for changing the colour of existing objects on the stage
  4. When you add a new text tool, you will always have to select a different colour if you want it as the default will always be for no colour
  5. The Colour and Properties panels are linked so if you change settings in one, it’ll be reflected in the other.

Thanks for reading! 🙂


Using Microdata for Website SEO

My next focus has been learning about Microdata. A few days ago, Microdata was a mystery to me, but it is far less complicated than I first thought. With the right resources, and support, I think anyone can implement them.

Microdata is a way of creating rich snippets for Search Engines to latch on to, so you can be sure you’re getting the information you want on your listings. This can be easily done without them of course using your description and title meta tags, however you have greater control over how the information is displayed.

I’ve created the following summary of Microdata based on the 2 links I browsed for my research.

Since it’s inception in 2011, Microdata is an HTML specification that is becoming an increasingly important SEO factor for websites. The use of Microdata makes elements Semantic which means that it gives them meaning.


Microdata is an HTML specification that lets you to nest or link metadata within existing content on your pages allowing Google to conceptually understand the data it is linked to. Using Semantics, it improves user experience.


When learning about microdata, there are three main keywords to think about.

1) Itemscope. – Defines the portion of your page that you intend to link for Microdata. Itemscope is the root element of the microdata area

2) Itemprop Adds a property to a descendent item of itemscope. Itemprop is an element of the specification that is a descendent element of the item scope value.
Using the following common keywords
name (fn)
affiliation (org)
address (adr)

3) itemtype – defines a vocabulary (or schema) using item type. e.g. “;

You can review the list of accepted itemtypes and attributes here

An example of Microdata in action with HTML5 code.

<section itemscope itemtype=””&gt;
<h2 itemprop=”name”>This is my name </h2>
<img itemprop=”photo” src=”me.png” alt=”This is me” />
<p>I work for <span itemprop = “affiliation”>Info Support</span> as a <span itemprop = “title”>.NET developer</span>.</p>
<address itemprop=”address” itemscope itemtype = “”&gt;
<p itemprop = “street-address”>This is my street name</p>
<p itemprop = “locality”>This is the street where I live</p>

Data vocabularies are used to represent real life things e.g. people and places. They are defined as an URL in the itemtype attribute.

can make it look crowded. exploded. Where did all this come from? To help browsers and search engines identify paarts of the linked text so they can display them.

Affects? Benefits?
Microdata is still fairly new on the scene and as such there is no real verified research as to the benefits of microdata for your SEO. Certainly no “favours” from Google for implementing them in terms of rankings.

Its importance will only grow as the use of Microdata increases. Continued use of HTML5 is not advantageous yet, but not disadvantageous either.

Links – Creator and Generator Testing in Google Webmaster. ADD LINKS(other webmaster tools are available ;))


Navigational aids in Websites

A short one today. I’ve made it a personal mission in the past couple of days to recreate a cool CSS navigation effect I found recently. There are 2 case scenarios I’ve been thinking about to do this

1)  Check out the hover effect in the website navigation

It’s called llavalamp effect which is an appropriate name for the visual effect it seems to make. It hovers to the link/text that the cursor goes to and automatically changes width to match the size of the word it surrounds.  It seems to do it using a background image on the website. This background image repeats on X axis but goes across so doesn’t scale but just blends into an otherwise clear white default background. I thought.

To find out, I opted for a reverse engineering technique to inspect the site, piece by piece in an attempt to find out what makes the effect tick.  It’s worked for me in the past I just couldn’t get to the images that would make it possible so I couldn’t recreate the precise effect.

I could quite figure out… 
How does it work that a it scales but does not repeat?
How was the background image generated?
What drives the hover effect?
And why on earth will the effect not work even in a modern browser like FireFox 25?

Then, by chance I found the Holy Grail.

This is the work that the original script was based on. It’s open source if you want to use it but you’ll need to download the javascript yourself rather than using the presented code as I spent more time than I care to admit looking through the code and wondering why the hover effect would not take more effect than just the margins and padding. Download the package and search for the javascript file and the effect should work.

Check out the demo and the downloads.

My afternoon with web FavIcons

I’ve been having a lot of fun today with FavIcons.  For too long, I’ve been keeping my website on the server without an associated FavIcon, which isn’t really a good look. The FavIcon, if you didn’t know already is that cool little icon in each of your browser tabs. A good FavIcon goes really well with your brand and will enhance your web presence. 

Today, I’ve was at it like a Dog on a bone trying to set up Photoshop to accept the .ICO Windows format for Favicons.   It needed a .8bm plugin file to go into a specific folder, then restart Photoshop (or Paint shop pro as I started out with) and there you should see the option to pick a new file format.

Sounds easy, right?

Well, yes it is.  Well…It should be. But I have a very annoying knack of making small, menial tasks that should last about a minutes go on for the whole afternoon.

First I tried Coral photoshop, and no, a 30 day free trial period and 4 of 5 new programs that I neither need or want wasn’t appropriate for what I was trying to do,.

Jasc Paint Shop pro wasn’t going to help me either.  

This led me back to trying the plugin in Photoshop.   2 reboots and several assaults on my stamina and personal patience later, I finally found the correct place to put the plugin.  See Photoshop CS5, just to confuse me even further, has 2 copies of its file structure, one presumably for 32 bit operating systems and another for 64 bit systems like Windows 7.  It need nearly fooled me but I got there in the end.

And now, at the time of writing, Finally I have this! 



A lovely shiny new favIcon to go with the tabs in the browsers that help identify your website.

The instructions (if unlike me you can follow them properly) can be found here

You just need to have the following information handy

1 Your Operating System Bit version.  32 or 64

2 Your Plugin file version

  • ICOFormat.8bi
  • For Windows (64-bit), ICOFormat64.8bi

3 The file path, which will be located in your Photoshop File Formats folder, in Plugins.  Here’s your file path.  

C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\File Formats

or C:\Program Files (x86)\Adobe\Adobe Photoshop CS5\Plug-ins\File Formats


And that’s it, once you’ve reopened Photoshop you should have access to your .ico fileformats.   

I wanted to tell you all of this because I wanted to be able to create this by hand rather than relying on an online generator. It’s been at the back of my mind for sometime and now it’s demystified.  I suspect once you upload these files to your servers it might take a few minutes for the browser to pick it up.  Hang in there, once it is synced to your cache it should show up soon enough.

Right now that’s done, all that’s left for me to do is try and make a cooler FavIcon.   🙂