ChuckWard Posted February 8, 2020 Share Posted February 8, 2020 I made some light changes to backgrounds and text styling via custom CSS to get the layout rolling before deciding what, if any Js would be needed. I've noticed that upon reloading to the site, the custom CSS changed only load when I go back to the custom CSS menu. If I am in 'Pages' and select a page that has already been styled with a new background, the background does not load until I go back to the custom CSS details menu. Has anyone else experienced this? (I am a developer- albeit new to Square Space- so please don't tell me to hire one. I need to sort this out for future reference. I've looked at the console and do not see any buggy issues happening there). Thank you in advance for your time and energy. Cheers, Charlie RossR1 and mccall 2 Link to comment
MaryPhilip_ Posted February 13, 2020 Share Posted February 13, 2020 Hey @ChuckWard can you link to the site so that people can help troubleshoot? Hi 👋 I'm a Squarespace Expert Member, Circle Member & only Squarespace Authorised Trainer in Scotland. Check out my portfolio at Mary Philip. Hit the little 👍 if I've helped. Link to comment
RossR1 Posted February 17, 2020 Share Posted February 17, 2020 I'm having this issue as well. The changes appear when in the Custom CSS Editor, but don't go live when browsing. Link to comment
mccall Posted February 19, 2020 Share Posted February 19, 2020 This issue is happening with my site as well. When I enter into the CSS editor it gets applied but when I exit and actually view the site live, it doesn't. If you want to debug this issue you can check out the website at www.andreastolpe.com. Let me know if you need anything else. Here's a snippet of the custom CSS, attempting to target elements via specific classes, data attributes, and !important overrides: // global page styles // navigation dropdown .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: 100px; line-height: 28px; } .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper.black .header-nav-item--active .header-nav-folder-item a { background-color: rgba(0,0,0,0.6) !important; } .header-nav-folder-content { background-color: rgba(0,0,0,0.6) !important; color: #fff !important; } .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper.black div.header-nav-folder-content { background-color: rgba(0,0,0,0.6) !important; color: #fff !important; } Link to comment
paul2009 Posted February 19, 2020 Share Posted February 19, 2020 These are different issues. 12 minutes ago, mccall said: When I enter into the CSS editor it gets applied but when I exit and actually view the site live, it doesn't. If you want to debug this issue you can check out the website at www.andreastolpe.com. @mccall - you have syntax errors in your CSS that are preventing it from parsing (there's more CSS than shown above). Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
mccall Posted February 19, 2020 Share Posted February 19, 2020 2 minutes ago, paul2009 said: These are different issues. @mccall - you have syntax errors in your CSS that are preventing it from parsing (there's more CSS than shown above). great thanks for pointing this out (re: comment usage), i'm too used to using less and wanted to make my css readable for future developers. Link to comment
dfinc Posted February 25, 2020 Share Posted February 25, 2020 I am unable to affect the size of the titles on my Gallery Page and, on the advice of a helpful Squarespacer, I went down the CSS road, which is a bit unfamiliar to me. the code I'm trying to insert is: .sqs-gallery-block-slideshow .meta .meta-title { font-family: georgia; font-size: 99px; color: #000000; } but even when I crank the font-size up, nothing happens on the page. can someone please straighten me out? thanks Link to comment
inside_the_square Posted February 25, 2020 Share Posted February 25, 2020 Hey @dfinc! Sometimes you need to make sure a browser prioritizes your code over the main site styles file by telling it that your line is important... by literally adding the word !important 🙂 Try this version and let me know how it goes. Also, even though Georgia is a font available in Squarespace, that doesn't mean it's installed on your site! Make sure that font is actively installed from a selection in your site styles menu, or manually install it from Google; I have a tutorial on that here. .sqs-gallery-block-slideshow .meta .meta-title { font-family: georgia!important; font-size: 99px!important; color: #000000!important; } Hope all that helps! 🤓 Creator of InsideTheSquare.co ✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨ 🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap 🙋♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn ⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css Link to comment
dfinc Posted March 10, 2020 Share Posted March 10, 2020 Heya @inside_the_square. thanks for the supa quick reply - i only just saw it. i tried your code and used a font i have installed (Europa) and didn't see ANY change reflected . i'm pretty stumped: it's reverting to a default i can't seem to affect at all. any help appreciated. thanks. Link to comment
inside_the_square Posted March 10, 2020 Share Posted March 10, 2020 Hey @dfinc - that is super strange! So Europa is assigned to a different text type in your site styles menu but still not showing up for your meta? So strange! Can you send me a link to your site, and let me know what text type it is assigned to? I'll hop into your source code to see what name the system gave it so we can use it in that code. Feel free to DM me if you don't want to post the link publicly. 🤓 Creator of InsideTheSquare.co ✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨ 🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap 🙋♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn ⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css Link to comment
dfinc Posted March 10, 2020 Share Posted March 10, 2020 Heya @inside_the_square yes, Europa is assigned as body text in site styles but i'm still not able to affect gallery text. a good page to see the text i attempt to modify is: https://jonstaav.photo/advertising_2017 thanks! Link to comment
inside_the_square Posted March 10, 2020 Share Posted March 10, 2020 Oooooh I gotcha!! That link clears all this up - your not using a block gallery slideshow, your using a stacked slideshow! This is the code you're looking for: .sqs-system-gallery .slide-meta .title {font-family:Europa!important; font-size: 99px!important; color: #000000!important; } Give that one a try 👍👍 🤓 Creator of InsideTheSquare.co ✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨ 🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap 🙋♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn ⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css Link to comment
dfinc Posted March 11, 2020 Share Posted March 11, 2020 21 hours ago, inside_the_square said: "your not using a block gallery slideshow, your using a stacked slideshow!" i didn't even know!!! IT WORKED! thanks soooooo much! subscribed to your channel. excited to learn more ... inside_the_square 1 Link to comment
inside_the_square Posted March 11, 2020 Share Posted March 11, 2020 Yay!! So glad that did the trick 🥳 And thanks for subscribing! I am actually working on my tutorials for April right now, they are all focused on images because there are PLENTY of more random nuances like that to share 👍👍 Mack_Donna 1 🤓 Creator of InsideTheSquare.co ✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨ 🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap 🙋♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn ⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css Link to comment
Jdirks Posted May 26, 2020 Share Posted May 26, 2020 (edited) I'm having problems getting my custom font CSS to stay applied to my site.... The only way that it will reapply is by me going into the custom CSS menu in Design. Not sure if you can take a look at it and see what the heck is going on for me? That would be much appreciated! https://www.blsincusa.com/ Pass- 123456 Edited May 26, 2020 by Jdirks Link to comment
Mack_Donna Posted September 15, 2020 Share Posted September 15, 2020 @inside_the_square i am seeing the same exact issue. in my case, i am trying to use the custom CSS to insert an SVG version of my logo in the header. i'm sure my syntax or something is wrong as i'm not very experienced with CSS. it must be something simple. here's what i have: .site-title img { width: auto; height: auto; background-image: url(/s/Sentient_Logo_stacked-2.svg); } this was after trying lots of different versions without success. not it works on the CSS editor page, but not on the live site. Link to comment
Mack_Donna Posted September 15, 2020 Share Posted September 15, 2020 i figured it out - in my case, adding the full site URL fixed the problem (https://yada.yada.yada) Link to comment
johnhalldesign Posted February 20, 2021 Share Posted February 20, 2021 May be a related issue, but I am noticing that certain custom CSS doesn't work if you are logged in, but does work if your aren't. So I have to keep a second browser or incognito window open that isn't logged in to Squarespace to see what things look like to the average viewer who isn't logged in. Inscape 1 Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 On 2/20/2021 at 11:03 PM, johnhalldesign said: May be a related issue, but I am noticing that certain custom CSS doesn't work if you are logged in, but does work if your aren't. So I have to keep a second browser or incognito window open that isn't logged in to Squarespace to see what things look like to the average viewer who isn't logged in. Yes. some CSS work on editing mode only. EG. If you use CSS background image with this url format "/s/image.png" it won't work. >>> Need to change to fullurl. Something like this: yourdomain.com/s/image.png Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BarbieRays Posted March 18, 2021 Share Posted March 18, 2021 Agree to the above comments - something weird is going on with SS since the new styles manager. I am seeing CSS applied when design window opened but not when it is closed. Also, the color fonts are not saving in the new style manager. I've tried to save the same page literally 10X and it keeps going back to the old one. It is really starting to get frustrating. Inscape 1 Link to comment
24836259 Posted March 19, 2021 Share Posted March 19, 2021 I'm new to Squarespace, but it seems like I'm having a similar problem. My site was looking good in design mode, but once I published it, the CSS stopped working. Specifically, I had put some code in to hide the title page and shrink the background image when viewed on mobile. Now, both bits of code only work on the landing page and not on the info page. I'd really appreciate if someone could tell me where I'm going wrong. www.daviddearlove.co.uk Link to comment
tuanphan Posted March 22, 2021 Share Posted March 22, 2021 On 3/19/2021 at 5:50 AM, BarbieRays said: Agree to the above comments - something weird is going on with SS since the new styles manager. I am seeing CSS applied when design window opened but not when it is closed. Also, the color fonts are not saving in the new style manager. I've tried to save the same page literally 10X and it keeps going back to the old one. It is really starting to get frustrating. Hi. Which CSS code you added? Can you share link to your site? We can take a look On 3/19/2021 at 7:13 AM, 24836259 said: I'm new to Squarespace, but it seems like I'm having a similar problem. My site was looking good in design mode, but once I published it, the CSS stopped working. Specifically, I had put some code in to hide the title page and shrink the background image when viewed on mobile. Now, both bits of code only work on the landing page and not on the info page. I'd really appreciate if someone could tell me where I'm going wrong. www.daviddearlove.co.uk .homepage is class for Homepage only. Can you share link to info page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Pims Posted March 22, 2021 Share Posted March 22, 2021 I everyone ! I have the same trouble. CSS editor looks fine but on the real site, its not working. I was so proud to find the afiliate code myself 😭. It was supposed to work like that (img). Basically a responsive burger menu (bigger).https://gecko-glockenspiel-xfjj.squarespace.com/ pass:hello123 A good soul to help me ? /* Hide header button */ .header-nav-list { display: none; } /* show burger */ .header-burger { display: flex!important;} /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1!important; visibility: visible!important;} /* Space between top-bottom buns */ .burger-inner.header-menu-icon-doubleLineHamburger .top-bun { transform: translatey(-0.8vw)!important;} .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun { transform: translatey(0.8vw)!important;} /* Line Inactive burger */ .burger-box { width: 5vw!important; } /* Burger active rotation top */ .burger--active .burger-inner .top-bun { transform: translatex(3.5px) rotate(224deg)!important; width: 5vw!important; } /* Burger active rotation bottom */ .burger--active .burger-inner .bottom-bun { transform: translatex(3.5px) rotate(135deg)!important; width:5vw!important; } Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 3:48 PM, Pims said: I everyone ! I have the same trouble. CSS editor looks fine but on the real site, its not working. I was so proud to find the afiliate code myself 😭. It was supposed to work like that (img). Basically a responsive burger menu (bigger).https://gecko-glockenspiel-xfjj.squarespace.com/ pass:hello123 A good soul to help me ? /* Hide header button */ .header-nav-list { display: none; } /* show burger */ .header-burger { display: flex!important;} /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1!important; visibility: visible!important;} /* Space between top-bottom buns */ .burger-inner.header-menu-icon-doubleLineHamburger .top-bun { transform: translatey(-0.8vw)!important;} .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun { transform: translatey(0.8vw)!important;} /* Line Inactive burger */ .burger-box { width: 5vw!important; } /* Burger active rotation top */ .burger--active .burger-inner .top-bun { transform: translatex(3.5px) rotate(224deg)!important; width: 5vw!important; } /* Burger active rotation bottom */ .burger--active .burger-inner .bottom-bun { transform: translatex(3.5px) rotate(135deg)!important; width:5vw!important; } Hi. Do you still need help on this? We will check. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
wehearyou Posted April 13, 2021 Share Posted April 13, 2021 Site URL: https://dalmatian-beige-gyp8.squarespace.com password: why Hi! I recently opened a new treat but think it belongs here at second thought. I've got some color changes going on in css when hovering over a button, which works fine when in editing mode but gets ignored when viewing live. .sqs-block-image .image-block-outer-wrapper.design-layout-card .image-button a:hover{background-color:#ffa500 !important;} .sqs-block-image .image-block-outer-wrapper.design-layout-card .image-button a:hover {color:#FFFFFF !important;} .sqs-block-image .image-block-outer-wrapper.design-layout-card .image-button a:hover{border: 0,5px solid;} .sqs-block-image .image-block-outer-wrapper.design-layout-card .image-button a:hover{border-color:#FFFFFF00 !important;} .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button a:hover{background-color:#ffa500 !important;} .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button a:hover {color:#FFFFFF !important;} .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button a:hover{border: 0,5px solid;} .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button a:hover {border-color:#FFFFFF00 !important;} .form-wrapper input[type=submit]:hover { background-color: #ffa500!important; } .form-wrapper input[type=submit]:hover {color:#FFFFFF !important;} .form-wrapper input[type=submit]:hover{border: 0,5px solid;} .form-wrapper input[type=submit]:hover {border-color:#FFFFFF00 !important;} .button.sqs-system-button { font-weight: 600 !important; } It's about the border colors of every button, the transparant color (#FFFFFF00) gets ignored and I don't know what I'm doing wrong. Looks like some other part gets prioritized over it which seems to be likely cause i've got a lot of "!importants" going on but I don't know. Just getting into this btw, not experienced at all. There's more css going on above all of this which is: .image-overlay { background: transparent !important; } /* Align left homepage */ .homepage .image-title-wrapper * { text-align: left !important; } #block-yui_3_17_2_1_1617696228898_38030{ .sqs-widgets-audio-player .title-wrapper .title{color: white!important} .sqs-widgets-audio-player .action .play-button {border-left-color: white!important} .sqs-widgets-audio-player .action .pause{border-color: white!important} .sqs-widgets-audio-player .action {background:#ffa500!important} .sqs-widgets-audio-player .artistName {color: white!important} } #block-959bc4a27925d32831d7 { .sqs-widgets-audio-player .title-wrapper .title{color: white!important} .sqs-widgets-audio-player .action .play-button {border-left-color: white!important} .sqs-widgets-audio-player .action .pause{border-color: white!important} .sqs-widgets-audio-player .action {background:#ffa500!important} .sqs-widgets-audio-player .artistName {color: white!important} } #block-d45e19c80257ff6765eb { .sqs-widgets-audio-player .title-wrapper .title{color: white!important} .sqs-widgets-audio-player .action .play-button {border-left-color: white!important} .sqs-widgets-audio-player .action .pause{border-color: white!important} .sqs-widgets-audio-player .action {background:#ffa500!important} .sqs-widgets-audio-player .artistName {color: white!important} } .image-caption-wrapper { background: #black !important; opacity: 1 !important; } footer.sections * { text-decoration: none; background-image: none !important; } 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