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

Wolfsilon

Circle Member
  • Posts

    167
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Wolfsilon reacted to tuanphan in how to override squarespace default margin   
    I see the site has some problems. Do you want to fix these?
    Site URL – https://www.foilrar.org/
    1. (Mobile-Homepage) the site doesn’t look good.

    2. (Mobile-Homepage) Text very long. Want to change to 1 item/row?

    3. (Tablet-Footer) Reduce text size?

    4. (Mobile-Blog posts) Want to add Prev/Next text next to arrows?

  2. Like
    Wolfsilon reacted to lucasnewyork in How do you adjust spacing / padding between social icons in the footer?   
    That did it @Wolfsilon! You're a genius.
  3. Like
    Wolfsilon reacted to derricksrandomviews in 7.0 index page thumbnail drop shadow.   
    That worked terrifically well. Thank you Dan! I did modify it just a bit. 
  4. Like
    Wolfsilon got a reaction from helloVlad in How to replace logo with SVG 7.1?   
    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.
  5. Like
    Wolfsilon got a reaction from derricksrandomviews in 7.0 index page thumbnail drop shadow.   
    Hello!
    Not sure if this is a "nice" drop-shadow but this code worked for me on my end.
    #projectThumbs .project { box-shadow: 0px 5px 5px rgba(0,0,0,0.9); } Hope that this helps.
    -Dan
  6. Like
    Wolfsilon got a reaction from lucasnewyork in How do you adjust spacing / padding between social icons in the footer?   
    .social-icons-size-small.social-icons-style-regular.social-icon-alignment-center .sqs-svg-icon--wrapper, .social-icons-size-extra-large.social-icon-alignment-center .sqs-svg-icon--wrapper { margin: 0 5em !important; } Adjust the "5em" accordingly.
     
    Hope this helps!
  7. Like
    Wolfsilon got a reaction from lucasnewyork in How do you adjust spacing / padding between social icons in the footer?   
    Hello!
    Could you please share a the URL to your website? Their are several methods that social icons are inserted into the footer and I cannot provide a working code without knowing how your icons are inserted. 
    Thanks,
    Dan
  8. Love
    Wolfsilon reacted to jdillagodzilla in Hover effect on summary carousel block   
    @Wolfsilon the $19 plugin did the trick. Purchase + installed in less than 10min ✌️
  9. Love
    Wolfsilon got a reaction from tuanphan in how to override squarespace default margin   
    Hello,
    You can override the default text padding/margin settings by applying some adjustments in the Custom CSS tab. In your case, you can apply the same padding and margin settings by targeting all basic text elements. This should remove most of the "space" between your elements.
    h1, h2, h3, h4, p { margin: 0; padding: 0; } Hope this helps!
  10. Thanks
    Wolfsilon reacted to laurenkilbane03 in Hover Effect on Gallery Images   
    @Wolfsilon That worked perfectly... I can't thank you enough! You are the BEST.
  11. Like
    Wolfsilon got a reaction from laurenkilbane03 in Hover Effect on Gallery Images   
    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!
  12. Like
    Wolfsilon got a reaction from tuanphan in Hover Effect on Gallery Images   
    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!
  13. Love
    Wolfsilon got a reaction from KatherineTGS in Adding an iFrame sizing not right   
    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!
     
  14. Like
    Wolfsilon got a reaction from tuanphan in Open page in a new tab from a button in Bedford template   
    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.
  15. Like
    Wolfsilon got a reaction from tuanphan in Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1   
    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.
  16. Like
    Wolfsilon got a reaction from tuanphan in how to create an offset border from background for text box   
    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!
  17. Like
    Wolfsilon got a reaction from tuanphan in Custom CSS code not rendering in homepage banner description   
    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!
  18. Thanks
    Wolfsilon got a reaction from marlim in Changing text color in blocks using css   
    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.
     
  19. Like
    Wolfsilon got a reaction from SquareRefresh in Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1   
    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.
  20. Like
    Wolfsilon got a reaction from SquareRefresh in Open page in a new tab from a button in Bedford template   
    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.
  21. Like
    Wolfsilon got a reaction from tuanphan in Squarespace returning me a syntax error for style tag.   
    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.
  22. Like
    Wolfsilon got a reaction from tuanphan in Changing the size of the excerpt text for Brine 7.0   
    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!
  23. Like
    Wolfsilon got a reaction from creedon in Squarespace returning me a syntax error for style tag.   
    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.
  24. Like
    Wolfsilon reacted to bangank36 in [Custom Plugin Early Access] 360 image viewer block   
    Site URL: https://beyondspace-showcase.squarespace.com/shop-demo/p/sphereviewer/?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo
    Hello fellows,
    I am about to launch my latest Squarespace Plugin - Sphere Viewer Block.
    It provides an easy-to-use interface to integrate your 360 spritesheets images into Squarespace site, I wrote it so you can create it from Block Editor.
    I will give 5 single-site license for first 5 builders/designers who is interested in adding this feature for their site, I am welcome the feedbacks to make it work well before launch
    You can leave comment below or DM for access
    DEMO: https://beyondspace-showcase.squarespace.com
    Disclaimer: this is custom code plugin, it is not provided by Squarespace, so do not bother Squarespace support when there is issue, reach me instead


     
  25. Like
×
×
  • Create New...