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


/* All devices */
/* 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;
}

/* Mobile */
@media screen and (max-width:640px) {
/* Replace with NEW MOBILE IMAGE URL */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title {
    background-image: url(mobile-image-url) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100px;
    width: 100px;
}
}


Edited by tuanphan
Initial Revision

Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post
  • 0

In case this helps, this is the code on there now

/* Hide Page Title / body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title span { visibility: hidden; } / Insert New Image /body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix { background-image: url(https://images.squarespace-cdn.com/content/v1/5d261974e3281d0001fef5b5/1564831094548-6U0PW5EUU3XLOGF1IKPY/ke17ZwdGBToddI8pDm48kC2Ou1MO9kamcKms_rlnXOx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0pTKqSDRwmMK43IUI3HojJWvxET3ZsoHLF25q9M0jMXigr6IB5A8OQ1JN_TuoaZPoQ/Grey+background+flag+image+and+tex+3.jpg?format=2500w); background-repeat: no-repeat; background-size: cover; background-position: center center; max-width: 100vw !important; height: 30vw; } / Remove top bottom space / body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix { margin-top: 0; margin-bottom: 0; } / Mobile / @media screen and (max-width:640px) { / Replace with NEW MOBILE IMAGE URL */ body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title { background-image: url(https://images.squarespace-cdn.com/content/v1/5d261974e3281d0001fef5b5/1564840007477-GPWIATQH0P4LSZRMUUXZ/ke17ZwdGBToddI8pDm48kJUlZr2Ql5GtSKWrQpjur5t7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UfNdxJhjhuaNor070w_QAc94zjGLGXCa1tSmDVMXf8RUVhMJRmnnhuU1v2M8fLFyJw/MOBILE+Grey+background+flag+image+and+tex.jpg?format=1500w) !important; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100px; width: 100px; } }

Share this post


Link to post
  • 0

@ediblewalls replace Line 19 (in my code), or Line 12 (code you just posted): body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title

with

body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

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