Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
alexpanek

I would like to hide dates of an events using CSS.

Question

23 answers to this question

Recommended Posts

  • 0

I already managed to hide date and time from the event page using below code in page header code injection

Unfortunately it is still showing in summary block on my homepage. Anybody know how can I hide it from there as well?

Share this post


Link to post
  • 0

Thanks amazing! Thank you very much @ tuanphanCould you also write a code if I wanted to display only month without specific date? (My client will probably ask me for this option too)

Share this post


Link to post
  • 0

@alexpanek


/* Hide all */
.summary-thumbnail-event-date {
   display: none !important;
}
/* Hide MONTH */
span.summary-thumbnail-event-date-month {
   display: none !important;
}
/* Hide DATE */
span.summary-thumbnail-event-date-day {
   display: none !important;
}

If you want to hide date for specific event, it will difficult to you. Because you need to check the ID of that Event. If you don't know HTML / CSS, it's difficult to check that.


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

Hi @tuanphan, sorry to bother you again :)Would you be able to help me with one more thing regarding hiding the dates?I attached a screenshot explaining what dates I want to hide as well.

Thank you

question.jpg.f73e35dca29101a2fe747cad620ce37a.jpg

Share this post


Link to post
  • 0

@tuanphan Sorry for that, what I mean is when I click on the event on the homepage (summary block) new window with that particular event opens. On the bottom are shown earlier event (on the left) and later event (on the right) which you can click to check earlier/later events. The dates are shown and I would like to hide them.

https://heron-gar-tw2b.squarespace.com/config/pages

This screenshot should be better

screenshot-2019-08-20-at-225055.png.e6db99cfdc03f21c7bcd6763ee39819f.png

Share this post


Link to post
  • 0

@alexpanek Use this code


.collection-type-events .eventitem-pager-date {
   display: none;
}

Text "Later/Earlier" & Date in a HTML tag, so the CSS will hide both. If you don't want to hide Later/Earlier, please let me know, i will send other CSS.

Edited by tuanphan
Initial Revision

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

Hi @tuanphan. Thank you for this, yes I would prefer to hide only the dates and leave later/earlier. Could you please send the code for this?Thank you very much for your help, you are the best!

Share this post


Link to post
  • 0

@alexpanek

Remove above code, and use this


/* Hide all */
.collection-type-events .eventitem-pager-date {
   visibility: hidden;
}
/* Add text Earlier Event */
.eventitem-pager-older .eventitem-pager-date:before {
   visibility: visible;
   content: "Earlier Event:";
}
/* Add text Newer Event */
.eventitem-pager-newer .eventitem-pager-date:after {
   visibility: visible;
   content: "Newer Event:";
}



 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

Hi @tuanphan. Thank you once again, I think im good for know. My client will now review the website and we will go live. I will see how everything will run and if I need any more help I will definitely use your paid service. For now I will send you a donation for your help if that's ok?This was my first time I've built website and used squarespace forum so I'm only just learning how things works.

Have a great day Regards Alex

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...