yasminva Posted March 8, 2021 Share Posted March 8, 2021 Site URL: https://zeronineobjects.co.uk hi i'm having an issue with the background on my store page, i can't add an image as the background on the /store page and the individual product pages id like it to match the rest of my site and not look so empty, is there i ccs code i need to input to allow me to add a background? thank you Link to comment
creedon Posted March 8, 2021 Share Posted March 8, 2021 Please post your site-wide. Posting your site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 9, 2021 Author Share Posted March 9, 2021 14 hours ago, creedon said: Please post your site-wide. Posting your site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. ahh sorry i completly forgot! the password is zeronine Link to comment
creedon Posted March 9, 2021 Share Posted March 9, 2021 (edited) You'll need to upload or already have a background image somewhere for this to work and have the URL of the image. Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <style> /* add background image to store pages */ .sections .page-section:first-child .section-background { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' ); } </style> This is for v7.1. You will need to replace the URL in the code with the URL of the image you want to use. Let us know how it goes. Edited March 9, 2021 by creedon yasminva 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 9, 2021 Author Share Posted March 9, 2021 (edited) 55 minutes ago, creedon said: You'll need to upload or already have a background image somewhere for this to work and have the URL of the image. Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <style> /* add background image to store pages */ .sections .page-section:first-child .section-background { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' ); } </style> This is for v7.1. You will need to replace the URL in the code with the URL of the image you want to use. Let us know how it goes. thank you that worked, and i managed to find the url for the image i wanted is there any way i can do this to the cart too? Edited March 9, 2021 by yasminva Link to comment
creedon Posted March 10, 2021 Share Posted March 10, 2021 Quote is there any way i can do this to the cart too? Add the following to Design > Custom CSS. #cart { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' ); } This is for v7.1. SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 10, 2021 Author Share Posted March 10, 2021 13 hours ago, creedon said: Add the following to Design > Custom CSS. #cart { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' ); } This is for v7.1. SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know. Let us know how it goes. thank you so much! i will check back on monday about that sorry one more question, i was wondering you can help me with a custom css for the font in the cart a) when the cart is empty, i would like the message that appears to all be in lowercase (you have nothing in your shopping cart. continue shopping) b)when there is an item in the cart, the font to be smaller to 14px across the entire contents of the cart table and the word 'subtotal' to be in lowercase too Link to comment
Solution creedon Posted March 10, 2021 Solution Share Posted March 10, 2021 (edited) Add the following to Design > Custom CSS. /* begin change cart style SS Version : 7.1 */ #cart .empty-message, ._3qWE9VU-U /* subtotal label */ { text-transform : lowercase; } ._3qWE9VU-U, /* subtotal label */ ._2JFeDgZcv, /* subtotal amount */ .item-price, .item-quantity input, ._1MDgZZPKX a /* item title */ { font-size : 14px !important; } /* end change cart style */ This is for v7.1. Let us know how it goes. Edited March 19, 2021 by creedon version 2, post 20210316 SS cart update yasminva 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 10, 2021 Author Share Posted March 10, 2021 49 minutes ago, creedon said: Add the following to Design > Custom CSS. /* begin change cart style SS Version : 7.1 */ #cart .empty-message, .CartTable-subtotalLabel-3qWE9 { text-transform : lowercase; } .CartTable-subtotalLabel-3qWE9, .CartTable-subtotalPrice-2JFeD, .CartTableRow-itemPrice-26eXS, .CartTableRow-itemQuantity-LwuRx input, .CartTableRow-itemTitle-1MDgZ a { font-size : 14px; } /* begin change cart style */ This is for v7.1. Let us know how it goes. hey, so the lowercase bit worked but the font size hasn't thank you for helping me with all of this Link to comment
creedon Posted March 10, 2021 Share Posted March 10, 2021 I've updated my previous code post. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 11, 2021 Author Share Posted March 11, 2021 (edited) 23 hours ago, creedon said: I've updated my previous code post. thank you so much for helping! is it possible to add this background to the dropdown menu on the mobile version? and how to make the word 'store' on the store page on the mobile version centered as it is on the left side at the moment Edited March 11, 2021 by yasminva Link to comment
creedon Posted March 11, 2021 Share Posted March 11, 2021 Quote possible to add this background to the dropdown menu on the mobile version? Add the following to Design > Custom CSS. body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' ); } Let us know how it goes. yasminva and tuanphan 2 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 12, 2021 Author Share Posted March 12, 2021 13 hours ago, creedon said: Add the following to Design > Custom CSS. body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' ); } Let us know how it goes. thank you that worked! Link to comment
msdema Posted March 15, 2021 Share Posted March 15, 2021 On 3/9/2021 at 6:01 PM, creedon said: Add the following to Design > Custom CSS. #cart { background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' ); } This is for v7.1. SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know. Let us know how it goes. is there any way to do these things for 7.0 websites (Brine in particular)? Link to comment
creedon Posted March 15, 2021 Share Posted March 15, 2021 1 hour ago, msdema said: is there any way to do these things for 7.0 websites (Brine in particular)? Please post the URL for your site and describe which pages you want a background image on. We also need to have the URL for the background image(s) that you want to use. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
msdema Posted March 15, 2021 Share Posted March 15, 2021 57 minutes ago, creedon said: Please post the URL for your site and describe which pages you want a background image on. We also need to have the URL for the background image(s) that you want to use. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. thank you so much! the website is www.mimiceramics.com (it's public) i'm hoping to take the background from my makeshift "cover page", and have that as the background for products page, product details pages, about, etc etc. instead of a solid color. thank you! Link to comment
creedon Posted March 15, 2021 Share Posted March 15, 2021 @msdema Add the following to Design > Custom CSS. .Main-content { background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png ); } This for v7.0 using the Brine template family. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
msdema Posted March 15, 2021 Share Posted March 15, 2021 7 minutes ago, creedon said: @msdema Add the following to Design > Custom CSS. .Main-content { background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png ); } This for v7.0 using the Brine template family. Let us know how it goes. dang i tried that but it's not bleeding all the way up and down behind the footer and header. i think it might have something to do with the other css i've put in there. i'll keep trying! another quick Q: i used css to make my header fixed and have a mix-blend-mode, but it's not working on product details pages. is that a css fix and where would i put it? thanks again!! Link to comment
creedon Posted March 15, 2021 Share Posted March 15, 2021 (edited) On 3/15/2021 at 1:14 PM, msdema said: dang i tried that but it's not bleeding all the way up and down behind the footer and header. Right. I assumed that since you had a header and footer background image I just went after the bit in the middle. So it sounds like what you want is something like a background image on the body tag. Get rid of, comment out, the other CSS effects for head, main, footer areas. Let's get one thing fixed and then move onto the next. Edited March 23, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
msdema Posted March 17, 2021 Share Posted March 17, 2021 On 3/15/2021 at 1:51 PM, creedon said: Right. I assumed that since you had a header and footer background image I just went after the bit in the middle. So it sound like what you want is something like a background image on the body tag. Get rid of, comment out, the other CSS effects for head, main, footer areas. Let's get one thing fixed and then move onto the next. ok awesome, it's all commented out. if you need to look at the website i put it in private mode and the password is 1234 i plugged in the css for the full background, but it's not bleeding to the top/bottom. am i still able to have a header with the logo and such, but a transparent background? i had code for a custom user icon, cart, and making the header fixed and with a difference mix-blend-mode. thank you again! Link to comment
creedon Posted March 17, 2021 Share Posted March 17, 2021 @msdema Here is a start on putting a background image on the body tag. body { background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png ); background-repeat : no-repeat; background-size : cover; } #new-page, .Header--bottom, .Intro, .Main { background-color : unset; } Now this doesn't look good on contact and about because those pages have images that have been added through the SS interface. Remove those images and I think those pages will be OK. If not we can probably add more CSS to take care of them. Let us know how it goes. msdema 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
msdema Posted March 17, 2021 Share Posted March 17, 2021 amazing thank you, that worked! i did just what you said, took all the coding out and then added things back one at a time. and then got rid of the things that didn't work or messed up the page. and now it looks great to me 🙂 i appreciate it so much! creedon 1 Link to comment
yasminva Posted March 19, 2021 Author Share Posted March 19, 2021 On 3/10/2021 at 7:44 PM, creedon said: Add the following to Design > Custom CSS. /* begin change cart style SS Version : 7.1 */ #cart .empty-message, .CartTable-subtotalLabel-3qWE9 { text-transform : lowercase; } .CartTable-subtotalLabel-3qWE9, .CartTable-subtotalPrice-2JFeD, .CartTableRow-itemPrice-26eXS, .CartTableRow-itemQuantity-LwuRx input, .CartTableRow-itemTitle-1MDgZ a { font-size : 14px !important; } /* begin change cart style */ This is for v7.1. Let us know how it goes. hey, this has seemed to stop working on desktop, any way to fix it? Link to comment
creedon Posted March 19, 2021 Share Posted March 19, 2021 Quote hey, this has seemed to stop working on desktop, any way to fix it? SS updated their cart code last Tuesday so this is why it broke. I have updated my code post for the cart style changes. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
yasminva Posted March 19, 2021 Author Share Posted March 19, 2021 44 minutes ago, creedon said: SS updated their cart code last Tuesday so this is why it broke. I have updated my code post for the cart style changes. Let us know how it goes. thank you very much! creedon 1 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