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


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

Home > Design > Custom CSS

Maybe you inserted in Header in Advanced.

Edited by tuanphan
Initial Revision

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

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

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

@ediblewalls How do you want the image? Small like that or bigger or full width?

And which spaces do you want to remove?

Can you take a screenshot, or draw on the screenshot I send?

alt text

screenshot-3.png.32ef71c87075875a015478d5d4242290.png


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

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

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

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;
}



COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

@ediblewalls Okay. Have you a great weekend.

Accept Answer if it worked. Thanks.

Edited by tuanphan
Initial Revision

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

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