Custom CSS not working

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

Hey @ChuckWard can you link to the site so that people can help troubleshoot?

I'm having this issue as well.

The changes appear when in the Custom CSS Editor, but don't go live when browsing.

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;
}

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

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.

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

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!

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.

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. 

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!

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

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

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

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

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

i figured it out - in my case, adding the full site URL fixed the problem (https://yada.yada.yada)

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.

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

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. 

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

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?

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;
}

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.

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;
}