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. @bangank36 This is awesome! Learned something new today! How could you use something like this on a page with other sections that don't need to be placed next to each other? Say, if I wanted to add a section underneath the slideshow and text? Because adding a section with this code would place the next section to the right of the text.
  2. Hello, On 7.1, adding a slideshow in the way that you are talking about and shown in the example above is not possible. The slideshow options are limited to specific pages instead of blocks unfortunately. However, 7.0 templates support these Gallery/Slideshow blocks. If you are using 7.1, you'll need to use custom code. You can build a slideshow using a Javascript library or it is also possible to build a simple slideshow using CSS.
  3. Hello, To switch the order of these buttons you can use Custom CSS. The following code should solve your problem. .header-actions--right { flex-direction: row-reverse; } Hope that this helps! -Dan
  4. Hello, You should be able to use the following code to get the full-bleed effect. You may need to adjust the top or bottom padding/margins if you want the images or row for it to sit flush with the banner above. section[data-section-id="60de0bfa33d7aa1e05234f69"]{ .page-section.content-width--wide .content, .page-section.content-width--narrow.content-collection .content, .page-section.content-width--medium.content-collection .content { max-width: 100%; } .page-section:not(.full-bleed-section) > .content-wrapper { padding: 0 !important; max-width: 100%; } } Hope that this helps! -Dan
  5. Hi, Could you please specify where this code is inserted on the website so that we can see the issue as it occurs. Where are these roll-over effects supposed to happen? On the about page? Alternatively, you could also share a screenshot of the problem, that might help too. Thanks, Dan
  6. Hello, Weird, I don't think I've seen this issue be caused by it's own class but perhaps there is a setting that is mark by default to "float: right" for items. The following code may solve your problem. .sqs-block.float-right { margin: 0; } Hope this helps! -Dan
  7. Hello there, Could you please set your website availability to Private and share the viewing password with us so that we can see the problem on your page. Also, are you using the Header/Footer code injection fields for this button? If so, could you also share with us what you're using to generate the button and the code you're using to insert it. Thanks! -Dan
  8. Hello, You're incredibly close with the code you shared to having a working solution. The reason it isn't working is because there are no opening and closing "{}" following the code for your @media screen query, so the fix is simple. @media screen and (max-width:1024px) and (min-width:768px) { [data-section-id="60b93ddcc8f89f0d0d45b26e"] .section-background {background-color: #DFCCBE;}} Hope this helps! -Dan
  9. Hello, If you're using a 7.1 Template. You can do this by navigating to any page, click "Edit", and select "Edit Site Header". The menu will allow you to change the toggle switch for "Fixed Header" on or off. If you're on version 7.0 using a compatible template family, you should be able to add the following code using the Custom CSS tool. Navigate from Home > Design > Custom CSS and paste the code below: // Fixed Header // .Header { position: fixed; z-index: 9999; width: 100%; } -- Courtesy of Ghost Plugins. Hope this helps! -Dan
  10. Not sure the best way to send this file to you. Message me your email, if you would and I'd be happy to send it over.
  11. Hello, Short-answer: No, you cannot make this happen using Squarespace default tools but you can find paid plugins built for Squarespace that do this tab/accordion-like effect here. Long-answer: It's not possible using Squarespace default tools because you'll need to have two separate "layouts" controlled by buttons that essentially show/hide a section depending on the selection a user makes. A code like this will need to use Javascript to determine and control when to show or hide a section. I was actually curious if I could code something myself, so I did and I'll share the demos with you below. The example website you shared uses a button to change the section so here's a demo for that. Demo 1 You indicated that you'd like a hover variation, so I made another demo to simulate a "hover/mouseover" switching effect. Demo 2 If you're comfortable with custom code, it wouldn't be hard to install the demos using Code Blocks. Let me know if you want the templates. -Dan
  12. Hello, Try this code below. section[data-section-id="60cdc17f7d058466d13a964f"] { .sqs-block { padding-bottom: 0px !important; } } -Dan
  13. Hello, Try this code and tweak some of the settings to your liking. Border radius is your rounded corners, Color is your text color, and by changing the Display to Inline-Block we're able to adjust the width of the box. Without using an absolute measurement like (px), we'll end up with different sized boxes. section[data-section-id="60ca314ce05af83b627d8fc9"]{ .portfolio-hover-item-content { display: inline-block !important; width: 300px; background: #000; border-radius: 15px; } .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title { color: #fff !important; font-size: 2.5vmax; } } On mobile devices you might encounter some sizing issues. Testing these fixes are a bit tricky when overriding the default settings but this might help. @media only screen and (max-width:640px) { .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title { font-size: 2.5vmax !important; } } Hope this helps! -Dan
  14. Hello Anne, Could you give us a little more information on what exactly you need for the markdown code. Are you looking for a copyright symbol/icon to use? Are you trying to watermark specific content? Did you want to prevent users from interacting or saving your website content? Were you looking for a generic copyright disclaimer? It's a little vague in your wording but I assure you there are answers to each of the questions I asked, so just let me know! 🙂 Regarding your footer logo problem, could you please share the URL to your website so we can take a look at the image in question. Thanks, Dan
  15. I've seen this issue before actually, the problem is with the plugin you're using. The plugin information it displays doesn't follow the proper format for Google SEO/Rating codes. The best option is to either create a markup within each post that follows the Google format, or use a new ratings plugin that logs this information for you. I read this article a long time ago, hopefully this steers you in the right direction. -Dan
  16. Hello, Could you please share the password to view your page so we can get a better look at what's happening? Thanks, -Dan
  17. Hello Josh, Really cool website by the way! But the reason this is happening is because you have a transparent header selected, what this means is that the header will inherit the background of the section, which is a video background. The only way to fix this within the options squarespace provides is to select a non-transparent background but I realize this kind of ruins the vibe of the landing page... So, we can use some custom CSS for this page. Try this code below and let me know if this solves the video background issues. section[data-section-id="5fad6ef6e741ef42c9b5b663"] { .page-section:first-child { padding: 0 !important; } }
  18. It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID. section[data-section-id="60c47f0723695f68078a9d17"] { @media only screen and (max-width: 640px) { .gallery-fullscreen-slideshow-item-img img { display: none; } .gallery-fullscreen-slideshow-item-img::before { content: ""; position: absolute; width: 100%; height: 100vh; background-image: url("YOUR_URL_IMAGE_HERE"); background-size: cover; background-position: center, center; background-repeat: no-repeat; z-index: 1; } } } Hope this helps, -Dan
  19. Hello, Try the following code, let me know if this helps. section[data-section-id="60c763a3f3cec4103bebcf6f"] { @media only screen and (max-width: 640px) { .sqs-row { display: flex; flex-direction: column !important; } .sqs-col-6 { flex-direction: column-reverse; display: flex; } .sqs-col-6:last-child { display: flex; flex-direction: column; } } } -Dan
  20. Hello Apollow90, The bottom of what screen? The bottom of the entire website or the bottom of a specific section or page? If you could share a URL to the page where you want to display the rotating icon, I can give you an accurate code and the CSS to use. Thanks, -Dan
  21. Hey there, Try this code. .blog-item-wrapper p:last-child { margin-bottom: 2.5em !important } The blog-item-wrapper is the wrapper of all of the blog contents and we've added a "p:last-child", which means that last paragraph of the blog should have a bottom margin of 2.5em. Otherwise, every paragraph in the blog post will have the margin. Hope this helps, -Dan
  22. Hi Jess, Try the following code, let me know if this fixes the cropping issue on mobile devices for your "new-page" section. #collection-60c47ed7c714e269022b2aff { @media only screen and (max-width: 640px) { .gallery-fullscreen-slideshow { height: 100% !important; } } } Hope this helps! -Dan
  23. Hello there, Methods to add a credit/auto link back to your website when a user cuts or copies your content elsewhere could prove to be more complex and difficult because you do not have full access over the core Squarespace template. People will just delete the end line too. But I will say, if you're sharing material that you don't want people to steal, and you know that it is your original work, you own the copyright for it and you'd be operating well within your rights to hold individuals accountable. I digress, but if you're open to an alternative method, you can just disable the ability for anyone to right-click or copy your content using Jquery. Insert the following code into your Header Code Injection Field. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function () { $("body").on("contextmenu",function(e){ return false; }); }); </script> <script> $(document).ready(function () { $('body').bind('cut copy paste', function (e) { e.preventDefault(); }); }); </script> When you test this via the SQS editor, you'll be able to highlight the content on your end, but if you access your public website on another tab or window, you won't be able to copy or right-click. Hope this helps, -Dan
  24. Hello, Could you please add a private password to your page, or website, and share that with us. Currently, we are blocked from entering the site. Once you've done that we can better assist you. Also, are you looking to add a single image to overlay all photos or a different overlay for each portfolio item? -Dan
  • Create New...