Jump to content

Wolfsilon

Circle Member
  • Posts

    410
  • Joined

  • Last visited

  • Days Won

    1

Community Answers

  1. Wolfsilon's post in CSS for background color of header was marked as the answer   
    You can use Custom CSS to change the color of the header. To do this, navigate from "Home" > Design > Custom CSS. Insert the code and adjust the background property by inserting the hex color or name of your desired color, if applicable.
    .Header { background: #000; } Hope this helps,
    Dan
     
  2. Wolfsilon's post in Help with Mobile View of Specific Page was marked as the answer   
    Hi there,
    iFrames can be tricky when trying to customize further without having access to the widget itself. You can try using this code. Hope this helps!
    #block-yui_3_17_2_1_1667509689769_14831 .sqs-block-content div { width: 100vw !important; }  
  3. Wolfsilon's post in Mobile color issue was marked as the answer   
    What a good band... Mad Season....
    Anyways, you can control the background of the mobile navigation menu by navigating to the Site Styles panel. I believe there also used to be an option within the 'Edit Header' tool too. Just make sure you select the little mobile icon.
    Best,
    Dan
  4. Wolfsilon's post in Adding a division line in the bottom of product page. was marked as the answer   
    I think you should be able to achieve this by using the following code:
    .ProductItem-relatedProducts { border-bottom: 2px solid; padding-bottom: 15vh; } Hope this works!
     
    Best,
    Dan
  5. Wolfsilon's post in Images in testimonials carousel have funky borders (and text) was marked as the answer   
    Hi,
    You could try adding this snippet into your custom CSS. Hope this helps!
     
    Best,
    Dan
    .user-items-list-carousel__media-inner img { box-sizing: border-box; }  
  6. Wolfsilon's post in Text Color on Shopping Cart Checkout was marked as the answer   
    Hi!
    If you only need to change the text color you can try the following using Custom CSS:
    #cart { color: #000000 !important; }  
  7. 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
  8. 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
  9. 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
  10. 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!
  11. 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.
     
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.