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

brandon

Circle Member
  • Content Count

    2,208
  • Joined

  • Last visited

  • Days Won

    29

Everything posted by brandon

  1. @underscore, that should all be doable using CSS. For example, I've added `pointer-events:none` to the previously posted code. That prevents the hover from interfering with the click. To get a full width/height color overlay, it's simply a matter of altering the CSS in the original answer that includes the CSS portion of the code (you don't have to alter the JavaScript part). Another concern I'll share with you is this: consider what will happen for viewers who are on mobile/touch devices with no "hover" state? You're going to have to consider that, and write custom CSS accordingly. Keep in mind, there is currently no way to detect whether a device has a hover state or not (many Windows-based devices can be either or both at any given time). That is why I usually avoid hover-based UI in general (despite the fact that I am rather familiar with all of the various workarounds and have written quite a lot of code related to it). In any case, as I said you should be able to achieve what you're after using only CSS. If you need additional customization, you'll want to consider hiring a developer to help you.
  2. @underscore. Are you comfortable editing and writing CSS? If so, it's simply a matter of editing the applicable CSS in the original post. However, you can add this to it if you'd rather do that: .gallery-strips-item .gallery-item-description { opacity: 0; transition: opacity 0.5s ease-out; } .gallery-strips-item:hover .gallery-item-description { opacity: 1; } If that doesn't work, it's probably because you're not actually using the "strip" gallery design, but rather are using some other gallery design. In that case, it's just a matter of changing `.gallery-strips-item` to the corresponding class for your gallery type. -Brandon
  3. This can likely be solved by inserting the following CSS via the CSS Editor/Custom CSS: .sqs-mobile-info-bar-hide { transform: none !important; } -Brandon
  4. I've got an idea on how to do that, @TheDrawingGal. Let me see what I can do...
  5. Yes, you could define fixed heights and overflow-y properties to achieve consistent caption sizes @Avalenzuela. It's a matter of writing some additional CSS, testing it out, optimizing it (in case it's more efficient to edit the source as opposed to overriding it), etc. That's a bit beyond what can be provided here on the forum for free, however.
  6. Well, the code I wrote is specifically for galleries, @nwatkins. It could be repurposed for images; it might even work as-is by passing in different selectors. But that'd take some additional development time, testing, etc.
  7. Yes, you can do that @Avalenzuela. You can add this: .gallery-masonry .gallery-item-description { position: relative; } Of course, rather than add more code as an override, you could instead edit the source CSS that I provided in my original post so that the descriptions are relatively positioned. That'd be cleaner. You'll probably want to customize the look in other ways too.
  8. What gallery type are you using, @Avalenzuela, and can you provide a link to your site?
  9. Hi @emmaj. A1: There are a couple ways to do this. The JavaScript is setup so that you can pass in your own CSS selector. That allows you to set which galleries get descriptions (by default, all of them do). In your case, it sounds like you only want to select gallery lightboxes. So replace this line in the JavaScript: addGalleryItemDescriptions(); with addGalleryItemDescriptions(".gallery-lightbox"); An alternative way (instead of the above) would be to simply leave the JavaScript alone (so all galleries would still have descriptions) but then hide it on certain galleries using CSS. You'd use your browser's inspector/developer tools to find the correct selectors and write the CSS. Something like this might work: section.gallery-section .gallery-item-description { display: none !important; } A2: .gallery-item-description { text-align: left; } A3: This would technically be possible by using the image file name as the title. You'd be sure you name your file "This is my title.jpg", then the JavaScript component of the code I wrote could be amended to add that as the title (minus the file extension ".jpg".). That'd take a fair bit of additional custom development time, but it is possible.
  10. Yes, @AtelierDeux. In the CSS where you see ".gallery-item-description", within that scope (within the curly braces), add your letter-spacing rule. It'd end up looking something like this: .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; letter-spacing: .2em; }
  11. Great - glad it's working for you @AtelierDeux. Don't forget to support the original post by liking/reacting accordingly! It's a small thing, but good to see how many people it's helping.
  12. Hi @AtelierDeux. The reason you're seeing raw code displayed on your site is due to inserting the code in the wrong location. I've updated the original post to include links that explain how to add the code. Note that you have to use both the CSS and the JavaScript together, and insert them both according to the directions. In your case, you're using per-page header code injection which may also work, but best to do as the directions say (and now link-to).
  13. Hi @technopaul. You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery): .gallery-item-description { pointer-events: none; }
  14. Related Questions with Possible/Related Answers: https://forum.squarespace.com/topic/151557-brine-productsgallery-moving-alternative-imagesthumbnails-to-the-right-of-the-main-image/#comment-332321 https://forum.squarespace.com/topic/8841-feature-req-product-gallery-thumbnail-layout-location/?tab=comments#comment-50080 Other Related Questions: https://forum.squarespace.com/topic/1551-moving-product-thumbnails-brine-template/?tab=comments#comment-9130 https://forum.squarespace.com/topic/151905-slideshow-gallery-moving-thumbnails-to-the-right-of-the-main-image/#comment-333451 Another Possible Answer: https://www.sqspthemes.com/blog/vertical-product-thumbnail-gallery
  15. @IvanOB: I'll take a look and see if things can be tweaked easily. If you can provide a link to an example page, it might speed things up. @SW_2020: This might be doable. If you can provide a link to a page that shows the issue, that'd be great. Otherwise, I'll do what I can to recreate it in my own demo (but that might not be easy). Also, what gallery style are you using?
  16. I wouldn't say it's an issue with the logo. There's what's called a "race condition" (as in two JavaScript functions racing against each other) being caused between how Firefox is loading the header content and the "SyncHeader" function in the Bureau template family. Firefox is just a little slower (possibly due to flexbox-related calculations, but I'm not sure) and so the height is being calculated too soon. This is probably fixable by recreating the gist of the function from Squarespace's own code, then running it a little later. Insert the following via sitewide Header code injection: <script> // Fix header height on init. load in Firefox. window.Squarespace.onInitialize(Y, function() { document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px"; }); </script> If that doesn't fix it, try this one instead of the one above: <script> // Fix header height on init. load in Firefox. window.addEventListener('load', function () { document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px"; }); </script> Let me know how that works for you. -Brandon ------------------------------------- EDIT 4/29/2020 For some, the following may work best (it really depends on your template configuration, which can be different for everyone). <script> // Fix header height on init. load in Firefox. window.addEventListener('load', function () { document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-header").offsetHeight + "px"; }); </script>
  17. The summary is, basically, to wrap your code like this: <script> window.Squarespace.onInitialize(Y, function() { //Your code here... }); </script>
  18. You may try the solution suggested here, but also consider that's not most performant way to go about it. See my response at the end of that thread, if you're interested. Another option is to use Fixit - Fixed Headers for Squarespace - Brine which I created. Besides helping with making fixed/sticky headers (and accounting for a lot of variables that most CSS-only solution do not account for), it also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, logo size (or alternate logo), etc. when scrolled. When simple CSS approaches work, use 'em. If they don't, you can checkout Fixit. -Brandon
  19. Squarespace won't prevent you from writing client-side JavaScript code that connects to external APIs. Therefore the issue must be something about your JavaScript or your settings in Splunk. I'm not familiar with the details of Splunk, but there is this (which you may have already reviewed).
  20. For what it's worth, for templates based on Brine , the number of concerns when creating a fixed header are much greater than is typically appreciated, and include: differences between index and non-index pages differences between first-child index sections with image vs without. whether you have the headers set to overlap on index pages what headers (top/bottom) are enabled whether the screen is resized whether the announcement bar is used whether the announcement bar is used but then closed by user whether text in the announcement bar is wrapped when screen width changes whether the header covers up content when anchor links (same-page "jump" links) are used whether then navigation wraps or font size changes on width change (and therefore header height changes, and therefore necessary padding) whether you want the header fixed on mobile (and again, whether you also want the announcement bar fixed on mobile along with it) whether you have the mobile information bar (MIB) enabled for mobile devices. and more. A lot of these issues have been around...for years. If you have a very simple use case and manage to avoid all of the above (and more) concerns, basic CSS like position:fixed or position:sticky can indeed be used. For other cases, a CSS-only approach will cause some problems that you may not detect (but your users probably will). For those cases, I created Fixit - Fixed Headers for Squarespace - Brine. It also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, etc. when scrolled. Finally, note that using onScroll as proposed in the code samples above is not the most performant way to go about solving the issue. It better to also leverage requestAnimationFrame and/or setInterval when doing such things with onScroll. -Brandon
  21. Okay, that clarifies things. It is a common expectation to be able to see the pages you've created using Squarespace's editing UI. However, that's not how the Squarespace Dev. platform works, despite being a common misunderstanding. Besides the static pages you've created within /pages, you will not see a per-page representation of your site. The files you see are a templating system. The pages you have created via the Squarespace editing UI are rendered based on the .region files. The page layout you select from the page's settings panel within the Squarespace editing UI determines which .region file(s) will be used to render the page when a user arrives to it. Said another way, each page does not exist as an independent HTML document. Rather, it is rendered on-demand by the server, for the user, based on your template files. Changing a .region file will affect all pages that utilize it, when a page is rendered in real-time as users arrive to your site. When you create a new page using the Squarespace editing UI, the existence of that page is recorded as part of the database/infrastructure for your site, apart from your template files. Squarespace's servers then know to render the page based on your template files and the layout you selected for the page. Therefore, you won't see a representation of the page in the template files, but you can change the appearance and behavior of the page by altering the template files. To affect pages individually, you must either create individual layouts (that is, combination of .region files and layout definition within the template.conf file) or use {.equal?} predicates within the .region files in order to "target" specific pages/contexts. And even then, you will not have access to the HTML within a given Squarespace {main-content} area or block-field, and so you are still somewhat limited.
  22. Hi @LianLim. It's possible that something isn't working right for you, but it's also common to misunderstand how the Squarespace Dev. platform works. When you obtain the template files for a site via Git or SFTP, you will not see a representation of the pages themselves. What you get is a group of files that represent the "templating system" that determines how the pages look and behave. So you should not expect to see a page-by-page representation, unless you are referring specifically to the static pages feature, which can also be hard to understand in itself. If you can provide further clarification of what you're expecting to see, what you're trying to accomplish and what you're currently seeing, that might help provide additional insight to you. Perhaps even a screenshot of what you're seeing, file-wise. -Brandon
  23. Related: https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?tab=comments#comment-333248
  24. Related: https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?tab=comments#comment-333248
×
×
  • Create New...