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

Share this post


Link to post
  • 0

@ediblewalls Line 16-27 is new, the rest is old (Old is the code that I sent yesterday)

Just add line 16 - 27, NO NEED to add 01-15

Edited by tuanphan
Initial Revision

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

Sorry, replace Line 19: body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title

with

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

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

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