1

I am trying to put a tour widget on my band's website and I've used CSS to modify a CSS element by the ID. Normally I can just call its class and it will override, but this element only has an ID.

If you've ever seen the songkick widget, the "By Songkick" part at the top is what I'm trying to get rid of. It's ID is "powered" but when I override with #powered or .powered, it doesn't change.

I've been doing:

#powered {
    display: none;
}

And nothing comes of it. It's not showing in the hierarchy of CSS in Chrome.

Is there another way to modify CSS by ID or do you think it's because the whole widget loads after my webpage and it overrides my changes? Is there such a thing as privatizing your CSS objects?

George Urick
  • 135
  • 10

1 Answers1

4

(full disclosure: I work for Songkick and have worked on the tour dates widget)

The Songkick widget is powered by the Songkick API which has some attribution requirements: https://www.songkick.com/developer/api-terms-of-use -- if these requirements are a deal-breaker for you, you'll probably have to consider another solution ;(.

To clarify why your CSS doesn't hide the element: the widget works by injecting an iframe pointing at a Songkick-controlled domain. So, you would need there to be CSS on the Songkick page served in the iframe in order for the CSS rules to apply. Given that Songkick controls the iframe content, and requires attribution for powering the tour dates on third-party sites, hiding the "by Songkick" is unlikely to become an option for widget embeds any time soon.

Rob
  • 909
  • 1
  • 8
  • 14
  • Thanks! I appreciate the help. I just decided to keep the logo because the widget works so easily. You all are awesome. – George Urick Aug 26 '15 at 21:58