Archive for the ‘web’ Category

Hide Feedly Sponsored Content in Chrome

Thursday, November 16th, 2017

I have been using Feedly (https://feedly.com) as my RSS reader for some time now and recently they have started injecting sponsored content into the news feeds on their web site.

If the sponsored content (AKA ads) were anywhere else on the page I would deal with it as the price to pay for using the service. But the ads are randomly inserted into Feedly’s article lists and are designed to look like articles, which disrupts my reading flow. I poked around at the underlying code and found that it wouldn’t be difficult to hide the ads using a little bit of JavaScript and CSS.

The Chrome Inspector shows that each item in the list of articles is a div  with a entry CSS class named “entry”. Actual articles have an “id” attribute while, conveniently, the ads don’t. So, inserting a CSS rule that will set any div  tags with an “entry” class and no id attribute to display:none  will hide the ads.

A small bit of JavaScript run on the page will insert a style tag into the HTML document with the rule that will hide the ads.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#feedlyPersona div.entry:not([id]) { display:none }';
document.getElementsByTagName('head')[0].appendChild(style);

In Chrome, I used the Custom JavaScript for websites extension which runs custom JavaScript on any web site. It is entirely possible that if Feedly makes any changes to their web site that this hack will stop working, but since it’s meant for my personal use it’s not a big deal. The small amount of code can most likely be modified to work with whatever changes are made.

Posted in projects, web | No Comments »

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:

{
    kind: "Group",
    classes: "labeled-group",
    highlander: true,
    components: [
        {kind: "onyx.Checkbox", content: "Option one", checked: true},
        {kind: "onyx.Checkbox", content: "Option two"},
        {kind: "onyx.Checkbox", content: "Option three"},
        {kind: "onyx.Checkbox", content: "Option four"}
    ]
}

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:

.labeled-group {
    padding-top:6px;
}
.labeled-group > li {
    display:block;
    width: auto;
    padding-left: 35px;
    line-height: 30px;
    margin: 0 6px 6px 6px;
}

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