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 got a reaction from tuanphan in Paragraph margin   
    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
  2. Like
    Wolfsilon got a reaction from tuanphan in Mobile: max image size, text and image alignment   
    Hello,
    You can reduce the width of the blocks on mobile for the circle images and caption by using the code below.
    section[data-section-id="601c878e78a1067166d81580"] { @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1612735498763_6718, #block-yui_3_17_2_1_1612735498763_8361 { width: 50% !important; } } } Taking a look at your website regarding the alignment issues, it appears that you have some CSS limiting the size of the building image to 300px at a previous screen-size media query. By Removing:
    section[data-section-id="601c878e78a1067166d81580"] { @media only screen and (max-width: 769px) { .sqs-block-image-figure.intrinsic { max-width: 300px !important; } } } From your Custom CSS. The image will shift to the left and fill the block. The content should be aligned properly now.
    Hope this helps!
    -Dan
  3. Thanks
    Wolfsilon got a reaction from bchung99 in Removing this minus symbol   
    Hello,
    This code from CodePen uses several CSS lines for the dimensions that are causing the narrow box. You'll want to set the CSS for the following to achieve a specified height and width. 
    #particles-js { position: absolute; width: 100%; height: 50vh; background-color: #b61924; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } In terms of the "minus" symbol. There are several possibilities that could be causing that icon to appear. The first being that while the animation is running, you're still viewing the page in the editor mode. Try refreshing the page and see if the animation and the symbol are still visible. If so, then you'll notice that I removed several lines from the original Particles-JS CSS code that I shared. The first being, a call for "background-image: url("");". You'll want to start there. If this removes the symbol then you're all set.
    If the symbol is still appearing after a refresh and removal of the CSS lines. You're likely going to want to recreate the options file for Particles.JS. The Code on CodePen was last updated in 2016 and includes other resources that might be outdated. I've installed this library numerous times and don't recall seeing this symbol either. So try to reconfigure the settings and install the library again. 
  4. Like
    Wolfsilon got a reaction from derricksrandomviews in Add title to blog landing page   
    Hello,
    On certain templates for 7.0, you can add an intro section to the top of the blog page and add any bit of content that you'd like.
    On 7.1 -- Go to your blog > edit > "add section".  Add a template section or blank section. You should then be able add text or other content to the top section of your blog page.
     
    Hope this helps,
    -Dan
  5. Like
    Wolfsilon got a reaction from tuanphan in Adding unique code   
    Hmm,
    There are ways to achieve something similar using only Squarespace tools, but could be limiting in the features they provide like using a QR code and stuff of that nature. You'll need to find a plugin that can be installed to the Lock Page that can handle multiple passwords, randomly generated passwords, and other features you might want.
    To setup a webpage where users with the password can enter that differs from a password for the main website. Start by creating a new page, complete with styles, forms, and anything else the user should see or do upon entering the correct password. After you've created that page, open the settings by clicking the gear icon and set a password to the page. You'll then want to navigate to Design -> Lock Page. Select a layout and style this page as desired.
    Now that you've selected a Lock Page and created your password protected form page, users should see the Lock Page that you designed earlier and be required to enter the password you set. This is where additional features may be rather difficult to implement. As you can see, there can only be one password and removing that password removes the lock screen feature. You can customize certain aspects of the lock page to either mimic, or replicate this type of setup. A good starting point and article to read would be over on @tuanphan's blog here.
    I know this probably isn't exactly what you're looking for, but hopefully this helps a little bit.
    -Dan
  6. Like
    Wolfsilon got a reaction from bangank36 in Implement distinct, "sticky" sections on single page for scrolling (i.e. one scroll motion brings you to entirely new view on same page)   
    Hello,
    The example you shared and your description sounds like an "auto-scroll" or "scroll-snap" feature. You will need a Squarespace subscription that has Javascript enabled. If you have a plan that supports Code Injection.
    Navigate to Settings > Advanced > Code Injection.
    Copy and paste the following into the Header Code Injection field:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script> <script> $(document).ready(function() { $.scrollify({ section: ".page-section", sectionName: ".page-section", easing: "jswing", scrollSpeed: 800, overflowScroll: true, setHeights: false, scrollbars: true, touchScroll: false, before: function() { $('.page-section').removeClass('active') current = $.scrollify.current(); current.addClass('active') }, }); }); </script> I would encourage you to explore the "Scrollify" website and experiment with different features, speeds, easings, and options. You'll also be able to understand how to control where and when the auto-scrolling should take place. The setup I've provided a bit advanced, but should get you up and running in no time.
     
    Hope this helps,
    -Dan
  7. Thanks
    Wolfsilon got a reaction from cgionfriddo in Flatiron - problem with top row of images being cut off   
    I've definitely experienced issues on 7.0 with grids and summary block thumbnails not sizing properly, usually because of the amount of items or spacing issues. Sometimes it's within the default CSS that conflicts with other areas of the page. The scripts for these blocks are weird sometimes, even if you don't have conflicting Custom CSS.
    This might help your problem:
    #collection-597767a8a5790a133c13e5de { #grid { margin-top: 55px !important; } } Hope this helps!
    -Dan
  8. Like
    Wolfsilon got a reaction from tuanphan in Mobile Custom Site Text - Not Working   
    Hello there,
    Taking a look at your website, I can see the font on some elements. Taking a look at the code you provided, I see that there are some errors in your "font-face" calls. Try replacing them with this:
    @font-face { font-family: 'Romie-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff'); } @font-face { font-family: 'MonumentExtended-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff'); } Your original code had a "}" before the URL of the font. Hope this helps!
    -Dan
  9. Thanks
    Wolfsilon got a reaction from imkelly in Can I create a animated button on my portfolio with a personal account plan?   
    Hello,
    To achieve this effect with scrolling features, you will indeed need to have a website subscription that supports Javascript. Otherwise, you can not animate on scroll. You may still be able to add a circular image that spins around automatically but it won't be controlled by the user when they scroll on your page.  
    -Dan
  10. Like
    Wolfsilon got a reaction from tuanphan in Custom Font: In text boxes but not in header/footer?   
    Hello there,
    When you install a custom font, you will also need to tell your website what elements should use the custom font. Typically, you'll be using:
    p, h1, h2, h3, a { font-family: "Your_Font_Name"; } These are the most common text elements.
    P = Paragraph
    h1 = Heading 1..., 
    and A = Link
    Your header and footer most likely consists of multiple "a" elements and sometimes the code above won't be enough to target all of the elements on your website, so you may need to specifically target the header and footer sections by adding and overriding the default fonts:
    .Header a { font-family: "Your_Font_Name" !important; } Footer:
    .Footer a { font-family: "Your_Font_Name" !important; } If you'd rather use a global font change you can use:
    * { font-family:"Your_Font_Name"; } Hope this helps!
    -Dan
  11. Like
    Wolfsilon got a reaction from Estela in I'm looking for a tool to curate content.   
    Hello,
    Using aggregator plugins and feed generators will depend on the content you are planning to share. Are you pulling content from other sources like social media and news articles? Are you looking for feeds generated from other locations on your website?
  12. Like
    Wolfsilon reacted to Guitarrocks in Show image on button hover   
    Thanks Dan!  You're a star.  Very clean code too.  Works great!
  13. Like
    Wolfsilon reacted to Agha_Waqas in Adding a vector image as a highlight to text   
    Hi Sam. you can use these vector image (png format) as an background image. Add a text and where you add this effect simply make a bold/italic property for it so you can easily target that one word. Upload each image onto squarespace and get the link.

    h2 em {
    font-style: none !important;
    background: url(// aad link here) no-repeat;
    background-size: contain or cover // Use any of this
    }

    and if you want to add these image specific html block then simple grab the ID of the html-block and wrap above text in it, example below

    #Block-id {
    h2 em {
    font-style: none !important;
    background: url(// aad link here) no-repeat;
    background-size: contain or cover // Use any of this
    }

  14. Love
    Wolfsilon got a reaction from tuanphan in adjust only the "header" right/left padding without affecting the rest of the page   
    Hello,
    Wonderful photos by the way! I've tried to take a look at the code you provided but, rightfully so, you've removed the ability to inspect the elements on your page. I'd be more than happy to write some code for you. However, without being able to test and customize the CSS on your page with developer tools -- I cannot provide an accurate solution for you. If you're uncomfortable opening access to the pages, I would suggest using the inspector tools on your end and looking for and applying padding adjustments to divs like: 
    .Header .Header--top or .Header-inner .Header--inner-top 
    (depending on the template/version these divs could vary)
    Let me know if you're still in need of assistance! Feel free to reply here or message me.
    -Dan
  15. Like
    Wolfsilon got a reaction from tuanphan in Reformat Background Image for Mobile   
    Hello!
    Squarespace recommends that you do display text, objects, or elements within the image itself. The image will be cropped at different screen sizes. If you have the ability to remove the text from image, you can add the banners and text information back in by using Squarespace text blocks and a little Custom CSS.
    That being said, I'd be more than happy to help you color and adjust your banner if you decide to go this route. This will be easier than using code to fix this issue.
     
    Hope this helps!
    -Dan
  16. Like
    Wolfsilon got a reaction from tuanphan in Bouncing scroll down indicator in Squarespace 7.1?   
    Hello there,
    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
    <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
     .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     
    Let me know if you need any additional help. Hope this provided a solution for you! 
    Cheers,
    Dan
  17. Like
    Wolfsilon reacted to EbonyW in Bouncing scroll down indicator in Squarespace 7.1?   
    Worked great. Thanks so much, Dan!
  18. Like
    Wolfsilon reacted to Zeeba in adjust only the "header" right/left padding without affecting the rest of the page   
    Thanks so much Dan, I found the proper style name to fix this.
    Thanks for your help!
  19. Like
    Wolfsilon got a reaction from Zeeba in adjust only the "header" right/left padding without affecting the rest of the page   
    Hello,
    Wonderful photos by the way! I've tried to take a look at the code you provided but, rightfully so, you've removed the ability to inspect the elements on your page. I'd be more than happy to write some code for you. However, without being able to test and customize the CSS on your page with developer tools -- I cannot provide an accurate solution for you. If you're uncomfortable opening access to the pages, I would suggest using the inspector tools on your end and looking for and applying padding adjustments to divs like: 
    .Header .Header--top or .Header-inner .Header--inner-top 
    (depending on the template/version these divs could vary)
    Let me know if you're still in need of assistance! Feel free to reply here or message me.
    -Dan
  20. Like
    Wolfsilon reacted to tuanphan in Fill bottom footer to bottom of page   
    Add to Design > Custom CSS
    /* Footer green bar */ div.Footer-inner { padding-left: 0; padding-right: 0; } div.Footer-inner>div:not(:last-child) { padding-left: 125px; padding-right: 125px; } @media screen and (max-width:1024px) { div.Footer-inner>div:not(:last-child) { padding-left: 60px; padding-right: 60px; } } @media screen and (max-width:960px) { div.Footer-inner>div:not(:last-child) { padding-left: 48px; padding-right: 48px; } } @media screen and (max-width:768px) { div.Footer-inner>div:not(:last-child) { padding-left: 36px; padding-right: 36px; } }  
  21. Love
    Wolfsilon got a reaction from brianbyrne7 in I can change the colour of an individual button - but how can I make it a gradient instead of a block?   
    Hello,
    Changing the color from a solid to gradient is easier than you might think and you've already done the hard part in the code you shared above!
    You'll want to find a gradient style and color scheme that fits your needs but your code would look something like this:
     
    #block-e594bfd6c486b80b7d2b .sqs-block-button-element { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } You can find preset web gradients here or create your own here.
    Hope this helps.
  22. Like
    Wolfsilon got a reaction from tuanphan in Change Image Opacity    
    Hello,
    To achieve this effect we'll need to add a bit of Custom CSS to your website. If you have multiple pages with the same image layout and image blocks, the effect will apply to all blocks. However, if you only want to apply to hover effect to an individual page/section you'll need to target each page/section and add the code below.
    I've added several other properties that can be used to help your hover effect stand out. Just remove the "/*" & "*/" to try them out! There are a lot of hover properties and combinations you can use to create your own custom effect. You can Google the different transform properties and values, filters, and easing methods. 
    To apply a site-wide hover effect use the following code:
    .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } For the page you shared specifically use the following code:
    #collection-607e58d7db63ee562a23b8e5 { .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } } Hope this helps!
    -Dan
  23. Like
    Wolfsilon got a reaction from tuanphan in I can change the colour of an individual button - but how can I make it a gradient instead of a block?   
    Hello,
    Changing the color from a solid to gradient is easier than you might think and you've already done the hard part in the code you shared above!
    You'll want to find a gradient style and color scheme that fits your needs but your code would look something like this:
     
    #block-e594bfd6c486b80b7d2b .sqs-block-button-element { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } You can find preset web gradients here or create your own here.
    Hope this helps.
  24. Like
    Wolfsilon reacted to kristobans in Change Image Opacity    
    Hey Dan. Thank you so much! You are super awesome. Perfect. It works. Now I can't decide what I need. 🙂 Too many options. Cheers, Juris 
  25. Thanks
    Wolfsilon got a reaction from kristobans in Change Image Opacity    
    Hello,
    To achieve this effect we'll need to add a bit of Custom CSS to your website. If you have multiple pages with the same image layout and image blocks, the effect will apply to all blocks. However, if you only want to apply to hover effect to an individual page/section you'll need to target each page/section and add the code below.
    I've added several other properties that can be used to help your hover effect stand out. Just remove the "/*" & "*/" to try them out! There are a lot of hover properties and combinations you can use to create your own custom effect. You can Google the different transform properties and values, filters, and easing methods. 
    To apply a site-wide hover effect use the following code:
    .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } For the page you shared specifically use the following code:
    #collection-607e58d7db63ee562a23b8e5 { .design-layout-stack img { transition: all .5s ease; /* border: 2px solid hotpink; */ } .design-layout-stack:hover img { opacity: .5s; /* filter: grayscale(100%); */ /* transform: scale(1.05); */ /* border: 2px solid hotpink; */ } } Hope this helps!
    -Dan
×
×
  • Create New...