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


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by Wolfsilon

  1. Hello, From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab. .design-layout-inline img { transition: all .5s; } .design-layout-inline img:hover { transform: scale(1.05); filter: grayscale(100%); border: 5px solid hotpink; } This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings. I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties. The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well. Hope this helps!
  2. Hello there, Could you please attach the page URL so we can view the page and see what's going on here. Without it I can only assume that because some of the text is hyperlinked, changing the color for "p" won't apply the color change correctly.
  3. Hello there, Wherever you inserted the link for the button, click Edit/or Button Edit > In the popup window select Settings (the gear symbol) > Web Address > "Open Link in New Window/Tab" Hope this helps.
  4. Hello, Could you please also attach the <iframe> code that you're inserting into your webpage?
  5. Hello there! Try this: .sqs-block-image .design-layout-card .image-card { position: absolute !important; top: 0 !important; } Hope this helps.
  6. Hello, In order to achieve this effect, you will indeed need to have Javascript customization enabled for your site. It may be possible to create hover-based CSS animations for the entire slide show block itself but not for individual slides.
  7. Hello! Without knowing all of the specifics of how you want to target and customize the effect using your unique Squarespace blocks/objects you may need to adjust some of the following code to fit your needs: #block-YOUR_BLOCK_ID { .sqs-block-content { color: #fff; width: 100; margin: 0 auto; padding: 3vw; background: slateblue; position: relative; } .sqs-block-content::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; border: 2px solid white; top: -12px; left: -12px; } } If you do not use a Block ID, all elements on the page will adopt the effect and it'll look rather... interesting. Anyways -- Hope this helps, Happy Web-Building!
  8. Hello! Part of the problem is that you're targeting the element using the YUI ID. Targeting elements with YUI on Squarespace is difficult because those IDs change frequently. YUId's change whenever you refresh the page -- although, sometimes less frequently. Because the block identifier won't detect the banner block itself, you'll want to target the div instead. You can inspect the element to find the ID/div that contains the "em" class. If you have multiple sections with banners, you'll want to use the "Collection" ID before the code to make changes to each section as opposed to applying site-wide Custom CSS that applies to all banners. Try the following: .desc-wrapper em { font-style: normal; font-weight: bold; } Hope this helps!
  9. Hello there, You can adjust the size of the excerpt text by going to the page with the summary block. Select the Summary Block > Edit > Text size. The sizes available are Small, Medium, and Large. Hope this helps!
  10. Hello there, When you use an embed code, typically an embed code will use percentages for dimensions. In your case -- "100x100%". This is done to make the embedded code "responsive". Generally speaking... Responsive = Mobile-Friendly. Because the embed code is inserted into your website using a Code Block/Embed Block (which is typical), Squarespace predetermines the dimensions of the Code/Embed Blocks for you. The preset height of the Code Block will overrule the embed dimensions if the dimensions of the embed are percentages, because the embed is set to be 100% of the block it is inserted into. 100% doesn't always mean and object will 100% of the page. Another way to think of it is that -- 100% could also include anything less than 100% of the intended height if it is inserted into a container. In this case, the container is the Code/Embed Block with preset dimensions. Unless the embed code uses "px" or non-scalable dimensions your code may appear constrained or contained within that Code Block. To fix this, we can use the following: #block-yui_3_17_2_1_1619008534514_75765 iframe { height: 100vh; } You can insert this code into your website by navigating in your editor window: Home> Design > Custom CSS. The "#" identifies the block you want to target followed by the actual object you want to modify. vh = Viewport Height Which is another way of telling browser that the object should be the height of the viewing screen. Give or take. You can set the height of the "vh" by changing the number to anything greater than or less than "100vh". You can change "100vh" to "90vh" or even "200vh". Hope that his helps!
  11. Hello, There are plugins that may open some doors for form polling/voting solutions for Squarespace that might suit your needs. You can search for them online and see if there's a match with the features you need. If you're looking for a simple solution, I would suggest looking into using Google Forms to setup a survey and run polls on that platform. You can create a button on your website that re-directs to your Google Form.
  12. Hello there, You cannot apply CSS to your website using <style> tags in the Custom CSS menu. If you need to use <style> tags, you can insert them in the Advanced > Code Injection > Header/Footer areas for site-wide codes. You can also apply <style> tag codes to individual pages by navigating to Pages > Index Settings/Settings > Advanced > Page Header Code Injection and insert the code for each individual page you want the code to be applied.
  13. Hello, Could you please paste and share the code you used to make the navigation drop-down box transparent.
  14. Hello! Try this: #collection-6071bad801a4c30c5bbfea13 { @media screen and (max-width:640px){ .sqs-row { display: flex; flex-direction: column-reverse; } } } That should fix it but if you need to target that specific row and only that row, you'll want to use: #collection-6071bad801a4c30c5bbfea13 { @media screen and (max-width:640px){ .sqs-row:nth-child(2) { display: flex; flex-direction: column-reverse; } } } Hope this helps!
  15. Hey, sorry. I've tried to view the effects. I'm on a Mac but I can't see the effects being rendered at all. I assume these are effects/plugins from Will Myers? Prior to your response I was doing some research and couldn't see them on his examples either. I wish I could help but I've tried to view from Firefox, Chrome, and Safari with no luck. 😞
  16. Hey there! Have you tested your other pages that use Lead Pages? Do they work correctly? The first steps with custom codes/scripts is isolating the problem. If the other pages that use the Lead Pages plugin work correctly, I wouldn't think that it's a plugin or script error but something to do with Squarespace or the "toss-and-swap" page itself. However, if you have other pages that do not work, it's possible that the Lead Pages codes are no longer compatible on Squarespace or may need to be updated.
  17. Hello! Could you please share a url/link to your page with the background image effect. I'd be more than happy to help you where I can.
  18. Hello there! I tried testing the code on my own site, which is a 7.0 website. The CSS selectors vary only slightly (".header-branding-logo...") but I was still able to replicate the problem. Try these different possible solutions. 1) Use the full url for the background image SVG. 2) Upload a transparent .png file for the logo and use your code to overlay the .svg. For me, the code you shared effectively removes the logo "block/container" entirely. If you were to add the visibility option back, you might see your SVG. 3) Try adding the full code with selectors instead of "...no-repeat left center". .header-title-logo a { background-image: url(https://example/svg/file/blah/blah.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } You mentioned you've used this code before and that it works. Sometimes Squarespace is picky about which selectors you can use for different sections, pages, or elements. If none of these work, could you please share a url and visitor password so I can take a closer look. Thank you Jen! Hope these help.
  19. .scroll{ overflow: hidden!important; position: relative!important; -moz-transform:translateY(100%); -webkit-transform:translateY(100%); transform:translateY(100%); -moz-animation: scroll 10s linear infinite; -webkit-animation: scroll 10s linear infinite; animation: scroll 10s linear infinite;} @-moz-keyframes scroll { 0% { -moz-transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); } } @-webkit-keyframes scroll { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); } } #page {overflow-Y:hidden} I think your translate properties are causing the issue. Without context it's a little hard to understand the desired effect. Something I have to frequently remind myself is: translateX -- side to side translateY -- up and down
  20. Hello! I think you could adjust the line-height of the "#one h3" element. This should provide a temporary and simple fix. From the looks of it, a line-height of 3.5 should work. Hope this helps!
  21. Hello! I think I understand what you're asking. To add space to the very top of your header/nav bar only, you can add: .Header .Header-inner { margin-top: 15px; } Use the Custom CSS tool in the Design options. Hope this helps!
  22. Hello, Changing the font color or specific properties for an item on a Squarespace page/section requires you to target the block itself. You can apply custom codes to a CSS selector within that block. You can also use a Google Chrome/Mozilla extension to find out the block ID of the element you want to change. The code for your font color change would look like this: #block-yui_3_17_2_1_1615907624400_3830 a { color: #000000; } The block ID is followed by an "a". The "a" commonly represents the selector to change the CSS properties for a button. Hope this helps!
  23. Hey there! The short answer is no, not from Google Sheets at least. Having Sheets tell Squarespace to "do something" would most likely require a custom app or integration to be developed and installed via the Developer Platform. However, You can edit the tags and categories of a selection of posts on the blog page: "your_blog_page" -> settings -> advanced -> manage tags or categories From there, you can select all posts currently published with a specific tag and edit them to have a new tag or category. It should apply that change to all posts in the selection.
  24. Hi Allison, Were you able to fix this? I'm taking a look at your website now.
  25. Hey there! I'm trying to take a look at your website but there is a password blocking access. 😞
  • Create New...