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

Replace a page title with an image on just one page - Harris Template

Question

I am trying to replace the page title of just one page with an image. The site is using the Harris template.

Any advice would be greatly appreciated!

Edited by ediblewalls
Initial Revision

Share this post


Link to post

Recommended Posts

  • 0

@ediblewalls Add to Home > Design > Custom CSS


/* Hide Page Title */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title span {
   visibility: hidden;
}
/* Insert New Image */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title {
   background-image: url(https://images.squarespace-cdn.com/content/v1/5d26197…/1564…q3JJthZTcucY-Z3n09bwP_S9f_xILyS3loG5KTnpdHvwWR-dhpQ/Parker.jpg?format=300w);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   height: 100px;
   width: 100px;
}


body#....f8 is Page ID. Each page has different ID. See how to find Page ID. https://beaverhero.com/squarespace-how-to/#HowtoFindPageID


 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

@ediblewalls Replace https://images.squarespace-cdn.com/content/v1/5d26197…/1564…q3JJthZTcucY-Z3n09bwPS9fxILyS3loG5KTnpdHvwWR-dhpQ/Parker.jpg?format=300w

with your image url :P

See how to insert CSS: https://beaverhero.com/squarespace-how-to/#HowtoInsertCustomCSS

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

@ediblewalls Try this


body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix {
   background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   max-width: 100vw !important;
   height: 30vw;
}

Try it first. If you feel okay, we'll fix the mobile / tablet later

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

@ediblewalls On Mobile and Tablet there is a very wide space above and below. Use the following code to remove them.


/* Remove top bottom space */
body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix {
   margin-top: 0;
   margin-bottom: 0;
}



 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

If you aren't sick of me yet, I have something else I need help with:

The image is the correct size on desktop view but not on mobile view.

I was just wondering if there would be any way to make the mobile view of the image bigger without cropping out some of the words?

Thanks again!

Share this post


Link to post
  • 0

Well, it would need to be wide enough to fit all the letters in. But yes, as tall as the longhorn picture is in the mobile view.

Is it possible to use one image in mobile view and a different image in desktop view? Because I could make a different image for mobile view that would make it easier to fit all the letters in while cropping the sides of the image to make it taller

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