Custom CSS not working

On 5/17/2022 at 3:21 AM, jensgeeftvorm said:

I have the same problem. The changes are showing when I'm working in the CSS editor but as soon as I leave this page all the changes are lost.

Can someone help me with this problem? 🙂

www.forform.be
pw: 123

Below you can find the code:

@font-face {
font-family: plain-medium;
src: url(https://static1.squarespace.com/static/6251aeee5ec6e140671e82be/t/6251b0e61adbad6fef4666b1/1649520870266/Plain-Medium.otf);
}
@font-face {
font-family: plain-regular;
src: url(https://static1.squarespace.com/static/6251aeee5ec6e140671e82be/t/6251b0ed68c2862301243f5d/1649520877399/Plain-Regular.otf);
}
h1 {
font-family: 'plain-medium';
}
.header-nav *, nav.header-menu-nav-list * {
    font-family: plain-regular
      ;
}

h2 {
font-family: 'plain-medium'!important;
}

h3 {
font-family: 'plain-medium'!important;
}

h4 {
font-family: 'plain-medium'!important;
}

.sqsrte-large {
font-family: 'plain-regular'!important;
}

p {
font-family: 'plain-regular'!important;
}
p.gallery-caption-content {
    font-family: 'plain-regular' !important;
}
.sqsrte-small {
font-family: 'plain-regular';
}
.header-title-text {
  font-family:'plain-medium';
	font-size: 50px !important;
}
/* Nav item color */
.header-nav-item a {
    color: #112995 !important;
    transition-duration: 0.4s;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #ff0000 !important;
    transition-duration: 0.2s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #112995 !important;
}
/*Hover*/
.gallery-grid-item 
img:hover{filter:opacity(75%)!important; transition:0,5s})

 

First, change this

.header-nav *, nav.header-menu-nav-list * {
    font-family: plain-regular
      ;
}

to this

.header-nav *, nav.header-menu-nav-list * {
    font-family: plain-regular;
}

Next, change this

/*Hover*/
.gallery-grid-item 
img:hover{filter:opacity(75%)!important; transition:0,5s})

to this

/*Hover*/
.gallery-grid-item img:hover {
  filter:opacity(75%) !important; 
  transition: 0.5s;
}

Hello,

I have spent many hours trying to figure out this issue on my site as well. 

All I'm trying to do is add custom HTML social media icons to my site. I'm creating a "gallery" of sorts in which each business featured will need to have social media icons, so I can't use the built-in icons since the changes to the links are applied site-wide.

When in editing mode with the CSS window open, the social icons appear appropriately and the rollover function works as intended. The first image shows how it looks in the editor with my cursor over the Facebook icon. The second image shows how it looks on the live site with the cursor in the same position.

I have basically 0 coding experience, and I've tried a lot of different things to get this to work with no success. If anyone could provide assistance, that would be very much appreciated!

Below, I have pasted the HTML that is inserted on the page:

<align-left>    
<ul class="social-icons">
        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
        
    </ul>
</div>

And, here I have pasted the CSS that I am using in the Custom CSS editor:

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
    font-family: 'Lato', sans-serif;
    color: #FFF;
    background: #ffff;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: #fff;
}
p > a:hover{
    color: #ffff;
    text-decoration:  underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:  1% 0 1% 0;
}
._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #ffff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #333333;
    text-decoration: none;
}
.social-icons a:hover {
    color: #ffff;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-instagram {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-instagram:hover {
    background-color: #F56040
;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-github {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-github:hover {
    background-color: #5a32a3;
}

13 minutes ago, RedzRAGE said:

Hello,

I have spent many hours trying to figure out this issue on my site as well. 

All I'm trying to do is add custom HTML social media icons to my site. I'm creating a "gallery" of sorts in which each business featured will need to have social media icons, so I can't use the built-in icons since the changes to the links are applied site-wide.

When in editing mode with the CSS window open, the social icons appear appropriately and the rollover function works as intended. The first image shows how it looks in the editor with my cursor over the Facebook icon. The second image shows how it looks on the live site with the cursor in the same position.

I have basically 0 coding experience, and I've tried a lot of different things to get this to work with no success. If anyone could provide assistance, that would be very much appreciated!

Below, I have pasted the HTML that is inserted on the page:

<align-left>    
<ul class="social-icons">
        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
        
    </ul>
</div>

 

And, here I have pasted the CSS that I am using in the Custom CSS editor:

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
    font-family: 'Lato', sans-serif;
    color: #FFF;
    background: #ffff;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: #fff;
}
p > a:hover{
    color: #ffff;
    text-decoration:  underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:  1% 0 1% 0;
}
._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #ffff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #333333;
    text-decoration: none;
}
.social-icons a:hover {
    color: #ffff;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-instagram {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #ffff;
}
.fa-instagram:hover {
    background-color: #F56040
;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-github {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-github:hover {
    background-color: #5a32a3;
 

Forgot to add the second image in my original post

10 hours ago, RedzRAGE said:

Forgot to add the second image in my original post

Remove this code

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

and add this code to SETTINGS > ADVANCED > CODE INJECTION > HEADER
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Hello all!! Thank you for all the tidbits, for whatever reason.. I CANNOT get my images, or quote text to resize on the mobile version of my text. I have tried every bit of code offered up on the internet. I am using "Clay" within the brine family. I just tried this, for the umpteenth time-

@media screen and (max-width: 640px) {
  font-sizepx

It will NOT work!! Same goes for my carousel images. PLEASE HELP

www.raynerenz.com 

On 2/18/2023 at 1:23 AM, R_Rayne2023 said:

Hello all!! Thank you for all the tidbits, for whatever reason.. I CANNOT get my images, or quote text to resize on the mobile version of my text. I have tried every bit of code offered up on the internet. I am using "Clay" within the brine family. I just tried this, for the umpteenth time-

@media screen and (max-width: 640px) {
  font-sizepx

It will NOT work!! Same goes for my carousel images. PLEASE HELP

www.raynerenz.com 

The site is expired. You can access this link to extend it then we can check your problem easier

I am having an issue where my CSS to customize form field backgrounds suddenly stopped working. This is the code that I'm using:

.form-wrapper .field-list .field .field-element {
  border: none !important;
  background-color: #FCF0EE !important;
}

It was working at first, and then today just stopped. Here's my site preview link if anyone can help!

https://grouper-goose-bxne.squarespace.com/contact
PW: ideaspace

2 hours ago, deannar11 said:

I am having an issue where my CSS to customize form field backgrounds suddenly stopped working.

This is because SS recently updated how form blocks work.

On 5/5/2023 at 12:48 AM, deannar11 said:

I am having an issue where my CSS to customize form field backgrounds suddenly stopped working. This is the code that I'm using:

.form-wrapper .field-list .field .field-element {
  border: none !important;
  background-color: #FCF0EE !important;
}

It was working at first, and then today just stopped. Here's my site preview link if anyone can help!

https://grouper-goose-bxne.squarespace.com/contact
PW: ideaspace

You can follow this post to enable code

https://forum.squarespace.com/topic/199760-aligning-form-input-boxes-and-button-next-to-each-other/

Hi, 

I'm having the same issue that others here have mentioned: I've used Custom CSS in the past to hide blocks on the site, and when I use the same code it appears to work (blocked sections are greyed out as they were in the past) but on the live site they're still visible.

Grateful if anyone knows how to fix this!

This is the current page (with custom CSS not working...): https://www.roottherapymaine.com/heart-openers-portal

I've pasted:

section[data-section-id="62b0f32172a27e63d09768ae"]

body:not(.sqs-edit-mode) section[data-section-id="62b0f32172a27e63d09768ae"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b0f32172a27e63d09768ae"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b3899fc8a30f59ceb9abe7"]

body:not(.sqs-edit-mode) section[data-section-id="62b3899fc8a30f59ceb9abe7"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b3899fc8a30f59ceb9abe7"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b60cd3dd39312a469662a5"]

body:not(.sqs-edit-mode) section[data-section-id="62b60cd3dd39312a469662a5"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b60cd3dd39312a469662a5"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b8a29fa45698400f54edfd"]

body:not(.sqs-edit-mode) section[data-section-id="62b8a29fa45698400f54edfd"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b8a29fa45698400f54edfd"] {
  opacity: 0.5 !important;
}

section[data-section-id="62bb30830de0853d553c6874"]

body:not(.sqs-edit-mode) section[data-section-id="62bb30830de0853d553c6874"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62bb30830de0853d553c6874"] {
  opacity: 0.5 !important;
}

section[data-section-id="62bdf92eee84821b92ecbb2d"]

body:not(.sqs-edit-mode) section[data-section-id="62bdf92eee84821b92ecbb2d"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62bdf92eee84821b92ecbb2d"] {
  opacity: 0.5 !important;
}

section[data-section-id="62c0557cdbc9513b65088f02"]

body:not(.sqs-edit-mode) section[data-section-id="62c0557cdbc9513b65088f02"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62c0557cdbc9513b65088f02"] {
  opacity: 0.5 !important;
}

body:not(.sqs-edit-mode) section[data-section-id="605b39e0aac015167e3500e1"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="605b39e0aac015167e3500e1"] {
  opacity: 0.5 !important;
}
body:not(.sqs-edit-mode) section[data-section-id="605b80352036e87ab230950e"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.sqs-edit-mode section[data-section-id="605b80352036e87ab230950e"] {
  opacity: 0.5 !important;
}

body:not(.sqs-edit-mode) section[data-section-id="605b3d5d4536522577af1d9b"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="605b3d5d4536522577af1d9b"] {
  opacity: 0.5 !important;
}

On 1/24/2024 at 6:16 AM, roottherapymaine said:

Hi, 

I'm having the same issue that others here have mentioned: I've used Custom CSS in the past to hide blocks on the site, and when I use the same code it appears to work (blocked sections are greyed out as they were in the past) but on the live site they're still visible.

Grateful if anyone knows how to fix this!

This is the current page (with custom CSS not working...): https://www.roottherapymaine.com/heart-openers-portal

I've pasted:

section[data-section-id="62b0f32172a27e63d09768ae"]

body:not(.sqs-edit-mode) section[data-section-id="62b0f32172a27e63d09768ae"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b0f32172a27e63d09768ae"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b3899fc8a30f59ceb9abe7"]

body:not(.sqs-edit-mode) section[data-section-id="62b3899fc8a30f59ceb9abe7"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b3899fc8a30f59ceb9abe7"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b60cd3dd39312a469662a5"]

body:not(.sqs-edit-mode) section[data-section-id="62b60cd3dd39312a469662a5"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b60cd3dd39312a469662a5"] {
  opacity: 0.5 !important;
}

section[data-section-id="62b8a29fa45698400f54edfd"]

body:not(.sqs-edit-mode) section[data-section-id="62b8a29fa45698400f54edfd"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62b8a29fa45698400f54edfd"] {
  opacity: 0.5 !important;
}

section[data-section-id="62bb30830de0853d553c6874"]

body:not(.sqs-edit-mode) section[data-section-id="62bb30830de0853d553c6874"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62bb30830de0853d553c6874"] {
  opacity: 0.5 !important;
}

section[data-section-id="62bdf92eee84821b92ecbb2d"]

body:not(.sqs-edit-mode) section[data-section-id="62bdf92eee84821b92ecbb2d"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62bdf92eee84821b92ecbb2d"] {
  opacity: 0.5 !important;
}

section[data-section-id="62c0557cdbc9513b65088f02"]

body:not(.sqs-edit-mode) section[data-section-id="62c0557cdbc9513b65088f02"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="62c0557cdbc9513b65088f02"] {
  opacity: 0.5 !important;
}

body:not(.sqs-edit-mode) section[data-section-id="605b39e0aac015167e3500e1"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="605b39e0aac015167e3500e1"] {
  opacity: 0.5 !important;
}
body:not(.sqs-edit-mode) section[data-section-id="605b80352036e87ab230950e"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.sqs-edit-mode section[data-section-id="605b80352036e87ab230950e"] {
  opacity: 0.5 !important;
}

body:not(.sqs-edit-mode) section[data-section-id="605b3d5d4536522577af1d9b"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="605b3d5d4536522577af1d9b"] {
  opacity: 0.5 !important;
}

 

I think you added wrong code somewhere, so browser render a different code (screenshot)

(red id doesn't exists)

Can you paste all current code in CSS box? We can check easier

Click this icon then paste the code