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

Custom CSS not working

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

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 1

I'm having this issue as well.

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

Share this post


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


 

 

Share this post


Link to post
  • 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).


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the middle of June 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

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.

Screen Shot 2020-03-10 at 1.33.28 PM.png

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


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

 

Share this post


Link to post
  • 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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...