Customising events page: moving image above all text, including meta

Site URL: https://uwamss.org.au/uncaged

Hi,

I'm looking to customise our event item pages so that we can have an image sitting on top of all of the text on the page, rather than how it is now, with the meta box awkwardly sitting right next to the image, and the rest of the column that the meta box is in looking weirdly empty. A mock-up of what I'm looking to do is below.

I'd greatly appreciate it if there was a way to get this done with CSS only and without having to use a code injection, as we do not have the premium business plan and cannot afford to upgrade.

Cheers!

Hi,

If you need an automatic way, you will need to use a Business Plan or higher

If you need a manually way, edit each event >> Add a Code Block under text >> paste this code

<style>
  a.eventitem-backlink:after {
    content: "" !important;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60173d3fc360987af4f8010f/1b5bebad-dc6c-431c-89aa-e1957163fe6d/Uncaged+Banner+FB.jpg?format=750w);
    background-size: contain;
    margin: 0 auto;
    background-position: center center;
    width: 100% !important;
    display: block;
    height: 300px !important;
    background-repeat: no-repeat;
    transform: unset !important;
    position: static !important;
}

a.eventitem-backlink {
    display: block;
}
</style>

This is a great improvement, thank you! However, there's are annoying black bars flanking the image now, and I'm struggling to figure out how to modify the code to get rid of them. Would you happen to be able to do this?

On 3/12/2022 at 9:56 AM, MSS-Publications said:

This is a great improvement, thank you! However, there's are annoying black bars flanking the image now, and I'm struggling to figure out how to modify the code to get rid of them. Would you happen to be able to do this?

Hi. Which black bar?

Hi, 

Is there a way to add more space and horizontal rules to separate events? 

Thank you for taking a look!

6 hours ago, loren1 said:

Hi, 

Is there a way to add more space and horizontal rules to separate events? 

Thank you for taking a look!

Possible if you share link to event list on your site

Here you go:

https://www.artonthegrid.com/events

Hi tuanphan, sorry for the delayed response!

I've attached a screenshot to show you what I see when I add your code to the page.

On 3/16/2022 at 7:44 PM, loren1 said:

Here you go:

https://www.artonthegrid.com/events

Add to Design > Custom CSS

article.eventlist-event {
    border-bottom: 1px solid black;
    padding-bottom: 60px;
}

On 3/18/2022 at 1:37 PM, MSS-Publications said:

Hi tuanphan, sorry for the delayed response!

I've attached a screenshot to show you what I see when I add your code to the page.

Try this new code

<style>
   a.eventitem-backlink:after {
    content: "" !important;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60173d3fc360987af4f8010f/1b5bebad-dc6c-431c-89aa-e1957163fe6d/Uncaged+Banner+FB.jpg?format=750w);
    background-size: contain;
    margin: 0 auto;
    background-position: center center;
    width: 100% !important;
    display: block;
    height: 300px !important;
    background-repeat: no-repeat;
    transform: unset !important;
    position: static !important;
    background-color: white !important;
}
a.eventitem-backlink {
    display: block;
}
a.eventitem-backlink {
    background-color: white;
}
</style>

4 hours ago, tuanphan said:

Add to Design > Custom CSS

article.eventlist-event {
    border-bottom: 1px solid black;
    padding-bottom: 60px;
}

 

@tuanphan You rock, you are the best! Thank you so much.

On 3/19/2022 at 4:30 PM, tuanphan said:

Try this new code

<style>
   a.eventitem-backlink:after {
    content: "" !important;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60173d3fc360987af4f8010f/1b5bebad-dc6c-431c-89aa-e1957163fe6d/Uncaged+Banner+FB.jpg?format=750w);
    background-size: contain;
    margin: 0 auto;
    background-position: center center;
    width: 100% !important;
    display: block;
    height: 300px !important;
    background-repeat: no-repeat;
    transform: unset !important;
    position: static !important;
    background-color: white !important;
}
a.eventitem-backlink {
    display: block;
}
a.eventitem-backlink {
    background-color: white;
}
</style>

 

It works now! Thanks so much for your help mate, I appreciate it!