CSS for Event Teams

  • Resolved numeroish

    (@numeroish)


    5 years, 7 months ago

    Hi,

    Trying to decide between using Event Teams and Event Results on the Event page.

    1) For Teams, this CSS appears to work for hiding the Date and Status.

    .sp-template-event-blocks .sp-event-date, .sp-template-event-blocks .sp-event-status {
    display: none !important;

    The problem is then the Result isn’t aligned with the Team names. It’s much higher, whereas teams appears to be in the middle. Is there anyway to align all the elements in the TD to middle?

    2) What’s the CSS for the Event Teams table background to change to say Red and for all the table cells to change text colour to white?

    3) Used this CSS to hide the table headers in Event Results and Event Details. Assume that is correct.

    .sp-event-details thead th, .sp-event-results thead th {
    display: none;
    }

    .sp-event-venue thead th {
    background: #e9e9e9 !important;
    }

    4) How best to target the venue link CSS – which now redirects to a page with Goggle Maps (venue/ redirects to venues/). If I needed to add text underline for instance?

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Roch

    (@rochesterj)

    5 years, 7 months ago

    Hi there!

    Thanks for reaching out.

    Please kindly open new topics for additional issues. Otherwise, it can get confusing.

    Regarding the first one, I’m not sure if I get what you are referring to.

    Which of the 3 sections are you referring to? All of them contain team names (and none is with a “middle” alignment):
    http://prntscr.com/vct9i8

    Thanks!

    Thread Starter numeroish

    (@numeroish)

    5 years, 7 months ago

    Hi,

    Yep, what would be nice is a simple…

    Team A 3-2 Team B

    All centred on the same line.

    Hiding date and status doesn’t align things up properly.

    All the best,
    Chris

    Roch

    (@rochesterj)

    5 years, 7 months ago

    Hi Chris,

    Thanks for your reply.

    I think I’ve got what you mean. So you are referring to the second element, and you want to change the vertical alignment to middle (center usually refers to horizontal positioning in CSS< while middle refers to vertical position).

    Unfortunately, CSS elements can only have vertical alignment if they are inline or inline-block. But as we need floats there, the vertical alignment is going to be ignored.

    You’ll probably need more CSS or even JS code to add an absolute position to that element or to change the line height to be the same as the element’s height. Unfortunately, this kind of code is beyond the scope of our support.

    Here’s a bit more detail about the limitations of the CSS vertical align property:
    https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

    Thanks!

    Thread Starter numeroish

    (@numeroish)

    5 years, 7 months ago

    Hi Roch,

    Thanks for the update.
    Such a shame, you’d have thought they’d be the option somewhere to display the score in the simplest most commonly seen format.

    e.g. Liverpool 1-1 Arsenal
    In the same TD, same font size and vertically aligned in the middle.

    All the best,
    Chris

    Roch

    (@rochesterj)

    5 years, 7 months ago

    Hi Chris!

    Thanks for your reply.

    Yeah, I’ve tried some CSS variations there and I couldn’t get it to work. Then I checked the CSS manual and saw that it only works with inline elements. So this is more complex for that element in particular (as we have text and image).

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS for Event Teams’ is closed to new replies.