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

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

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
  • 0
Posted (edited)

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

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