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

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


ediblewalls

Question

  • Answers 37
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

Recommended Posts

  • 0

@ediblewalls can you share site url?

If your site is private/trial, setup password & share url. See how to: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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;
}


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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!

Link to comment
  • 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

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...