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

Search the Community

Showing results for tags 'code blocks'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 18 results

  1. Site URL: https://www.alceasurrogacy.com/surrogate-process I'm trying to add anchor tags to this page, but I'm having issues with the couple of different ways I'm doing it. Page is in progress. Any fix out there? I can rework the page to have either option on all sections. 1. On the page now - trying to add a hidden code block to have the list word link to section below. Unfortunately, the code block creates a huge space that makes everything uneven. See attached file for space under "What to Expect" instead of having it perfectly centered. 2. I also tried incorporating the header text into the code (<h2 id="pregnancy">Pregnancy</h2>) - this works, but the anchor text link then takes me to the section below, not the header text I'm including the anchor text in.
  2. Site URL: https://www.lynnemeade.com Hi, I've turned on "Underline Body Links" option in site styles to go with the website's minimalist design aesthetic. A double underline of these links has arisen when adding code blocks to display a colored background, text and links. In order for the links in these code blocks to have an underline, I've used the code: p a {text-decoration: underline!important}. Without that code, the links aren't displaying according the link site styles setting. To view the double underline display issue on a page that has a code block with a link underlined: https://www.lynnemeade.com/contact To view the single underline display on a page that has a code block without any links: https://www.lynnemeade.com/teaching-workshops I've tried various ways to resolve the link problem and am stumped at this point. I would be most appreciative for a way to resolve the double underline display issue. Thank you in advance, Karen
  3. Site URL: https://giraffe-daffodil-te3n.squarespace.com/portfolio Hi all, I would like to find a way on how to add and make text appear when the mouse hovers a code block. I've been trying to figure out how to apply a title/text hover effect over my (video) code blocks and image blocks that I created for my website. So far, I have applied a contrast/brightness hover effect, but I would like text to appear as well. I understand there is already a method to do it for image blocks, but is there a way to do it for code blocks? Thanks, Lily
  4. Site URL: https://www.thewordlady.co.uk/ Ok I'm totally out of my depth on all types of code and I'm winging it massively. I have a couple of key issues that I'm really hoping someone can help with? 1. I found a way to use code blocks to create an image hover effect where the text disappears on hover and a new image is displayed (most examples have the text appear on hover, but I wanted it the other way round). Anyway, I like the way the 6 code blocks look on desktop/tablet – 2 rows / 3 columns but I can't get them to display as 2 columns for mobile (instead of stacked on top of each other). I would like 3 rows / 2 columns for mobile. 2. I've messed about with the original html code I found and now can't work out how to keep my text relative to the size of the image – so have set it at 30px or something but I think this means it's not contained inside the image on some screens and I want it to just get larger or smaller depending on the size of the image in whichever viewport is being used. I hope that makes sense? Just to give an idea of the level you're dealing with here – I don't really know the difference between html and css and am just faffing around and hoping stuff works. This is the css I've got and I honestly don't even know if I need all this or if I've just left random bits in from various different Google results... .overlay-image { border: 1px solid #fff; padding: 0px; width: 100px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0), 0 4px 6px 0 rgba(0, 0, 0, .3); } /* Main container */ .overlay-image { position: relative; width: 100%; } /* Original image */ .overlay-image .image { display: block; width: 100%; height: auto; } /* Original text overlay */ .overlay-image .text { color: #fff; font-size: auto; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:80%; } /* New overlay on hover */ .overlay-image .hover { position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; } /* New overlay appearance on hover */ .overlay-image:hover .hover { opacity: 1; } .overlay-image .normal { transition: .5s ease; } .overlay-image:hover .normal { opacity: 0; } .overlay-image .hover { background-color: rgba(0,0,0,0.5); } .container { position: relative; text-align: center; color:white; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Thanks in advance to anyone who can help me with this because I'm seriously losing brain cells trying to figure it out. If anyone can recommend a really great coding for beginners course I'd really appreciate it. Thank you.
  5. Hey, I'm setting up a website, and I use code blocks for some features I can't build on the platform. For instance I found a gallery that works better on mobile, so I want to use that. It works fine with one, but when I insert two on the same page, they somehow conflict with each other, so only one works. The same thing happens, when I use two very different code blocks, something in one of them seems to conflict with the other one. Any good pieces of advice for how to handle this? Maybe rename some identical elements there might be across the blocks, so names become unique? Other tips?
  6. Site URL: https://www.bucksreferees.com/honours Hi, I'm using code blocks above sections on pages of my website to create anchors, so I can have a page navigation section at the top. However, the code blocks have a physical size that I can't seem to change, leaving an ugly gap between each section. I found a tutorial when I started the site months ago to change some of the template's padding, and I was wondering if there was a way to do the same for code blocks? If I wanted to add space I'd use a spacer! Many thanks in advance.
  7. I'm working on implementing a third party solution for ratings and reviews (deliberately omitting the name) that's JavaScript based. I've found how to add code blocks, easy enough. However, what I'm struggling to find is if there is an easy way to pull in a value from my products, such as, name, description, image/thumbnail url, etc. I would like to pass these into the JS I'm adding. At a bare minimum, I need to pull in an id value. I realize I could manually change these values for each page, but that seems like it would be difficult to maintain in the long term. My hope is I can add some type of short code into the JS where these values are needed, allowing to me copy and paste the same code into each page to dynamically pull in these values. Thanks for your help. I'm just starting out, so I appreciate your understanding if my terminology is slightly off.
  8. Hi everyone, I'm currently evaluating to migrate my blog to SquareSpace, and I have a small question. In blog posts I would like to add some special text styles to certain words for individual highlighting. Is it correct that the only possibility for this is to use Code Blocks instead of normal Text Blocks and do the CSS within (with Custom Styles)? Being a developer I have no problems with code sections, but as far as I have understood, with a Code Block I'd lose all other editor features like easy linking, easy italics and so on. Or is there a way to individually style some words within Text Blocks that I've not yet figured out? Thanks Ben
  9. Site URL: https://www.zeiafoods.com/find-us-about-vertical-1 I am trying to use code blocks to create links to jump to different section of a page. I have put code blocks above (<a id="RETAIL">) and below (<a/>) a text block which I then link on another part of the page ( <a href="#RETAIL">RETAIL</a>). My problem is that this works in some parts of the page but not others. It seems like I'm setting up code blocks in the exact same way, but the closing </a> tag shows up red sometimes (see screenshot for example, when I tried to set up a link in the restaurants section for MASSACHUSETTS), and I have no idea why. Sometimes, the links still work even though the closing tag is red. What can I do to fix this problem?
  10. Site URL: https://www.jonasstensgaard.com/shop/funny-home-is-where-quote-bundle-svg-cut-files-family-quote-craft-file-funny-quote-design I'm on the York template. I've just started implementing Adsense on my website and have added ads via code blocks but I noticed a problem: When I add the ad blocks it destroys the way the navigation works on mobile. When I say destroy I mean you can click the hamburger menu but it looks like the menu is empty. In fact it looks like it's empty when in reality a LOT of space has been added above and below the links. The problem exists both in real-life viewing as well as through my squarespace website editor. I contacted Squarespace support and the guy I spoke to found out the problem only exists when using Safari. I tried clearing the cache and all that by following these instructions: https://support.squarespace.com/hc/en-us/articles/115004581087 But that didn't solve the issue. I also tried removing my code from the site-wide Code Injection as well as the custom CSS but that didn't change anything. Also, on pages similar to the one I linked to where I haven't added any ad code block the problem doesn't exist. So it has something to do with the way Safari handles the code block with the ad code maybe? Any idea as to how I can solve this problem? EDIT: So, I managed to do a sort of fix where I added custom CSS that targeted the container of the menu: .overlay-nav-container { height: 0px; } I just set the height to 0px and that fixed the problem - but you can still scroll and scroll because when I inspected the site code it said the container height was more than 5000px! Why does it say that? And is there another and more proper way to fix this? And is the code I added safe enough to use or will it create problems for me in some other part of my site?
  11. Site URL: https://shopstyletherapy.com/currently-coveting-fashion Carousel gallery and code will not load correctly upon opening page. It requires a page refresh to open fully/correctly (see photos). Is there a way to remedy this?
  12. Site URL: https://www.wearecapcon.com/tickets-on-sale I have integrated the code provided by Eventbrite into code block, which is meant to allow purchasing of tickets to be performed on my Squarespace website. Unfortunately, when visiting the page, the code block doesn't trigger and the ticket purchasing display doesn't appear. However, if the page is refreshed, the code block is triggered and the ticket purchasing display appears as it is meant to. The issue appears to be with how the website loads, and when I visit the ticketing section of the website, it is transitioning rather than loading, therefore not triggering the code block. Any advice, help or assistance is appreciated in getting this to work. Please use the site URL provided to see what I mean.
  13. Site URL: https://www.fresherlife.co.uk/student-jobs Hello guys, I have some code that uses Javascript, this code works on ever other platform but for some reason does not work with squarespace? AJAX is already disabled and other parts of my site have working javascript. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>sort</title> <style> * { box-sizing: border-box; } /* ---- isotope ---- */ .grid { margin:0; padding:0; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .element-item ---- */ .element-item { position: relative; width: 49%; height: auto; margin: 5px; padding: 10px; background: #ddd; color: #262524; } .element-item p{ color:#000; font-weight: 700; } .element-item span{ color:#333; font-weight: 400; } @media only screen and (max-width: 1020px) { .element-item { width: 48%; } } @media only screen and (max-width: 620px) { .element-item { width: 99%; margin: 2px; padding: 10px; } } .control-bar{ display: flex; justify-content: space-around; padding: 20px 0; background-color: #bbb; flex-wrap: wrap; } .control-bar input,.control-bar select,.control-bar option{ padding: 10px; margin:5px; border-radius: 5px; outline: none; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> </head> <body> <h1>Our Jobs</h1> <div class="control-bar"> <div class="search"> <input class="quicksearch" type="text" id="search" placeholder="Search..."> </div> <div class="filters"> <select name="jobType" id="jobType"> <option value="*">All</option> <option value=".retail">Retail</option> <option value=".barWork">Bar Work</option> </select> </div> <div class="filters"> <select name="location" id="location"> <option value="*">All</option> <option value=".manchester">Manchester</option> <option value=".leeds">Leeds</option> </select> </div> <div class="sort-by"> <select name="sort-by" id="sort-by"> <option value="*">Original Order</option> <option value="low_to_high">Low to High</option> <option value="high_to_low">High to Low</option> </select> </div> </div> <div class="grid"> <div class="element-item leeds retail"> <h3 class="name">Content Manager</h3> <p>Job Type: <span class="jobType">Retail</span></p> <p>Location: <span class="location">Leeds</span></p> <p>Salary: <span class="salary">5000</span></p> </div> <div class="element-item leeds barWork"> <h3 class="name">Marketing Director</h3> <p>Job Type: <span class="jobType">Bar Work</span></p> <p>Location: <span class="location">Leeds</span></p> <p>Salary: <span class="salary">8000</span></p> </div> <div class="element-item manchester retail"> <h3 class="name">Web Developer</h3> <p>Job Type: <span class="jobType">Retail</span></p> <p>Location: <span class="location">Manchester</span></p> <p>Salary: <span class="salary">3000</span></p> </div> </div> <script> var filters = ['','']; var newFilters = ''; var qsRegex; // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', getSortData: { salary: '.salary parseInt' }, filter: function() { var searchResult = qsRegex ? $(this).find('.name').text().match( qsRegex ) : true; var buttonResult = newFilters ? $(this).is(newFilters) : true; return searchResult && buttonResult; } }); // flatten object by concatting values function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; } // FILTERING (jobtype/location) $('.filters select').on( 'change', function() { var value = $(this).val(); var id = this.id; if(id === "jobType"){ filters[0] = value; }else if(id === "location"){ filters[1] = value; } newFilters = concatValues(filters.filter(function(f){ return f !== '*'; })); $grid.isotope(); }); // SORTING $('.sort-by select').on( 'change', function() { var sortByValue = $(this).val(); if(sortByValue === "high_to_low"){ // sort highest number first $grid.isotope({ sortBy: 'salary', sortAscending: false }); }else if(sortByValue === "low_to_high"){ // sort lowest number first $grid.isotope({ sortBy: 'salary', sortAscending: true }); }else{ return; } $grid.isotope({ sortBy: 'salary' }); }); //SEARCH var $quicksearch = $('.quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }, 200 ) ); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; threshold = threshold || 100; return function debounced() { clearTimeout( timeout ); var args = arguments; var _this = this; function delayed() { fn.apply( _this, args ); } timeout = setTimeout( delayed, threshold ); }; } </script> </body> </html>
  14. I entered a code block into my site to add a hover effect to my clickable images. Everything is working amazing on a desktop and laptop, but when using my mobile site the code blocks disappear when I press the back button. Is there a way to fix this issue? is It something with my code? ee4c6c83d91043e3b54e8dc380207ec6.mov
  15. Is there a way (without switching site into developer mode), to move specific data from an outside source (like Google Sheets) into a code block? I'm not looking to embed a Google Sheets, but to pull one specific cell of data into a table data <td> in a code block. The idea is that when the Google Sheets is updated, the code block in Squarespace will also be updated.
  16. Hi I've added a small image to my website using a code block that is pulling an uploaded image into the code block. The image is a graphic that reads, "MOST POPULAR". The placement is fine, but everything after the code block, in that section, specifically all the text, now is acting like a used link/button. It has gone gray and blinks on roll over. Here is the site: https://workheights.com/#members Here is the code: <a style="display: block;text-align: center;"> <img src="https://static1.squarespace.com/static/55099790e4b0bcc6146f3c96/t/5df401479726b96c27144a52/1576272199597/MostPopular.png" width="200" height="95"> It seems this inserted code, is not properly closing, so that it affect the rest of the section. I'm not a code expert, but this seems like it should be a simple fix. Any ideas?
  17. Hi there! i have a page that has two blocks side by side, left is a title and right side is a code block with a review carousel. the problem is when shrinking the window, the code block (review carousel) stays on the right for way too long and it squishes the content until it becomes unreadable instead of just stacking under the title sooner. is there any way to change this? thanks
  18. What would cause this gray block to be there? I can't figure out how to get rid of it. I've tried adjusting the padding and it didn't work. Thanks! Website: johnetterleebooks.com
  • Create New...