Formatting Event List Excerpts

  • Resolved espointpolish

    (@espointpolish)


    9 months, 1 week ago

    We are using the list view, and we use post excerpts to keep the event descriptions tidy. We are adding links to the excerpts via html. However, I’m not sure how to style these using CSS. We would like them to be underlined and red (#E22D2F) like the rest of our site. We’re using <u></u> tags right now, but we don’t know how to change the color. Can anyone help with this?

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Darian

    (@d0153)

    9 months ago

    Hi @espointpolish

    I’m glad you reached out! You can achieve this by using the following:

    <u style="color:#E22D2F">this is an excerpt</u>

    Let me know if you need further adjustments!

    Thread Starter espointpolish

    (@espointpolish)

    9 months ago

    Thank you for your help! I was hoping to add some code to the CSS to add this style to links in the excerpts automatically. The problem with doing it via html is that the staff adding events have a hard time remembering how to do it. Is there a way to add this style change via CSS? Thanks again!

    Plugin Support Darian

    (@d0153)

    9 months ago

    Hi @espointpolish

    I understand. To apply the same styling through CSS, you can add the following CSS to Appearance > Customize > Additional CSS:

    .tribe-events-calendar-list__event-description p{
    color: #E22D2F;}

    Please note that this will only work on your calendar’s list view.

    Feel free to let me know if you have further concerns.

    Thread Starter espointpolish

    (@espointpolish)

    9 months ago

    Thank you! Unfortunately this did not work for me. This is exactly what I added:

    .tribe-events-calendar-list__event-description p a{
    color: #E22D2F;}

    I added the “a” since I want this to only apply to links. However I tried removing it and it still didn’t work, as you can see here: https://rutgersaaup.org/events/

    Any idea why this would be the case? I truly appreciate your help!

    Plugin Support tristan083

    (@tristan083)

    9 months ago

    Hi @espointpolish ,

    Thank you for your message and I’m sorry to hear of the continued difficulties.

    Just to be clear, you are adding the custom CSS in your theme’s additional CSS (Appearance -> Customize -> Additional CSS), correct? If yes, could you try the following and see if this works better for you?

    .tribe-events-calendar-list__event-description p a{
    color: #E22D2F !important;}
    Thread Starter espointpolish

    (@espointpolish)

    9 months ago

    Thanks again for helping me with this!

    I tried adding “!important” to the code but that didn’t do the trick. I don’t know why it’s so stubborn!

    Here’s a screenshot so you can see:

    Plugin Support tristan083

    (@tristan083)

    9 months ago

    Hi @espointpolish ,

    For some reason, I am not seeing the CSS rule being outputted on the front end.

    I suspect there’s a conflict that’s causing the issue here. It would be good to test for conflicts. Could you follow the following steps?

    1. Deactivate all other plugins except for The Events Calendar Plugins.
    2. Switching to the Default theme.

    Please read the Testing for Conflicts Article before doing anything. 

    To be safe, we’d recommend conducting tests and updates on a Staging Server. Also, please keep a working backup of your website.

    Plugin Support Darian

    (@d0153)

    9 months ago

    Hi @espointpolish

    If the above recommendations doesn’t help, please make sure to clear your cache both from your plugins/theme and server-side, and check if that resolves the issue.

    Let me know how it goes.

    Thread Starter espointpolish

    (@espointpolish)

    9 months ago

    Hi there, thank you for following up. I actually only wanted the style to apply to links, that’s why I added the “a” to the code. However, as you can see from the screenshot above, it’s not changing the color of the links. I guess I need to try troubleshooting on a staging site to see if this an issue with the theme or other plugins, but I just haven’t had time to set that up yet. Thanks again.

    Plugin Support Darian

    (@d0153)

    8 months, 4 weeks ago

    Hi @espointpolish

    The CSS seems to be working on my test. Please check this screen recording: https://share.zight.com/d5uQmeL1

    It’s possible, that this is a caching issue. Could you try to add the CSS into your theme’s style.css, and see if that works?

    Thread Starter espointpolish

    (@espointpolish)

    8 months, 4 weeks ago

    Thank you for sending the screen recording. It’s so strange it’s not working on my end! I added the CSS to the Customizer and tried clearing the cache from the host, but it did not change anything. I can try using the Troubleshooting plugin over the weekend to see if the theme or some other plugin is the issue. I’m not sure what else to do! Thanks again.

    Plugin Support tristan083

    (@tristan083)

    8 months, 3 weeks ago

    Hi @espointpolish ,

    Thank you for your message.

    Please feel free to let us know how the conflict testing went or if you have further questions/concerns.

    Plugin Support Darian

    (@d0153)

    8 months, 3 weeks ago

    Hi @espointpolish

    I hope you’re doing well! I just wanted to check in and see how things are going. It’s been a little while since we last heard from you, and I was wondering if you had a chance to test for a plugin or theme conflict.

    Let me know if there’s anything I can assist you with.

    Plugin Support Darian

    (@d0153)

    8 months, 3 weeks ago

    Hi there,

    It appears that there hasn’t been any recent activity on this thread, so we’ll consider it resolved. However, if you have any additional questions or concerns, feel free to start a new thread.

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

The topic ‘Formatting Event List Excerpts’ is closed to new replies.