Jump to content

Custom CSS not working

Recommended Posts

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 minutes ago, tuanphan said:

If the code work, what should it look like?

Hi! Thanks for responding, I actually sent you a direct message this morning. 

I mean every button, some buttons respond the correct way until I return to the homepage again, after that they show an outline again. The button(s) should turn completely orange: #ffa500 with white lettering and no outline or border color. 

This is what the code looks like at the moment:

/* CSS FOR MEDIUM BUTTON */
.sqs-block-button .sqs-block-button-element--medium:hover {
  background-color: #ffa500!important;//button color//
  color: #FFFFFF!important;}
.sqs-block-button .sqs-block-button-element--medium:hover 
{border-color: #FFFFFF00;}

/* CSS FOR ABOUT BUTTON */
.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;
}

/* CSS FOR HEAR US BUTTON */
.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;
}

/* CSS FOR CONTACT BUTTON */
.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;
}
.button.sqs-system-button {
               font-weight: 600 !important;
}

 

Like I said, I have some more code going on in media players etc.

 

Hope you can help! 

Link to comment
  • 2 weeks later...
On 2/19/2020 at 3:44 PM, mccall said:

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


 

 

Im having the same issue. When I am in the Custom CSS and Pages tab, the code works but when I refresh or go from another page back to the homepage the code stops working. So the code does work for all pages across my site BESIDES the home page.

My site is not live yet so I can't share that but here is the particular code regarding my buttons. There is much more code in my custom CSS but I don't think anything else would interfere. I have also tried using the code using the block ID's, page code injection, parsing them out using the button size code, everything that I could think of or seen others try. Nothing. Im completely stumped.

 

//Equal Button Widths
.sqs-block-button-element {width: 120px !important}

//Hover over buttons
.sqs-block-button-element:hover {border: 2px solid black; background-color: transparent; color: black !important}

Link to comment
11 hours ago, CRCGIS said:

My site is not live yet so I can't share that but here is the particular code regarding my buttons.

You don't have to publish your site for us to help you.

Please set up a site-wide password.

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 weeks later...
6 hours ago, helzzzrich said:

I'm having a similar issue with changing size and putting bold onto the titles on each of the images.

https://www.socialssense.com/content-creation

I have tried some of the codes mentioned above and the CSS doesn't seem to change or amend anything at all. Could anybody help with this please? Thank you

Hi. can you describe again your problem? We can check easier.

Thank you.

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
  • 2 weeks later...
  • 1 month later...

Guys, 

I have the same issue, and a bit stumped. All the CSS changes work, except for this - 

@media screen and (max-width: 767px){
   .sqs-gallery-design-list .sqs-gallery-meta-container {
       width: auto !important;
   }
}

This works when the CSS editor is open, but when I close the editor and refresh the page, the width goes to 65%.

This is a screenshot of the page with and without the editor open. https://nimb.ws/cX1I2V

Any help is appreciated. The entire custom CSS that we've used is here: https://pastebin.pl/view/f58a3ae6

Many Thanks,
Sax.

Link to comment

@saxatwork

Please post the URL for your site.

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I believe I am having the same issue, it's very strange.

I am attempting to get an image blog to be flush with the right side of its section.

I have inspected the page and when I attempt to target the image itself by ID with the image-block-wrapper, it just disappears from the page but is still picked up on the inspect tool as being in the correct place.

Finally got the effect I'm looking for to work by targeting the content wrapper. I save my work and it looks great. As soon as I leave the page and go back, the customization is reverted despite the code still being present in my CSS editor.

It also appears that the content wrapper ID keeps changing? I've targeted three different IDs in trying to resolve this problem and they're all worked until I navigate away from the page.

PLEASE help!

 

// started here 

div#yui_3_17_2_1_1626969021446_287.content-wrapper {
  padding-bottom: 0px !important;
    padding-right: 0px !important;
  	padding-top: 0px !important;
}

// added this after I navigated away and the above code was no longer working

div#yui_3_17_2_1_1626982445081_287.content-wrapper {
   	padding-bottom: 0px !important;
    padding-right: 0px !important;
  	padding-top: 0px !important;
}

// added this after I navigated away and the above code was no longer working

div#yui_3_17_2_1_1626967567153_307.content-wrapper {
  	padding-bottom: 0px !important;
    padding-right: 0px !important;
  	padding-top: 0px !important;
}

 

What I don't want2083331051_ScreenShot2021-07-22at9_40_42AM.thumb.png.3b0c49334c5439531d895bc651700edc.png

The success I've seen

45379794_ScreenShot2021-07-22at2_36_14PM.thumb.png.39f6a00e6ab70fa58506978a2b302556.png

Edited by BFGS
Link to comment
2 hours ago, BFGS said:

It also appears that the content wrapper ID keeps changing? I've targeted three different IDs in trying to resolve this problem and they're all worked until I navigate away from the page.

Please see the following.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
2 hours ago, BFGS said:

I am still struggling to target the highest stable ID along with this particular image block. Would you be willing to take a look?

I took a look but I'm not seeing a good solution at this time.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...

Hey there! This is also happening to me.

First off, I'm not a developer, just a web designer trying to expand into coding. My live site was displaying everything just fine the other day, but then I tried playing with some more code (including adding to the code injection area) and it broke. Now it's only displaying the changes in the editor, not the live site. The site is https://www.animasus.com/

If someone could please help me, I would greatly appreciate it! 🙂

Link to comment

@animasus

Please post some pics of how it looks in the editor and the live site. At this point we know there is a problem but you need to explain in more detail what elements of your page you are trying to change so we know where to look.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 minutes ago, creedon said:

@animasus

Please post some pics of how it looks in the editor and the live site. At this point we know there is a problem but you need to explain in more detail what elements of your page you are trying to change so we know where to look.

@creedon

Thank you for the speedy reply!

The first two screenshots are what it looks like in the editor. Everything is broken– the font treatments, page margins, etc. It's like the live site is completely ignoring all of the custom css.

Screen Shot 2021-11-30 at 10.18.55 AM.png

Screen Shot 2021-11-30 at 10.19.20 AM.png

Screen Shot 2021-11-30 at 10.19.31 AM.png

Edited by animasus
tagging
Link to comment

@animasus

Ah ha!. I see the issue now. There is an error in your Custom CSS! Here is the error message.

_______ _______ _______ _______ __ | || || || || | | _ || _ || _ || _____|| | | | | || | | || |_| || |_____ | | | |_| || |_| || ___||_____ ||__| | || || | _____| | __ |_______||_______||___| |_______||__| Line Statement ------------------------------- site custom less: 1 .marquee {
    site custom less:320 --move-initial: calc((-25% + var(--offset))) ExecuteError INVALID_OPERATION1: Operation + cannot be applied to DIMENSION

Sometimes the editor will be able to bypass an error and carry on while the live site blows up as you've seen.

I suggest removing or commenting out the problematic ruleset until you can figure out what the issue is.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@Subzero99

CSS is not a space sensitive language, for the most part. I suspect what your issue may have been was a non-printing character where there appeared to be a space.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

I am having a similar problem with change showing when the CSS editor is live, but not on the actual page. I am trying to customize a button so it is just text, no outline or background, and no background color on hover or click. It works great when the editor is live but otherwise it still flashes a white background on hover/click: 

This is the code I have added to the Design/Custom CSS editor:
 

.sqs-block-button .sqs-block-button-element--large {
   border: 0;
   color: black;
   }

.sqs-block-button .sqs-block-button-element--large:hover {
 background-color: #ffffff00!important;
      opacity: 1 !important;
   color: #fefefe !important;
   
}

.sqs-block-button .sqs-block-button-element--large {
   padding: 4rem !important;
      }

If anyone could advise what I did wrong I would really appreciate it. If it helps to check it out on the site you can check it out here. The very first section has one of the buttons with the issue ("Oculus Quest 2").

https://dogfish-rhubarb-3kts.squarespace.com/

password:  havealook

Thanks!
Brett

Hover_Editor_Active.jpg

Hover_Editor_Closed.jpg

Link to comment
On 1/19/2022 at 11:41 AM, HeavyArtillery said:

I am having a similar problem with change showing when the CSS editor is live, but not on the actual page. I am trying to customize a button so it is just text, no outline or background, and no background color on hover or click. It works great when the editor is live but otherwise it still flashes a white background on hover/click: 

This is the code I have added to the Design/Custom CSS editor:
 

.sqs-block-button .sqs-block-button-element--large {
   border: 0;
   color: black;
   }

.sqs-block-button .sqs-block-button-element--large:hover {
 background-color: #ffffff00!important;
      opacity: 1 !important;
   color: #fefefe !important;
   
}

.sqs-block-button .sqs-block-button-element--large {
   padding: 4rem !important;
      }

If anyone could advise what I did wrong I would really appreciate it. If it helps to check it out on the site you can check it out here. The very first section has one of the buttons with the issue ("Oculus Quest 2").

https://dogfish-rhubarb-3kts.squarespace.com/

password:  havealook

Thanks!
Brett

Hover_Editor_Active.jpg

Hover_Editor_Closed.jpg

 your code conflict together

try this new code

.sqs-block-button .sqs-block-button-element--large {
    border: 0 !important;
    color: #000 !important;
}

.sqs-block-button .sqs-block-button-element--large:hover {
    background-color: #fff !important;
    opacity: 1 !important;
    color: black !important
}

.sqs-block-button .sqs-block-button-element--large {
    padding: 4rem !important;
}

image.thumb.png.b8a94b69c7210564af388e5007e1355d.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
  • 3 months later...

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

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.