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

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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!
  2. 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!
  3. 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!
  4. 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
  5. 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 :)
  6. 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!
  7. 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!
  8. 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!
  9. 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; }
  10. 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!
  11. 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!
  12. 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!
  13. Hey To remove it from all links you can use this code: a { border-bottom: none !important; } Hope that helps!
  14. 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!
×
×
  • Create New...