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

tuanphan

Circle Member
  • Posts

    32,634
  • Joined

  • Last visited

  • Days Won

    330

Community Answers

  1. tuanphan's post in How to add an extra thumbnail bellow the title and above the excerpt - blog was marked as the answer   
    Try adding to Design > Custom CSS
    /* Post 1 */ article .article-index-1 h1 a:after { content: ""; display: block; background-image: url(https://cdn.pixabay.com/photo/2021/06/29/18/55/mountain-slope-6374980__340.jpg); width: 100%; height: 70px; background-repeat: no-repeat; background-size: cover; } /* post 2 */ article .article-index-2 h1 a:after { content: ""; display: block; background-image: url(https://cdn.pixabay.com/photo/2021/04/12/21/46/girls-6174061__340.jpg); width: 100%; height: 70px; background-repeat: no-repeat; background-size: cover; }  
  2. tuanphan's post in Adding Text to Header was marked as the answer   
    Add to Design > Custom CSS
    /* text under logo */ a#site-title:after { content: "free library for kids"; display: block; font-size: 15px; margin-top: -50px; color: white; }  
  3. tuanphan's post in Change order of mobile navigation was marked as the answer   
    Add to Design > Custom CSS
    /* Mobile menu order */ @media screen and (max-width:767px) { nav.header-menu-nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }  
  4. tuanphan's post in How do I align an image to the bottom of a section? was marked as the answer   
    Add to Design > Custom CSS
    /* align bottom image */ [data-section-id="60dc52c148fd727d3ece954e"] .content-wrapper { padding-bottom: 0px !important; } div#block-yui_3_17_2_1_1625065456004_8072 { padding-bottom: 0; }  
  5. tuanphan's post in Creating a gallery with text and button aside. (Mixing Headline and Gallery) was marked as the answer   
    When you purchase plugin, you will get a txt file with code. Copy code & add to Code Injection > Footer. Then save & reload the site.
    Then, you edit the page >> add a block >> you will see Gallery Block.
  6. tuanphan's post in Increase Responsive Breakpoint from 641px to higher value was marked as the answer   
    Design > Site Styles > Mobile - Mobile Breakpoint

  7. tuanphan's post in Change navigation link underline to an orange dot was marked as the answer   
    Add to Design > Custom CSS
    /* nav active */ .header-nav-item--active a { background-image: none !important; } .header-nav-item--active a:after { content: ""; display: block; width: 5px; height: 5px; background-color: black; text-align: center; margin: 0 auto; border-radius: 50%; }  
  8. tuanphan's post in Version 7.0 - Shrink logo on scroll was marked as the answer   
    Hi. Your template doesn't have "shrink" class name when scrolling. You need to use JS code to add this class.
    Add this to Settings > Advanced > Code Injection > Footer
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function(){ var visibleTop = 30; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header#header').addClass('header-sticky'); } else { $('header#header').removeClass('header-sticky'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> header#header img { transition: all 0.3s; } header#header.header-sticky img { max-height: 50px; transition: all 0.3s; } </style>  
  9. tuanphan's post in Fix double bullet icons (standard and custom) was marked as the answer   
    Don't remove above code. Add this code
    /* remove default bullets */ .sqs-block-content ul li p::before { display: none !important; }  
  10. tuanphan's post in How to reduce spacing between items on one page only? was marked as the answer   
    Add to Design > Custom CSS
    /* Find out padding */ div#block-yui_3_17_2_1_1624207270810_6104 { padding-top: 1px; padding-bottom: 1px; }  
  11. tuanphan's post in Too Much Space on Embedded Simplecast Player was marked as the answer   
    Add to Design > Custom CSS > then save & reload your site
    /* simplecast player space */ .embed-block-wrapper.embed-block-provider-Simplecast { padding-bottom: 10% !important; }  
  12. tuanphan's post in Aligning Form Fields Side-by-Side was marked as the answer   
    Add to Design > Custom CSS
    /* align form fields */ @media screen and (min-width:992px) { /* date of birth pronouns */ .field-list.clear>fieldset:nth-child(3), .field-list.clear>fieldset:nth-child(4) { width: 50% !important; float: left !important; } /* height vocal range */ .field-list.clear>div:nth-child(5), .field-list.clear>div:nth-child(6) { width: 45% !important; float: left !important; } .field-list.clear>div:nth-child(5) { margin-right: 5%; } .field-list.clear>div:nth-child(7) { clear: left !important; } /* performer phone email */ .field-list.clear>*:nth-child(10), .field-list.clear>*:nth-child(11) { width: 45%; float: left; } .field-list.clear>*:nth-child(10) { margin-right: 5%; } .field-list.clear>*:nth-child(12) { clear: left; } /* argent phone email */ .form-wrapper .field-list>*:nth-child(15), .form-wrapper .field-list>*:nth-child(16) { width: 45% !important; float: left; } .form-wrapper .field-list>*:nth-child(17) { clear: left !important; } .form-wrapper .field-list>*:nth-child(15) { margin-right: 5%; } /* upload */ .form-wrapper .field-list>*:nth-child(19), .form-wrapper .field-list>*:nth-child(20) { width: 50% !important; float: left !important; } }  
  13. tuanphan's post in Transparent Navigation Folder Links - Squarespace 7.1 was marked as the answer   
    Q1. 2. 7 It looks like you solved?
    Q3. You can describe the desired layout. We will give the code
    Q4.Q8. Add to Design > Custom CSS
    /* Mobile */ @media screen and (max-width:767px) { /* q4-Home-buttons */ section[data-section-id="60a3ce53eff4662023d02a95"] .sqs-row { display: block; } /* q8-contact */ section[data-section-id="60a421ddba055009106a58f6"] .sqs-row { display: block; } } Q5. 6. If you remove back drop filter, the header will work. Or we can remove it on mobile/tablet only? What do you think?
    .header { background: rgba(0,0,0,.4) !important; box-shadow: 0px 5px 15px rgb(100 100 100 / 30%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }  
  14. tuanphan's post in Remove the underline under buttons in navigation menu was marked as the answer   
    Add to Design > Custom CSS
    /* remove underline */ div.container.header-menu-nav-item * { border: none !important; text-decoration: none !important; background-image: none !important; } li.category-item a:after { visibility: hidden; }  
  15. tuanphan's post in How do I move/ add the portfolio sub-page bottom navigation to the top of page? was marked as the answer   
    Add to Painters Page Header
    <style> .view-item main#page { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 100px; } section.item-pagination.item-pagination--prev-next { padding-top: 50px; padding-bottom: 5px; } .view-item #page section:first-child { padding-top: 10px !important; } </style>
  16. tuanphan's post in How do I move/ add the portfolio sub-page bottom navigation to the top of page? was marked as the answer   
    Also, need to fix footer?
    Site URL – https://www.willockandsaxgallery.com/
    1. (Tablet-Footer) Change to 2 columns?

  17. tuanphan's post in Full width Archive block was marked as the answer   
    Try adding to Design > Custom CSS
    @media screen and (min-width:992px) { div#block-yui_3_17_2_1_1619795667052_3975 .archive-group-list { -webkit-columns: 300px !important; -moz-columns: 300px !important; columns: 300px !important; } }  
  18. tuanphan's post in Use a costum font for mobile and desktop hamburger navigation was marked as the answer   
    It needs this code
    div.header-menu-nav-item * { font-family: 'Voyager-Regular'; }  
  19. tuanphan's post in Remove top padding on landing page was marked as the answer   
    Add to Design > custom CSS
    /* Free must have images page padding */ body#collection-60cc86e5278f4a55adbaa5ab main.Main { padding-top: 0px; }  
  20. tuanphan's post in Graysacle hover effect on all images but the one hovering over was marked as the answer   
    Add to Design > Custom CSS
    /* grayscale images */ div#page-section-60c694a15b087b02325e889c>.row:hover .image-block { filter: grayscale(1); -webkit-filter: grayscale(1); } div#page-section-60c694a15b087b02325e889c>.row:hover .image-block:hover { filter: grayscale(0); -webkit-filter: grayscale(0); }  
  21. tuanphan's post in How to reduce the bottom padding on home / portfolio section? was marked as the answer   
    Add to Design > Custom CSS
    body.homepage { overflow: hidden; }  
  22. tuanphan's post in Custom font not working on buttons was marked as the answer   
    Hi. Button blocks need this code
    .button-block a { font-family: Inter !important; }  
  23. tuanphan's post in Large Gaps Between Text & Images (Slideshows) on Mobile Version Of Portfolio Website was marked as the answer   
    Try adding to Design > Custom CSS > Then save & reload the site
    /* Mobile-resize slideshow */ @media screen and (max-width:767px) { .gallery-slideshow { height: 35vh !important; } }  
  24. tuanphan's post in Squarespace 7.1 header elements moved above site links was marked as the answer   
    Try this CSS
    .header-actions.header-actions--right { position: relative; top: -30px; }  
  25. tuanphan's post in Unanswered: How to adjust the text of an image card was marked as the answer   
    Try this
    .design-layout-card .image-title * { color: red !important; font-size: 20px !important; }  
×
×
  • Create New...