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


Site URL: http://www.qualitycupofcoffee.com/english

Hello everyone !

Hope everyone had a great weekend. Stressing Sunday evening for me, trying to finish up my website. My website is available in English & French ( www.qualitycupofcoffee.com ). The english version in my primary navigation and the french one in the secondary navigation. I did not use a translation plugin as both sites are offering different services & courses depending on the local & international market.

Short story long, I did a LOT of custom CSS DYI and I to do it x2 most of the time. Last night, I got a warning message telling me I reached the maximum CSS coding capacity. I was wondering if there is a way to code that could target several #block using the same animation effect for instance :

The floating effect :
 I insert this code ONCE 


//*Floating effect image*//
@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    

and then each time I target my block image I imput the following code ...

/*footer float image*/

    animation-name: floating;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1593882225546_4979 {
   display: none;

... and I have repeated this over and over. Is there a way I could target ALL my block using the same effect and then add the effect ?


It might sound like a stupid question but I've never sit down & properly learnt coding. Last night made me realize that MAYBE I could lighten up a bit in terms of coding and it would be good for my website overall. I have repeated a lot of similar code to target different sections each time. It would be really helpful if I can remove some of my CSS lines as I am looking to create few more pages or do some new DIY coding tweak for my upcoming blog & newsletter. 

Let me know what you think,

PS: That could also be a reason why my top banners take a little of time to load despite having a fall back image, same issue on cellphone. I can see a "blank" section still showing instead of loading my fall back image. Too heavy on the CSS?


Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

I am pretty sure you can use this trick to add more css via a .css file.

Not the easiest to edit that way though. I would recommend putting the css that you already finished in a file, and use the editor to add more than you are working on.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post

Link to post
  • 0

Haaaa ! That's actually very clever, I remember following a tutorial that was uploading javascrip & css as a file ! I might have to take a look how I can do that on my scale !

That would be brilliant if I can file & upload all my css, thanks !

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