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

bangank36

Circle Member
  • Posts

    4,499
  • Joined

  • Last visited

  • Days Won

    53

Community Answers

  1. bangank36's post in Change Position of Header/Branding Logo & Navigation Menu was marked as the answer   
    Could you remove the transparent part of the logo, make it less high?


  2. bangank36's post in Adding Spacing to Stacked Social Icons was marked as the answer   
    Place this in Settings -> Design -> Custom Css
    .social-icons-size-extra-large.social-icon-alignment-right .sqs-svg-icon--wrapper { margin-bottom: 10px; }
    Btw, your site is really beautiful! Which template have you used?
  3. bangank36's post in Close Lightbox Form when clicking outside the form was marked as the answer   
    <script> document.addEventListener('DOMContentLoaded', function() { document.addEventListener("click", function(e) { var element = e.target; if (element.classList.contains('lightbox-inner')) { element.querySelector(".lightbox-close").click(); } }); }); </script> Place this snippet in custom code injection, detail here
  4. bangank36's post in Reduce Margin & Add Background Image on Blog Articles was marked as the answer   
    Add this to Settings->Design->Custom Css
    .blog-item-wrapper article.entry { padding-top: 5vh; }  
  5. bangank36's post in [Pazari Template] Help Changing Individual Hover Colors & Font Color? was marked as the answer   
    You can use grid-item url to make different color for them like so
    .grid-item .portfolio-title { color: #fff !important; } .grid-item:hover .portfolio-overlay { opacity: 0.6 !important; } .grid-item[href*=unfiltered]:hover .portfolio-overlay { background: #ffeb3b; } .grid-item[href*=sodelicious]:hover .portfolio-overlay { background: #A91E63; }
  6. bangank36's post in Adding descriptions to carrousel was marked as the answer   
    I made a slightly changes, please check if it work
    <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section-exclude,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>  
  7. bangank36's post in Disable site-wide animation for specific elements was marked as the answer   
    Hello there,
    1. You can find the block id using Find Squarespace Ids Chrome extension
    2. All the animation has same class name so disable for that block like
    section[data-section-id="5f971ec784fb155f387c538c"] .preFade { transition-property: none; }
  8. bangank36's post in How can I add space between two Product images? was marked as the answer   
    Hi do you want it like so
    <style> .sqs-block-image-figure { padding: 1vw } </style> There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection
    The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced
     

  9. bangank36's post in Vertical alignment of text next to inline image was marked as the answer   
    Hi there
    Could you make sure all blog pages share same column template? Try this on custom css
    .BlogItem.hentry .sqs-block-content p { font-family: Arial,Helvetica,sans-serif; font-weight: 400; font-style: normal; font-size: 12px; } @media only screen and (min-width: 601px) { .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row { display: flex; } .BlogItem.hentry .sqs-col-3 > [data-block-type='2'] { position: absolute; bottom: 10%; } } @media only screen and (max-width: 600px) { .BlogItem.hentry .col { width: 100% !important; } .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row { display: grid; } .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row > .sqs-col-3:first-child { order: 2; } }
  10. bangank36's post in Aubrey different background for mobile was marked as the answer   
    To answer the blurry images, I checked the image, it was too small I think, size is 1000x800 only when upload, so it scaled on big screen
    To add new image background
    1. Upload new image and get its url here
    Using the CSS Editor – Squarespace Help
    2. In your homepage, add a custom css like so
    Pages -> Gear Icon next to the page -> Advanced
    3. Replace the image url with this code

    <style> @media only screen and (max-width: 768px) { .collection-type-template-page #outerWrapper { background-image: url( replace-this-text-with-image ); } } </style>  
  11. bangank36's post in Force active status of parent main navigation on Gallery - Wells was marked as the answer   
    You can provide a temp password so we can have a look, thanks
  12. bangank36's post in transparent and smaller mobile menu in brine / squarespace 7.0 was marked as the answer   
    Try to use this
    <style> @media (max-width: 640px) { .Mobile-overlay-menu { width: calc(70% - 60px); } .Mobile-overlay { background: transparent !important; } .Mobile-overlay-nav--primary:before { display: none; } .Mobile-overlay-close { left: auto !important; right: 0 !important; } } </style>  
  13. bangank36's post in Creating Full-Width Image Blocks was marked as the answer   
    I saw you used jquery for the snippet so I suggest the chages like
    <style> .fadesection { content: ''; position: absolute; width: 100%; background: rgb(255,218,14); background: -moz-linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); background: -webkit-linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); background: linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffda0e",endColorstr="#1f2056",GradientType=1); } </style> <script> $(document).ready(function() { $('section.page-section[data-section-id="5f480e5b14bf3a6b4cab2492"]').append("<section class='fadesection'></section>"); var section = $(".fadesection").closest("section.page-section"); $(".fadesection").css({ top: $("#header").height(), height: section.height() }); $(window).on("resize", function() { $(".fadesection").css({ top: $("#header").height(), height: section.height() }); }); }); </script> For the gradient options, please using this site for generating
    https://cssgradient.io/

  14. bangank36's post in Reducing spacing between font types was marked as the answer   
    You may want to try margin top reducing
    To add CSS, go to Design -> Custom CSS
     
    .html-block h1 { margin-top: 0; }
  15. bangank36's post in How to Stack just one Grid Gallery in Mobile (Brine)? was marked as the answer   
    You may want like this
    @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1598664911761_4656 .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } #block-yui_3_17_2_1_1598664911761_4656 .sqs-gallery-design-grid-slide img { width: 100% !important; height: auto !important } }
  16. bangank36's post in Setting background color of text in front of an image (Farro template) was marked as the answer   
    You may want to use padding on the element like so

  17. bangank36's post in Henson: Image at bottom of page only on hover was marked as the answer   
    .collection-images.index-nav-images { opacity: 0; } .nav-hovered .collection-images.index-nav-images { opacity: 1; }  
  18. bangank36's post in BLOG POSTS Custom CSS for hiding navigation was marked as the answer   
    Hi,
    Did you add the script into individual pages in the main navigation Advanced->Custom Code
  19. bangank36's post in CSS on all pages except one was marked as the answer   
    You can do like this
    body:not(#collection-5e8c158b6e74072ae107edaa) img { transition: all ease-in-out 500ms !important; } body:not(#collection-5e8c158b6e74072ae107edaa) .sqs-block-image:hover img, body:not(#collection-5e8c158b6e74072ae107edaa) .slide:hover img, body:not(#collection-5e8c158b6e74072ae107edaa) img:hover { -webkit-filter: brightness(0.7) !important; filter: brightness(0.7) !important; } body:not(#collection-5e8c158b6e74072ae107edaa) img { -webkit-backface-visibility: hidden; transform: translate3d(0px,0px,0px); }  
  20. bangank36's post in Display only descriptions in Lightbox was marked as the answer   
    You did not provide your site url so I assume it similiar to this gallery: https://www.adamkatweddings.com/wedding-photographer-london-gallery
    With h1 is the caption and p tag is description, we can do this
    .sqs-lightbox-meta h1 { display: none; }  
  21. bangank36's post in Gallery Block Custom Thumbnails was marked as the answer   
    #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid { /* Set "design-grid-counter" to 0 */ counter-reset: design-grid-counter; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after { background: #9E9E9E; z-index: 998; content: " "; width: 100%; height: 100%; left: 0; top: 0; position: absolute; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before { /* Increase "design-grid-counter" by 1 */ counter-increment: design-grid-counter; content: "0" counter(design-grid-counter); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #9E9E9E; z-index: 999; color: #fff; font-size: 3em; transition: opacity 0.75s; } #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before, #collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after { opacity: 0; cursor: pointer; z-index: -999; } My bad, pls take this http://recordit.co/Ywd7XDS9EX
  22. bangank36's post in Remove padding from navigation was marked as the answer   
    Can be, please paste this into Settings->Custom Css
    .header-layout-branding-center-nav-center .header-title-nav-wrapper { width: 100%; display: block; flex: 100%; }
  23. bangank36's post in Second Image on Hover in a 7.1 Gallery was marked as the answer   
    Since you can grab the uploaded image url, I can suggest you use psuedo :after selector for this, using the unique url in the link tag
    a[href="/alley-house-1"]:after { background: url(https://images.squarespace-cdn.com/content/v1/5e9f52c…/1591746790510-TLM3OCA969QR248359Q9/ke17ZwdGBToddI8pDm48kNIz01GxeNglza_traDdevsUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKck_3oyjxD2E6g656zntaR4vQBwPCV_Yc9BnFEdXAQ6xzMr4wPFfphDwEQcs_2fgoE/Pavilion+House+Sect_wt-1.jpg?format=300w); content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 0.75s; } a[href="/alley-house-1"]:hover:after { opacity: 1; } Output: http://recordit.co/HDXB6rAspQ
  24. bangank36's post in Moving/Adjusting Navigation Bar in Harris was marked as the answer   
    Feel free to check solution for option 2: Add the snippet below into custom css code

    @media screen and (max-width: 768px) { #block-yui_3_17_2_1_1591890364287_14552 h2 { line-height: 0.9em; } } @media screen and (min-width: 768px) { #header { display: block; } #header [data-nc-container="right"] { text-align: center; display: block; position: relative; top: -20px; } }  
  25. bangank36's post in Displaying links on mobile that are hidden by code used on the desktop version was marked as the answer   
    I believe it is
    @media screen and (max-width: 800px) { .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-folder-content .header-menu-nav-item { display: block !important; } }
×
×
  • Create New...