Jump to content

Sharing customization of York site

Recommended Posts

Site URL: https://www.velkendt.dk

I just want to share some code that @tuanphan was so kind to help me with for my York site.

Make frontpage elements show video on hover, and show images when not hovering:
Firstly, for each page under settings --> media you have to link to a YouTube/Vimeo video. 
Afterwards, add the below code. Edit the Page Title ID and Image URL in the code for your pages and copy paste for each page. 
I will call the below code for CODE 1

article.index-item.has-item-video[data-url-id="title-of-your-page"] {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/19/03/27/person-5843476__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

article.index-item.has-item-video[data-url-id="title-of-your-page"] a {
    visibility: hidden
}

article.index-item.has-item-video[data-url-id="title-of-your-page"]:hover a {
    visibility: visible
}

article.index-item.has-item-video[data-url-id="title-of-your-page"]:hover {
    background-image: none
}

 


When on mobile browser, make videos autoplay on the frontpage and dont show any images:
Add this code. 

@media screen and (min-width:901px) {

Add CODE 1 here

}

 

Show the Page Title on the front page when on mobile browser:

/* show title mobile */
@media screen and (max-width:900px) {
body.homepage .index-item-text-wrapper {
    opacity: 1 !important;
}
}

 

Hide description on a single page:
To hide the description on a single page, add below code under page settings --> Advanced --> Header code
Also go to Design --> Site Style --> Disable Ajax Loading

<style>
.page-text-wrapper.clearfix {
    display: none;
}
</style>

Link to comment
  • Replies 0
  • Views 238
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.