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

Burchard

Circle Member
  • Posts

    20
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Sure, here it is a bit more in-depth; This is the bit of code to add the social icons. I added e-mail and Instagram, to figure out the specific codes for other platforms I would suggest to briefly turn on the icons in the design styles and then copy that code; <div class="social-footer"> <a href="http://instagram.com/your-username" target="_blank" class="SocialLinks-link instagram-unauth" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#instagram-unauth-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#instagram-unauth-mask"></use> </svg> </div> </a><a href="mailto:name@yourwebsite.com" target="_blank" class="SocialLinks-link email" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#email-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#email-mask"></use> </svg> </div> </div> This is the CSS I used to position the icons: /* Footer social icons */ .social-footer { display: flex; justify-content: center; }
  2. Fixed it after some fiddling around. I added the social links to the header in the Site Styles. Then I copied the piece of code Squarespace uses to add the icons in the header. I pasted this in a code block in the footer and used CSS to position it. I then turned the social links off again in the Site Styles. That's it, works like a charm 🙂
  3. Site URL: https://www.maartenrots.nl/ Hi there, I'm using Brine (Moksha) and would like to have the social icons in the footer instead of the header. It would be great to get some help with this, thanks!
  4. I ended up using a third party plugin to turn the grid gallery inot a masonry-style gallery, found here: https://www.sqspthemes.com/plugins/masonry-style-squarespace-gallery-plugin I used the below code to dim the image and make the title appear. Also, I used <BR><SMALL> in the title to create a subtitle. /* Hover effect */ .image-slide-anchor:hover {opacity: 0.05} .sqs-gallery-block-grid .slide .margin-wrapper { display: flex; flex-direction: column; } .image-slide-title { pointer-events: none; } @media screen and (min-width: 900px) { .sqs-gallery-block-grid .slide .margin-wrapper { flex-direction: column-reverse; } .sqs-gallery-block-grid .slide .margin-wrapper a { transform: translateY(15px); } } /* Show title on hover */ @media screen and (min-width:901px) { .image-slide-title { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); opacity: 0; } a:hover + .image-slide-title { opacity: 1; } }
  5. Hi Tuan. I have, thanks to your help 🙂 I really appreciate your input, will post the solution I went with for future reference
  6. Site URL: https://www.maartenrots.nl/slideshow-test Hi there, I'm using Brine (Moksha) and want to modify the hover effect on slideshow gallery images. I have found some CSS code that helps me change certain things, but I am not getting to the result I have in mind. I would like the hover effect to cover the full image, instead of just a small area in the center. It will have to remain clickable as it will link to a page on my website. On mobile devices I would like the title and description to appear below the image. I am testing this on the following page: https://www.maartenrots.nl/slideshow-test At the moment I am using the following (incomplete) code: .sqs-block-gallery .sqs-gallery-block-slideshow { .meta .meta-inside { background-color: rgb(255, 255, 255,); } .meta-title { text-align: center; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; color: #042663; } .meta-description p { text-align: center; color: #9DB0D8; font-size: 12px; letter-spacing: 1px; padding-top: 4px; max-width: 550px; } .meta-description a:link { color: #9DB0D8; text-align: center !important; } .sqs-gallery-design-stacked-slide:hover { } @media (max-width : 667px) { .meta { display: block !important; max-width: 70% !important; min-width: 70% !important; left: 50% !important; } .meta-title { font-size: 12px; } .meta-description p { display: none; } } } I would really appreciate some input, thanks in advance!
  7. Thank you very much, I would never have figured that out myself. Hope this will be of help to others as well.
  8. Thanks, that works like a charm! (and thank you for your fast reply!) The only thing I'd like to change is to have the text inside that button to be centered, do you have an idea for that as well?
  9. Site URL: https://www.maartenrots.nl/patron To offer customers the possibility to sign up for a subscription with creditcard as well as with PayPal (Squarespace doesn't support PayPal for recurring payments...) I've come up with the solution to use two separate buttons below a block of text. One button is a regular button, this one links to PayPal. The other one is a product block set to display the button only. My problem is that I can't figure out how to make the add-to-cart button span the container, like the regular button does after playing around with some CSS, just for this particular page (#patron-plans). On desktop everything looks fine, I have manually made the size of the add-to-card button to more or less the same width as the block above it. But when you switch to tablet or mobile view the button size changes, where the regular button nicely follows the width of the block above. I would really appreciate your input and/or solutions to make this work, thanks a lot in advance. Here's the CSS I have used (applied to #paypal-plans only): /* Patron Creditcard Button Styling */ .sqs-add-to-cart-button{ font-size: 12px; letter-spacing: 1px; line-height: 2em; border-width: 0px; background-color: #77A2AC; color: #fff; } .sqs-add-to-cart-button:hover{ font-size: 12px; letter-spacing: 1px; line-height: 2em; border-width: 0px; background-color: #D8E8E9; color:#545454; } .sqs-add-to-cart-button-inner { padding-left: 10px; padding-right: 10px; } /* Patron Paypal Button Styling */ .form-block .lightbox-handle { font-size: 12px; letter-spacing: 1px; line-height: 2em; border-width: 0px; width: 100%; color: #fff; background-color: #9FC7CD; } .form-block .lightbox-handle:hover { font-size: 12px; letter-spacing: 1px; line-height: 2em; border-width: 0px; width: 100%; color: #fff; background-color: #D8E8E9; color:#545454; }
  10. Thanks for your input Paul. I tend to agree that it may not look so great, but that's not always the case. Shouldn't it simply be possible to force the logo to the center, regardless whether it's looking good or not? There's a place for not so good looking stuff too, right?
  11. I am running into the exact same issue, working on Rover (Brine). Would love to hear if someone has a solution for this! (@natalienet I see you have worked around it by forcing the nav items to the left and right, that's one way to deal with it, but I would really like to know if there is a way to force the logo to sit in the center of the header)
×
×
  • Create New...