Jump to content

Remove End Time from an Event on Events-Page + Resize Image of Event (way too big)

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://echidna-sheep-7ykn.squarespace.com/sempro

Page URL: https://echidna-sheep-7ykn.squarespace.com/sempro
Password: Spandovia

 

Hey everyone,

I'm trying to remove the end time for some of my Events but have no Idea how (for instance the first one: "2. Mensurboden" -> instead of "19:00 - 19:15" -> just "19:00"). Most of these Events are open end events. So I'd rather not enter an end time. How would I go about that?

 

Also, does anyone know how I could resize the images of the events? They are way too big and take up a lot of space. 

Cheers!

Link to comment
  • Solution
19 minutes ago, Phex said:

I'm trying to remove the end time for some of my Events (instead of "19:00 - 19:15" -> just "19:00"

Add this to Design > Custom CSS:

span.event-datetime-divider, time.event-time-localized-end {
  display: none;
}

387043591_Screenshot2022-01-21at13_45_05.thumb.png.2e138236d2624ffb0e7e22e429d79202.png

Did this help you today? Please provide feedback by clicking a 'Like' or 'Thanks' icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
1 hour ago, paul2009 said:

Add this to Design > Custom CSS:

span.event-datetime-divider, time.event-time-localized-end {
  display: none;
}

387043591_Screenshot2022-01-21at13_45_05.thumb.png.2e138236d2624ffb0e7e22e429d79202.png

Did this help you today? Please provide feedback by clicking a 'Like' or 'Thanks' icon below  ⬇️

Worked charmless, thank you so much!

 

Does anyone have an Idea how to resize the Event Thumbnail? Make the whole grey block smaller, so you can see more Events without scrolling.

Edited by Phex
Link to comment

@Phex Try this CSS

.tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail {
    padding-bottom: 20% !important;
}
.tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

@Phex Try this CSS

.tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail {
    padding-bottom: 20% !important;
}
.tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

Thanks a lot, the block did in fact resize! However, the thumbnail didn't adjust properly. Is there anyway to adjust the thumbnail size to the new thumbnail-block size?

Cheers!

Link to comment
2 hours ago, Phex said:

Thanks a lot, the block did in fact resize! However, the thumbnail didn't adjust properly. Is there anyway to adjust the thumbnail size to the new thumbnail-block size?

Cheers!

Actually, nevermind! I played around with the numbers in ur code and managed to make it look good. Im satisfied with how it turned out. Thanks a lot tuan!

The mobile version looks a lil weird though :c 

Edited by Phex
Link to comment
20 hours ago, Phex said:

Actually, nevermind! I played around with the numbers in ur code and managed to make it look good. Im satisfied with how it turned out. Thanks a lot tuan!

The mobile version looks a lil weird though :c 

Do you still need help with mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, tuanphan said:

Do you still need help with mobile?

That'd be awesome! Had no chance to check out the mobile version so far, been busy with getting the desktop version ready. However, I did in fact find some things that might need adjustment, if you dont mind.

 

1.) In general, is it possible to change the header title logo color for different pages? On the following pages white doesnt give a good contrast (cause its either white on white, or white on a light background):
https://echidna-sheep-7ykn.squarespace.com/ueber-uns
https://echidna-sheep-7ykn.squarespace.com/unsere-geschichte
https://echidna-sheep-7ykn.squarespace.com/mitgliedschaft
https://echidna-sheep-7ykn.squarespace.com/sempro

Would like to have the title header color "black" on these pages.

 

For the mobile adjustments:

2.) Is it possible to align the menu button with the logo on the left?: 
https://prnt.sc/26k0ob6
and maybe center the title header? Looks a little off to me :c

3.) Page "/unsere-geschichte": https://prnt.sc/26jourx
How to change title header to black & the outer circle of the bullet points to blue (as it is on desktop version) ?

4.) Page "/mitgliedschaft": https://prnt.sc/26jow2g
How to change title header color from "white" to "black"? Since its invisible due to white background.

5.) One of the points in the drop down menu on mobile version is cut off: https://prnt.sc/26jox2l
Any way to adjust the font size?

6.) Page "/sempro": https://prnt.sc/26joxjv
Title invisible since white on white & the event thumbnail's cut off.

 

I know it's a lot, but I'd appreciate any help you can offer me. I have no idea how I could fix those 😞

Other than that Im pretty satisfied with the website & would love to take it online!

Thanks again tuan!

 

Edited by Phex
Link to comment
On 1/26/2022 at 11:38 PM, Phex said:

That'd be awesome! Had no chance to check out the mobile version so far, been busy with getting the desktop version ready. However, I did in fact find some things that might need adjustment, if you dont mind.

 

1.) In general, is it possible to change the header title logo color for different pages? On the following pages white doesnt give a good contrast (cause its either white on white, or white on a light background):
https://echidna-sheep-7ykn.squarespace.com/ueber-uns
https://echidna-sheep-7ykn.squarespace.com/unsere-geschichte
https://echidna-sheep-7ykn.squarespace.com/mitgliedschaft
https://echidna-sheep-7ykn.squarespace.com/sempro

Would like to have the title header color "black" on these pages.

 

For the mobile adjustments:

2.) Is it possible to align the menu button with the logo on the left?: 
https://prnt.sc/26k0ob6
and maybe center the title header? Looks a little off to me :c

3.) Page "/unsere-geschichte": https://prnt.sc/26jourx
How to change title header to black & the outer circle of the bullet points to blue (as it is on desktop version) ?

4.) Page "/mitgliedschaft": https://prnt.sc/26jow2g
How to change title header color from "white" to "black"? Since its invisible due to white background.

5.) One of the points in the drop down menu on mobile version is cut off: https://prnt.sc/26jox2l
Any way to adjust the font size?

6.) Page "/sempro": https://prnt.sc/26joxjv
Title invisible since white on white & the event thumbnail's cut off.

 

I know it's a lot, but I'd appreciate any help you can offer me. I have no idea how I could fix those 😞

Other than that Im pretty satisfied with the website & would love to take it online!

Thanks again tuan!

 

Spandovia

https://echidna-sheep-7ykn.squarespace.com/ueber-uns

#1. To change logo on one page, add this code into Page Header

<style>
  .header-title-logo img {
    content: url(https://cdn.pixabay.com/photo/2022/01/20/14/16/ladybug-6952412__480.jpg);
}
</style>

#2. Add to Custom CSS

/* align logo burger */
.header-display-mobile {
    align-items: center;
}
.header-title-nav-wrapper {
    align-items: center;
}
.header-title-logo {
    align-items: center;
    display: flex;
}

#3. Add to Page Header

<style>
  .header-title-logo a:after {
    color: white;
}
</style>

With circles color, add this CSS

.direction-l .flag:before, .direction-r .flag:before {
    border-color: #005abc !important;
}

#4. Add to page Header

<style>
  .header-title-logo a:after {
    color: black;
}
</style>

#5. Add to Design > Custom CSS

div.container.header-menu-nav-item a {
    white-space: nowrap;
}

#6. Same code with #4. 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

Spandovia

https://echidna-sheep-7ykn.squarespace.com/ueber-uns

#1. To change logo on one page, add this code into Page Header

<style>
  .header-title-logo img {
    content: url(https://cdn.pixabay.com/photo/2022/01/20/14/16/ladybug-6952412__480.jpg);
}
</style>

#2. Add to Custom CSS

/* align logo burger */
.header-display-mobile {
    align-items: center;
}
.header-title-nav-wrapper {
    align-items: center;
}
.header-title-logo {
    align-items: center;
    display: flex;
}

#3. Add to Page Header

<style>
  .header-title-logo a:after {
    color: white;
}
</style>

With circles color, add this CSS

.direction-l .flag:before, .direction-r .flag:before {
    border-color: #005abc !important;
}

#4. Add to page Header

<style>
  .header-title-logo a:after {
    color: black;
}
</style>

#5. Add to Design > Custom CSS

div.container.header-menu-nav-item a {
    white-space: nowrap;
}

#6. Same code with #4. 

You are amazing. I appreciate you ❤️

Going to get a subscription on SquareSpace soon, probably wouldn't have if all of you didn't help me out, especially you tuan.

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.