Archive for the ‘web’ Category

Westchester Gaming Group Web Site Updated

Thursday, September 29th, 2016

I reworked the Westchester Gaming Group web site at westchestergaming.org with a new responsive WordPress theme. The first step of creating a responsive version the original theme is complete and I am working with some WGG members to determine what new features to add to the site. Below are some before and after pictures of the site.

Original WGG Site

Westchester Gaming Group web site with the original WGG WordPress theme

Responsive WGG Site

Westchester Gaming Group web site with the new responsive WGG 2016 WordPress theme

Posted in projects, web | 1 Comment »

Testing Animating the Dragon Gears with CSS3 Animations

Tuesday, June 7th, 2016

It’s 2016 and the Dragongears WordPress theme is in desperate need of an update, at the very least to make it more responsive and easier it use on mobile devices. A while back I played around with switching out the animated GIF gears in the dragongears.com logo with CSS3 animations as part of that update. It came out well, but still needs some tweaking.

Posted in projects, web | No Comments »

Easy Enyo Checkbox Labels

Tuesday, March 5th, 2013

In a recent Enyo project I needed a labeled vertical group of checkboxes for setting the app’s preferences. I was hoping that I could just put a bunch of onxy.Checkbox components from Enyo’s Onxy widget library inside a Group component and use the content property of each checkbox as its label. This is the code:

Unfortunately, the results weren’t quite what I expected:

checkboxes-nocss

The content text was displayed inside the checkbox and the checkboxes were positioned horizontally instead of vertically. Happily, just a little bit of CSS solved the problem:

With the above CSS, the checkboxes were displayed just as I was expecting:

checkboxes-css

So, how does it work? An Onyx checkbox is just a DIV tag with a background image which displays its state (checked or unchecked). First, we set each checkbox to display:block so that it appears on its own line. Next we give it a width:auto so that it takes up the entire width of its containing element. To get the label text (the checkbox’s content property) out of the checkbox itself, we use padding-left to move the text to the right. to vertically center the text, we set the line-height to the height of the checkbox.

While we’re playing around with the CSS, we’ll add some margins to give some extra space between the checkboxes and the containing element.

A nice side effect is that the user can tap on the label as well as the checkbox to select it since the checkbox DIV is now the width of the containing element.

Tested in Windows on Chrome version 25, Firefox version 19 and IE 10 and on Android Chrome version 25.

Tags: , , , , , ,
Posted in mobile, projects, web | 1 Comment »

2012 Site Update

Monday, June 25th, 2012

It’s 2012 and there have been a lot of changes over the past year, both in my personal life and in the world of webOS. So now it’s time for a change at dragongears.com also. The site is getting a complete overhaul (style and content) with the focus shifting away from my webOS apps and more towards a blog format related to my mobile, web and electronic projects. Changes to the site will happen gradually since I work on it in my spare time.

Posted in dragongears news, projects, web | No Comments »

Dragongears news RSS feed