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

dimsk

Circle Member
  • Content Count

    632
  • Joined

  • Last visited

Everything posted by dimsk

  1. Hey, this added in Design > Custom CSS should do the trick: .index:last-child a{ background: #000; border-radius:10px; color: #FFF !important; } .index:last-child a:hover{ opacity:0.7; } Hope that helps
  2. Hey, Figured someone else may look for this, if you add jQuery to the footer Code Injection: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> You can then add a Code Block to the page with the Grid Gallery Block (images need to be on a Gallery Page) and then in the code below, update the /collections part in $.getJSON("/collections?format=json", function(result){ with the URL slug of the Gallery Page it is pulling from. <script>$(document).ready(function(){ $.getJSON("/collections?format=json", function(result){ console.log(result.items); $.each(result.items, function(i, field){ $(".image-slide-title").eq(i).parent().append('<div class="grid-description">' +result.items[i].body + "</div>"); }); }); }); </script> CSS wise, the description is controlled by the class .grid-description Hope this helps someone else!
  3. Not sure if anyone else is looking for this, but thought I'd share. Not an ideal solution as it goes outside of margins to avoid having to remove padding and margins from all blocks. The values of the margins will need to be edited to fit your site but the following should give people a starting position. On my end I was using the Carousel design: //desktop @media (min-width:961px) { .instagram-block{ padding-left:0px !important; padding-right:0px !important; //margin-left:-40px !important; //margin-right:-40px !important; width:100vw !important; left:0% !important; margin-left:-168px !important; } } //tablet @media (max-width:960px){ .instagram-block{ padding-left:0px !important; padding-right:0px !important; width:100vw ; left:0% !important; margin-left:-17px !important; } } //mobile @media (max-width:640px) { .instagram-block{ padding-left:0px !important; padding-right:0px !important; width:100vw ; left:0% !important; margin-left:-3px !important; } } Hope this helps someone!
  4. Hey This depends a bit what type of field you are using. For the usual phone number and number field, add this into the footer Code Injection <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('.three-digits .field-element').attr("type", "number"); $('.number .field-element').attr("type", "number"); </script> Hope that helps someone!
  5. Sure @lanabe , the footer is the same on mobile, but add in a .Mobile-bar for the mobile header: <style> .Header, .Footer, .Mobile-bar{ display:none !important; } </style> Hope that helps
  6. Hey @hollyo Brine uses different IDs and Classes than other templates. In the Case of the header and footer it uses classes. You can simplify your code down a bit with just: <style> .Header, .Footer{ display:none !important; } </style> With the style tags it is designed to go into individual per page Code Injection @MrFrog @lanabe try disabling ajax loading if your site appears correctly after reloading the page. Hope that helps :)
  7. Hi @petibalt Paul2009 has a great answer for this here: https://answers.squarespace.com/questions/176452/change-display-of-price-when-item-is-000.html Hope that helps!
  8. Hey Jack, For this with jQuery you can update the /home/ to the URL slug you want it to lead to. Add this code into the footer Code Injection in Settings > Advanced > Code Injection <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('a[href="/"]').attr("href", "/home/"); </script> Hope that helps!
  9. Hey, You can target the bottom header separately: .Header-inner--bottom { border-bottom: 5px solid red; } .Header { border-bottom: 5px solid #b0b579; } Hope that helps!
  10. Hey @lesley I'd say the easiest would be to use CSS to style the Read More link in that way. For example something like: .summary-read-more-link{ background-color: #000; color: #fff; width: 40%; border-radius: 4px; padding: 5px; } .summary-read-more-link:hover{ opacity: 0.7; } Hope that helps! Edit: was just thinking after since the layouts vary so much, you may want to be specific to blocks the classes are: .summary-block-setting-design-carousel - Carousel layout.summary-block-setting-design-autogrid - Grid layout.summary-block-setting-design-list - List Layout.summary-block-setting-design-autocolumns - Wall layout You can then add these at the from of the code to only effect for example the list layout: .summary-block-setting-design-list .summary-read-more-link{ background-color: #000; color: #fff; width: 15% !important; border-radius: 4px; padding: 5px; } .summary-block-setting-design-list .summary-read-more-link:hover{ opacity: 0.7; }
  11. Hey, I know the question is a bit old but it does come up quite often. For this it is best to use Google's built-in option to create an iframe: File > Publish to the Web > choose the Embed option and copy the code. This will give you a code that looks like this: <iframe src="https://docs.google.com/a/....../pubhtml?widget=true&headers=false"></iframe> This won't look great with the automatic height and width so you can add these in: <iframe width="100%" height="500px" src="https://docs.google.com/a/.../pubhtml?widget=true&headers=false"></iframe> Hope this helps someone else!
  12. Hey @atthomas If you add the following code into Design > Custom CSS you should get single spacing: .sqs-block-content li { line-height: 1em; } the em value is a proportional value, so if you want more spacing you should go up in fairly low increments (same with going down) for example 0.4 would probably overlap each other on mobile. Hope that helps!
  13. Hey! Can't seem to find figure it out for keeping it on the active link. With the following in Custom CSS you should be able to get started though: /* This part is important so that the links don't jump around*/ //you should add in the navigation class on this line so that it doesn't affect all links a::before { content: ' '; height: 24px; border-left: solid 2px #ffffff; display: block; margin-left: calc(48%); margin-bottom: 15px; opacity: 0; transition: opacity 0.14s ease-in-out; } /*This is the actual hover effect*/ //you should add in the navigation class on this line so that it doesn't affect all links a:hover:before { content: ' '; height: 24px; border-left: solid 2px #ffffff; display: block; margin-left: calc(48%); margin-bottom: 15px; opacity: 1; transition: opacity 0.14s ease-in-out; } Hope that helps get you started!
  14. Hey To remove it from all links you can use this code: a { border-bottom: none !important; } Hope that helps!
  15. Hey, If you use a solid colour or a colour with an alpha channel like rgba you can set this. Try adding this into Design > Custom CSS. You can switch the background colour to whatever suits. To change the opacity, you can reduce the 1 down to 0.8 for example to have 80% opacity: .sqs-lightbox-slide{ background: rgba(255, 255, 255, 1) } Hope that helps!
  16. Hey @comebacktoyourself you can just edit the bottom padding using the code from mdhanjal: .Header-nav { font-family: "futura-pt"; font-size: 19px; text-transform: none; letter-spacing: .02em; font-weight: 300; font-style: normal; border-bottom: 2px solid; padding-bottom:1px !important; } hope that helps
  17. Hey So for this in the tagline field you would need to add the text similar to: <a href="/pageslug">Title name</a> Hope that helps!
  18. hey @cnelson sorry, should have included that in, this is added to Design > Custom CSS
  19. Hey, I was having the same issue on my site so I thought I'd share my solution in case it helps someone else. As the dot is a link, I didn't want to mess around with any Javascript to automatically activate it. Instead I gave it a background colour and then rounded it to make it look like a bigger dot. Here's the code to be added in Design > Custom CSS: .sqs-lightbox-meta-trigger { background-color: #000; border-radius: 50%; } Hope it'll help someone!
  20. Hey @evmtree The first line of the code pulls in jquery into your code. You can add this in the footer Code Injection in Settings > Advanced > Code Injection. There's not necessarily a need to have developer mode on for this, once you get it working in the way you want, you could then edit the site.region to include it in there. I'd say if you look through these 2 links,it may be a bit more clear: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript#toc-adding-code https://www.w3schools.com/jquery/jquerygetstarted.asp
  21. I'm sure there's a more classy solution to this, but couldn't think of a different way to count classes
  22. Hey, Hmm you could try it with some jquery and CSS In my CSS I have: .sold-out{ display:none; } .avail:not(.show){ display:none; } And then for the code I have: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /* add avail class to any not sold out product to make the nth child not assign to a sold out product*/ $(".product").not(".sold-out").addClass("avail"); /* applying show class to first 3 products */ $(".avail:nth-child(1)").addClass("show"); $(".avail:nth-child(2)").addClass("show"); $(".avail:nth-child(3)").addClass("show"); </script> Hope that helps get you started!
  23. Hey Karla, If you add this code into Design > Custom CSS it should do the trick: .event-time-12hr{ display:none; } Hope that helps!
  24. Hey, we would need a link to your site to be able to troubleshoot this.However, the code you are using would be for the entire collection.You would probably be looking for the Page ID instead #page-58876b2cbf629adf6254c7d5{ background-color: #000 } Alternatively, you could add the code to the Code Injection of the specific page section to only affect that page
×
×
  • Create New...