UncommonPursuit Posted December 14, 2021 Share Posted December 14, 2021 Site URL: https://uncommonpursuit.net Hi, I want to use my regular logo, which is white with blue text, at my SquareSpace site, as the default logo. This way when people share from the website, the regular logo is used. However, on both the home page and the Donate page, I want to display a transparent version of the logo, so that it blends in nicely with the darker backgrounds. To be clear, I don't want to use the Site Title text, but my organization's logo. Alternatively, is there a simple way to create a solid color bar behind all the header links and logo? In advance, I appreciate your suggestions! Link to comment
Beyondspace Posted December 16, 2021 Share Posted December 16, 2021 On 12/15/2021 at 2:20 AM, UncommonPursuit said: Site URL: https://uncommonpursuit.net Hi, I want to use my regular logo, which is white with blue text, at my SquareSpace site, as the default logo. This way when people share from the website, the regular logo is used. However, on both the home page and the Donate page, I want to display a transparent version of the logo, so that it blends in nicely with the darker backgrounds. To be clear, I don't want to use the Site Title text, but my organization's logo. Alternatively, is there a simple way to create a solid color bar behind all the header links and logo? In advance, I appreciate your suggestions! Try in Home > Design > Custom Css .header-title-logo > a:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: visible; background-position: center; background-size: cover; background-repeat: no-repeat; } .header-title-logo { position: relative; } /*Setting for Home Page*/ #collection-618d787e0f263f0eda365ce6 { .header-title-logo { visibility: hidden; } .header-title-logo>a { &:after { background-image: url(https://images.unsplash.com/photo-1639599629730-5710b6e18363?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } } } /*Setting for Donate Page*/ #collection-618d7c903f3402756b44f4e4 { .header-title-logo { visibility: hidden; } .header-title-logo>a { &:after { background-image: url(https://images.unsplash.com/photo-1639638126133-f4adaa3a3138?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } } } Change the url image Let me know how it works on your site Support me by pressing 👍 if this useful for you tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment