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

brandon

Circle Member
  • Content Count

    2,157
  • Joined

  • Last visited

  • Days Won

    29

Everything posted by brandon

  1. Hi @AWC914 It's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect: .Header { position: fixed !important; background-color: #DDDDDD; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change. So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned. -Brandon
  2. Hi Sam. This can be done. It is non-trivial to accomplish reliably, especially with some of the recent changes to touch detection in iOS 13. As it happens I've created a plugin for it, if that is of interest to you. It won't enable mouse-dragging, but it will work for touch-based devices. If you have questions, do let me know. If that's not what you're looking for, or if you have other questions, post a link to the site/page in question and someone here may be able to help you more specifically. -Brandon
  3. Here you are. Insert this via the CSS Editor: @media only screen and (min-width: 767px) { #header { position: sticky; top: 0; z-index: 9999; background-color: #F0F4F4; } } A few notes: This doesn't affect the mobile header/navigation. To do that properly, you'd need to use JavaScript. If at some point your body background color becomes different than your header color, things would get more complicated. The code above will work in modern browsers, but not older ones. Older ones will simply have the non-fixed header (not a big deal).
  4. Hi @etspaulding. Could you provide a link to the site/page in question (for trial sites, see here). Since your style settings may be a factor, a link to the site/page makes it easier for others to write and test a quality answer.
  5. Hi all. I've updated the answer. I've left the previous answer as well in case that works better for others. In general, you can inspect the code and form your own custom CSS by using your browser's developer tools/inspector. However, hopefully the code above is all you'll need.
  6. Hi there. I was going to chime in here and mention the plugin I created that solves issues like this with fixed headers in Brine templates. But, I see the site happens to be using it already! It's always fun to see it in the wild. I'll just also add that I appreciate your eye for detail @bluefluidmotion. Not everyone notices those small issues with the announcement bar, overlapping text, etc. and perseveres until they find a solution.
  7. Hi @knockout <your-id-here> .sqs-layout .sqs-block-spacer { display: block !important; } In the above code, you can insert a page ID, a section identifier, or a block ID. Use your browser's dev-tools/web-inspector to locate these IDs: The collection ID is usually the id attribute of the <body> element. This will target a specific page. A section ID may be used on stacked index pages. You can find it by looking at the id attribute of <section> elements. It also correlates to the URL slug for a given page/section in the index. This would target spacer blocks in a specific section. A block ID can be used to target a specific spacer block. You can find it as the id attribute of a div, usually starting with "block-yui_" More about ids in Squarespace. -Brandon
  8. Hi @wearesilk. This can be accomplished. It is often called "scroll snapping" in modern-day CSS terms. However, CSS scroll snapping is still a bit unreliable and difficult to cross-browser test. So, another alternative is to use JavaScript. Here's an example of what can be accomplished using index page sections in Brine. Your specific application may require a lot more consideration (section length becomes a major concern with layouts like this that have to entirely fit on the screen, one-at-a-time). You'd most likely need to hire a developer to write the code to accomplish it, even if using third-party tools. If your layout is quite simple, it might be easier to write a custom implementation than to bend third-party tools to do your bidding. Understanding that this doesn't help you accomplish it, I do hope this helps a little in that it shows that it's possible. -Brandon
  9. Hi @scubascuba. Yes, you can fade in an entire section on scroll without too much work. It's best to provide a link to the site/page in question (and for sites in trial mode, set visibility to "Password Protected" and provide that view-only password).
  10. Well, it's possible with JavaScript to query the collection item's JSON data, parse it and write your own HTML to the DOM at the bottom of the item. I'd expect that'd take a developer less than a few hours, depending on how experienced they were with that sort of thing and the complexity of the layout you wanted. One alternative is to just move the author name down to the bottom and add some text before and after it, based on the author class. Make sure you have your style settings set to show the author at the top of the body of the post (not in the header), then add something like this: .blog-item article { display: flex; flex-direction: column; } .blog-item article .entry-header { order: 1; margin-top: 1.5em; } .blog-item article .entry-author:before { content: "Written by "; display: inline; } .blog-item article.author-george-zhang .entry-author:after { content: "George Zhang is donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit."; display: block; font-style: italic; font-size: 0.9em; margin-top: 0.2em; padding-left: 120px; background-image: url("/s/your-file-name.jpg"); background-size: 100px; background-repeat: no-repeat; } In the above code, you'd use a "slugified" (lower-case-hyphenated) version of the author's name in place of "george-zhang". You can also find that class within the code by using your Browser's Dev. Tools/Inspector. In the Bedford Demo, that ends up looking like this: You'd have to repeat some of that CSS for each author, so it could get a bit tedious. But, it is possible to do with just CSS. One thing to note: you can't have links in the description using this method. You can add an author image. However, this requires uploading the image to your storage, taking note of the file page, and then setting it as the background image in the code above. As I mentioned, doing a proper job using JavaScript is an option, but may require the assistance of a coder/developer. -Brandon
  11. Yo. Here's the non-LESS-CSS version of how you can do that. All those @media statements can be condensed into your LESS mixin, if that's how they're generated originally. You could alternatively target it via :first-child if you wanted. .index-navigation a[href="/"] { font-size: 0; } .index-navigation a[href="/"]:after { content: "None"; } @media screen and (min-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vw; } } @media screen and (min-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href="/"]:after { font-size: 18px; } } @media screen and (min-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1280px) and (max-width:1920px) { .index-navigation a[href="/"]:after { font-size: 1.40625vh; } } @media screen and (max-aspect-ratio:1/1) and (max-width:1280px) { .index-navigation a[href="/"]:after { font-size: 18px; } } @media screen and (max-aspect-ratio:1/1) and (min-width:1920px) { .index-navigation a[href="/"]:after { font-size: 27px; } }
  12. Hi there. The issue has to do with AJAX loading. You can disable it, or you can edit your code to take AJAX loading into account. I hope this helps. -Brandon
  13. Sure thing. Insert the following via the CSS Editor: #block-yui_3_17_2_29_1458571213353_7660 .sqs-block-content > *:nth-last-child(-n+4) { color: red; } It uses the Squarespace block ID, and targets the last 4 elements that are direct children of the block's content. Note that this targets the last 4 (not the last 3) because you have an empty paragraph between the first two lines and the last line, for a total of 4 elements. If you were to mess with the text at the end of that text block too much, you'll find the rule will have to be rewritten a bit. -Brandon
  14. Hi @alxnder. In cases like this, it's almost always best to include a link to the site/page in question. While that doesn't guarantee you'll get an answer, it does make it more likely. For trial sites, set the visibility to "Password Protected" and provide that view-only password (this is different that your Squarespace account/website password, which you should never share with anyone). Others will then be able to view the website using that view-only password. If you're uncomfortable with others being able to see the website going forward, simply set it, share it, then change it later on after you've received the help you need (or waiting long enough in any case).
  15. Agreed. More context would help. In general though, inserting JavaScript code in the "value" attribute will simply result in the code you write being shown as the option. What you're seeing is just that: the lines of JavaScript you've inserted in each "value" attribute listed as options in the select element.
  16. Hi @leonor. If by "menu" you mean the navigation on desktop and mobile, it's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect: .Header { position: fixed !important; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change. So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned. -Brandon
  17. Well, as I said there are many options. But here's a quickly-written example using typed.js that you can insert via footer code injection, and tweak the settings to your liking: <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> <script> (function() { new Typed('.highlight1', { strings: ['', 'clear', 'engaging', 'understandable'], typeSpeed: 40, loop: true, loopCount: Infinity, backDelay: 2900, fadeOut: false, showCursor: false }); })(); </script> You'll notice some additional adjustments you'll want to make, such as hyphenation/wrapping and line height. Do let me know how it works for you. -Brandon
  18. Hi @vzell. This is a common visual feature (and was recently asked about on these forums), and it can be accomplished via custom JavaScript and CSS. There are a lot of code snippets and libraries out there that can help you accomplish it, though each will require consideration of your specific context and design (not to mention, whether there is animation associated with the word-change). You can try posting a link to your site (and the view-only password for sites in trial mode) and see if anyone here provides some specific example code. Otherwise, you may consider hiring a developer to accomplish it. I'd expect it to take a couple hours or less to implement well (depending on animation, and other desires).
  19. Hi Georgia. When you see this issue, are you by chance viewing your website in Safari on iOS?
  20. Hi there. This requires a bit of CSS and JavaScript to accomplish. Insert the following via sitewide footer code injection: <!-- Equalize Button Heights --> <style> #page-5d7e807d478b13088d7f4ee5 .button-block a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } </style> <script> window.Squarespace.onInitialize(Y, function() {(function(){var c=Array['from'](document['querySelectorAll']('#page-5d7e807d478b13088d7f4ee5\x20.button-block\x20a')),d;if(!c['length']){return;}function e(){var f=Math['max']['apply'](null,c['map'](function(g){var h,i;h=document['createRange']();h['selectNodeContents'](g['childNodes'][0x0]);i=h['getBoundingClientRect']();return i['bottom']-i['top'];}));d=c['length'];while(d--){c[d]['style']['minHeight']=f+'px';}};e();window['addEventListener']('resize',e);}());}); </script> Now that's a bit more than I'd normally do on this forum; I'd normally encourage hiring a coder/developer to solve a problem like this. But I found this particular problem interesting, and I'm curious how many others in the future will find this thread needing something similar. Do let me know how that works for you. -Brandon Note: For the sake of others looking for this question in the future, consider adding ", Equal / Same Height" to the end of the title of your post.
  21. Hi @wesgardner. The issue you're having makes sense because fbq('consent', 'revoke'); needs to happen after fbq is initialized but before fbq("track"...) is run. When you're using Squarespace's built-in integration, you can't get "between" those two with your own code. To work around it, you'll want to stop using the built-in integration and instead insert the FB tracking code on your own, via code injection. Then you can work with it with more granularity. The next step is detecting when the user consents via Squarespace's built-in cookie banner. Looking past the shortfalls of this banner in terms of compliance, this can be done a number of ways. Are you also using Google Analytics? A similar approach would apply there, and could be handled together in the same script. GA doesn't offer a "grant consent" method like FB does, but that's not a big deal. Do you have a template with AJAX loading and is it enabled? In theory, Facebook should deal with this itself since it uses the history state API listener, but GA (if you're using it) would require updating the page_path parameter. -Brandon
  22. Hi @inlaydigital. You can prevent the wrapping of text (as Tuan Phan provided). For your consideration, if you were to prevent text wrapping, what would you do at widths where the blocks appear like this (just before mobile kicks in)? Like this: In general if determined to use the blocks as you have them, I would first make sure that all blocks are within the same row. You see, your grid structure is currently quite complicated, due to the way you've dragged-and-dropped the blocks around in the layout. This is an easy thing to have happen in Squarespace, but it makes writing overriding CSS quite difficult. If you're familiar with your browser dev tools/inspector, you can inspect that section and see what I mean. If you can clean up your grid structure, then you may be able to use CSS to keep the blocks of a minimum width and have the blocks themselves wrap (from one row of 5, to two rows [3, 2] to each in its own row). This would take some time. Alternatively, with layouts like this in Squarespace, I often prefer to simply write the layout myself (for example, in a code block). That way I'm not fighting Squarespace's own CSS/layout, the layout is simplified, I have more control, and failure in the future (due to changes on Squarespace's end) are less likely. Overall, this is one of those instances where preventing the wrapping of text reveals that there are actually a larger number of concerns in play, and a different approach may be better. Understanding that this doesn't solve your immediate problem, I hope it does help. -Brandon
  23. Hi @Graemetg. Squarespace doesn't support server side code, so you're pretty much stuck using JavaScript. What that means is you have to either: Setup your endpoint/database to be accessible cross-domain via XMLHttpRequest (account for CORS) or Setup your endpoint so that its data is accessible via JSONP or Do one of the above with a proxy server instead, and have the proxy get your data or Do one of the above with a separate service like Firebase, Caspio or Google Sheets/AppsScript whereby you essentially host a copy of your database for access via JS (via XMLHttpRequest or JSONP depending on the service's limitations/features) This limitation isn't necessarily unique to Squarespace, but to JavaScript (though since Squarespace limits us to JavaScript, it is indirectly a limitation of Squarespace). I've setup various similar solutions using AppsScript (JDBC may be of interest in this case) where no/low additional monthly fees were important. Of course, the upfront cost could be significant if paying a developer to accomplish it, depending on the complexity of the data/operation and the experience of the dev. -Brandon
  24. Hi @nycmonkey. Yes, moving the thumbnails is doable. Give this a shot, inserted via the CSS Editor: .ProductItem-gallery { display: flex; } .ProductItem-gallery-slides { order: 1; width: 100%; height: 100%; margin-left: 4%; } .ProductItem-gallery-thumbnails { margin-left: 0; width: 20%; max-width: 90px; } .ProductItem-gallery-thumbnails-item { margin-left: 0; width: 100%; } As for next/previous indicators, that'll take some custom development work. Nothing a dev. couldn't do for you short of a couple hours. Alternatively you can make Squarespace galleries swipeable. It wouldn't have indicators or be clickable on desktop, but if most of your users are on mobile, that might not be a big deal. Note that white space will be created below the main image with the thumbnail strip height exceeds it. With a bit more work, it'd be possible to match the height of the thumbnail strip to that of the main image, and make the strip scrollable, thereby removing the gap when there are a lot of thumbnails Hope that helps. -Brandon
  25. Hi @gramazlo. Are you asking for help with the "new-new-page" or the original "new-page". On the NP, you have JQuery added twice. Explore removing it from the site-wide header code injection of the page-specific code injection unless you're using it elsewhere on the site. If you're using it elsewhere you're going to have to do what we call "refactoring"...spend time reconsidering/rewriting how you're solving each problem individually and come up with a new solution that solves multiple problems in combination. If you don't get additional replies here that solve your problem, it may be time to consider hiring a developer.
×
×
  • Create New...