Help me style this Event list!?

[cscodismith]

I have an event list via the TwitchAlerts application and am trying to create some custom CSS to help me style the way some of the most recent followers / hosts / etc show up on the stream. What I am trying to accomplish right now, I would like there to be a small box on the left side of each alert that shows a different type of image for each one so follows get one image, hosts get another. Here is another stream that shows a perfect example of what I am talking about!

Here is a codepen of the project but it displays differently then the actual project does on It’s actual page here.

NOTE: I can’t adjust any html as its a built in application on TwitchAlerts and I can only adjust the css on the Event List module!

[Atelierbram]

There are Sass variables for values which are not defined, but also no SCSS syntax selected, instead CSS in the CodePen demo.

[Atelierbram]

Anyway, if you want icons, maybe go with embedded SVG as background-images in data uri’s, this blogpost can be helpfull. There are also tools out there for encoding and decoding.

[cscodismith]

Thank you. I will take a look into this and hopefully will come up with something to get this done :)

[cscodismith]

I have updated the codepen project here and got icons on them but having an issue. The bottom two colums that are 40px high I would like to target the div.background of just those so that the hearts are in the center just like the first column shows.

I have tried targeting the 2nd / 3rd column by using

.widget-EventList li div.background:nth-child(2) {
    background-position: 4px -3px;
    background-size: 42px 42px;
}

.widget-EventList li div.background:nth-child(3) {
    background-position: 4px -3px;
    background-size: 42px 42px;
}

but that did not make any changes. If you could help to me to find out how I can just target the 2nd and 3rd child of div.background that would be great!

[Atelierbram]

Try targeting the list-element with the pseudo-class selector; div.background is just a child-element of those:

.widget-EventList li:nth-child(2) div.background {
  background: red; /* see the change */
  background-position: 4px -3px;
  background-size: 42px 42px;
}

.widget-EventList li:nth-child(3) div.background {
  background: green; /* see the change */
  background-position: 4px -3px;
  background-size: 42px 42px;
}

Also better change body to ul for .widget-EventList in the HTML-markup.

[cscodismith]

Thank you SO MUCH! That did what I was looking for and the html was grabbed straight from the inspect element in the TwitchAlerts application so what the html code there shows is what is used in the application so it’s best not to change it if that is the final code I am using and can’t change elsewhere.

[Author]

Posts