Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Custom CSS not working


ChuckWard

Question

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

Link to comment

Recommended Posts

  • 0

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
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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
  • 0

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

Screen Shot 2020-02-25 at 12.44.40 PM.png

Screen Shot 2020-02-25 at 12.44.03 PM.png

WESTtemplate_BRINEfamily.png

Link to comment
  • 0

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!

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0

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. 

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0

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

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0

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

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0

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

 

screenshot-cone-chicory-e2gm.squarespace.com-2020.05.26-10_17_10.png

FontCSS.png

Edited by Jdirks
Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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. 

Link to comment
  • 0

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

Screenshot 2021-03-19 at 00.09.27.png

Link to comment
  • 0
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

Screenshot 2021-03-19 at 00.09.27.png

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Capture d’écran 2021-03-22 à 09.44.01.png

Capture d’écran 2021-03-22 à 09.43.38.png

Link to comment
  • 0
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;
}

 

Capture d’écran 2021-03-22 à 09.44.01.png

Capture d’écran 2021-03-22 à 09.43.38.png

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0
On 4/13/2021 at 2:22 PM, wehearyou said:

 

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

You mean about button?

If the code work, what should it look like?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...