tuanphan Posted April 14, 2021 Share Posted April 14, 2021 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
wehearyou Posted April 14, 2021 Share Posted April 14, 2021 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
CRCGIS Posted April 26, 2021 Share Posted April 26, 2021 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
creedon Posted April 27, 2021 Share Posted April 27, 2021 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
helzzzrich Posted May 25, 2021 Share Posted May 25, 2021 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 Link to comment
tuanphan Posted May 26, 2021 Share Posted May 26, 2021 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
creedon Posted May 26, 2021 Share Posted May 26, 2021 @helzzzrich It appears the home page is an Index page. When you are adding your CSS where are you adding it? 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
helzzzrich Posted June 9, 2021 Share Posted June 9, 2021 @creedon @tuanphan I have been adding the CSS on the design > custom CSS section Link to comment
creedon Posted June 9, 2021 Share Posted June 9, 2021 @helzzzrich Add the following. .Index-gallery-item-content-heading { font-size : 24px; font-weight : bold; } Let us know how it goes. tuanphan 1 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
saxatwork Posted July 14, 2021 Share Posted July 14, 2021 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
creedon Posted July 14, 2021 Share Posted July 14, 2021 @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. tuanphan 1 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
BFGS Posted July 22, 2021 Share Posted July 22, 2021 (edited) 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 want The success I've seen Edited July 22, 2021 by BFGS Link to comment
creedon Posted July 22, 2021 Share Posted July 22, 2021 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
BFGS Posted July 22, 2021 Share Posted July 22, 2021 @creedon Thank you for your reply! I never knew that about the stability of the blocks as it relates to the IDs. Really appreciate you passing this information along. I am still struggling to target the highest stable ID along with this particular image block. Would you be willing to take a look? Web address: https://grapefruit-dinosaur-rx7j.squarespace.com/clinical-supervision Password: changein2021 Link to comment
creedon Posted July 23, 2021 Share Posted July 23, 2021 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. BFGS 1 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
animasus Posted November 30, 2021 Share Posted November 30, 2021 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
creedon Posted November 30, 2021 Share Posted November 30, 2021 @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
animasus Posted November 30, 2021 Share Posted November 30, 2021 (edited) 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. Edited November 30, 2021 by animasus tagging Link to comment
creedon Posted November 30, 2021 Share Posted November 30, 2021 @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
animasus Posted November 30, 2021 Share Posted November 30, 2021 @creedon That fixed it, thank you so much! creedon 1 Link to comment
Subzero99 Posted December 2, 2021 Share Posted December 2, 2021 I encountered the same issue and managed to fix it by ensuring there's no space between the opening curly brace and the CSS selector. Sounds absurd but it worked for me. So instead of this: .slide-content { left: 50%; } Do this: .slide-content{ left: 50%; } Link to comment
creedon Posted December 2, 2021 Share Posted December 2, 2021 (edited) @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 January 19, 2022 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
HeavyArtillery Posted January 19, 2022 Share Posted January 19, 2022 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 Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 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 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; } 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
jensgeeftvorm Posted May 16, 2022 Share Posted May 16, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment