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

Wolfsilon

Circle Member
  • Posts

    170
  • Joined

  • Last visited

Community Answers

  1. Wolfsilon's post in Change order of Header Button & Cart Icon – Squarespace 7.1 was marked as the answer   
    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
  2. Wolfsilon's post in Show image on button hover was marked as the answer   
    Hello there,
    You can achieve this effect by targeting the button on the image block. You'll want to use a block identifier extension to determine which image the effect will be applied too. When I wrote this code for you, I was using an Image Poster block and my default button style is a pill shaped button which is why the border radius is "5em" -- so you may need to adjust this accordingly or remove it entirely.
    #Your_Block_ID { a { position: relative; } a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; border-radius: 5em; background: url("Your_URL"); z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all .5s ease; } a:hover:before { opacity: 1; } } The first 4 lines essentially determine that we should be targeting the "a" element inside of the parent Block ID. We then add a "pseudo layer" with an opacity of "0", making the element hidden. To "unhide" the element we use the hover property to change the ":before" layer opacity to "1" .
    I would encourage you to play around with the settings in this code and see what happens when you hover on the button, there are a lot of properties, filters, positions, sizes and plenty of other fun stuff to tweak.
     
    Hope this helps!
    -Dan
  3. Wolfsilon's post in Change Image Opacity  was marked as the answer   
    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
  4. Wolfsilon's post in How do you adjust spacing / padding between social icons in the footer? was marked as the answer   
    .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!
  5. Wolfsilon's post in Changing text color in blocks using css was marked as the answer   
    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.
     
  6. Wolfsilon's post in I need help removing the padding between images I post. Can anyone help? ​🙏​​🙏​​🙏​ was marked as the answer   
    I think you'd be able to decrease the section padding in Site Styles, maybe you've tried that. If you have, this might help.     .page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--small>.content-wrapper { padding-top: 0; padding-bottom: 0; }
×
×
  • Create New...