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

Leaderboard


Popular Content

Showing content with the highest reputation on 11/12/2019 in all areas

  1. 2 points
    This has to do with AJAX loading. Your previous template probably didn't have it, but Margot does. Disable it, or encapsulate your code in a manner that accounts for it.
  2. 2 points
    moeezali

    Centralize Blog Title

    Hi @alyssameyyy Use this CSS code: .homepage .summary-title { text-align: center; }
  3. 1 point
    Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!
  4. 1 point
    I need to add an audiobook to my list of products but the file size max. is 300mb. This seems excrutiatingly small considering people sell audiobooks and music on this platform. Does anyone know of a work-around that won't effect the file quality?
  5. 1 point
    MagneM

    Customizing Form Button Weight

    Hi @nazaninp This worked for me: .button.sqs-system-button { font-weight: 700 !important; } .button.sqs-system-button:hover { color: hsl(48, 100%, 61%) !important; } Magne
  6. 1 point
    I have the Tudor template. I recently added a blog. I'd like to do a thumbnail photo on the main blog page to make entries more enticing and overall more appealing. I can't seem to. Yes, I did the thumbnail photo in the actual post, but it's not showing up on main blog page. Does tudor blog function allow for thumbnail photos? Thanks
  7. 1 point
    tuanphan

    Background Color

    This code should work (i checked your site with this code) body#cart .Header--bottom { background: #fff; } body#cart .Header--bottom * { color: black; }
  8. 1 point
    remove body#collection-5dc806bc492ddd0f8b9132f4
  9. 1 point
    Add to Home > Design > Custom CSS body#collection-5dc806bc492ddd0f8b9132f4 .project-slide-description-body.has-description-title.has-description-text { background: transparent !important; }
  10. 1 point
    you can setup password & share url.
  11. 1 point
    tuanphan

    Background Color

    replace .Main-content with main.Main
  12. 1 point
    Try adding to Home > Design > Custom CSS .collection-type-events.view-list section.Intro { display: none; } .collection-type-events.view-list .sqs-events-collection-list { margin-top: 50px; }
  13. 1 point
    tuanphan

    Background Color

    /* Product Items */ .collection-type-products.view-item .Main-content { background: #fff; } .collection-type-products.view-item .Header.Header--bottom { background: #fff; } .collection-type-products.view-item .Header.Header--bottom * { color: black; } .collection-type-products.view-item .Main-content * { color: black; } /* Cart page */ body#cart .Main-content { background: #fff; } body#cart .Header--bottom { background: #fff; } body#cart .Header--bottom * { color: black; } body#cart .Main-content * { color: black; }
  14. 1 point
    .image-title.sqs-dynamic-text p { font-family: 'Golden Trail' !important; }
  15. 1 point
    tuanphan

    Flatiron header issue

    Add to Home > Design > Custom CSS (Logo is 35%) ul#nav { float: none !important; max-width: 65% !important; }
  16. 1 point
    You want?
  17. 1 point
    NicoleGardner

    Center Summary Grid Block

    I may be missing an easy fix, but I am looking to center a summary grid block so that when it adapts to larger screens, it doesn't leave awkward spacing on the right side. Any suggestions on code I can put in to simply center-align the block?
  18. 1 point
    I just went live with a website (www.providancepac.com) and I'm having several issues with the YouTube banner videos not loading both on mobile devices and one in Chrome on MacBook Pro. On IPhone in Safari the Video does not load and fallback image is a solid color. On Samsung phone in Chrome video will play but I have to click the website logo and then video plays but not always. On Ipad in Safari & Chrome fallback image shows but no video. On Macbook Pro in Chrome video does not play until I reload the site by clicking the logo. Not finding a fix for these issues in the forum topics I have searched so far. Any suggestions are much appreciated.
  19. 1 point
    For me I had to add this to your custom CSS section: header { position: fixed; width: 100%; z-index: 4; } so it's fixe, take 100% of the width of the screen, and is always saw first (index)
  20. 1 point
    Solution with Javascript based on built in YUI3. The proof of concept is here, but not yet online, as it is not translated yet. You need a password to open it.http://www.inselhostel.com - Password: inselhostel This solution has the following features: as many languages you want to add and delete pages in configured languages with automatically adapted menues works automatically for primary and secondary navigation easy configuration of new languages while translating into a new language or translating a new page, these pages do not appear on your site you can create a fully styleable and customizable language menue no extra cost for external services no template restrictions: should be adaptable to each template SEO works: Google uses natural language detection and pages do physically exist under unique urls Quick step by step tutorial: 1) Create your pages in Squarespace.Use iso language codes to for defining unique url slugs per page in the page settings. Translate the url slugs to the respective language. For example: **en**/index **de**/index **en**/folder/index **de**/ordner/index **en**/folder/page **de**/ordner/seite The DE--- and EN--- Pages in the tree are just a visual orientation help without function. Just disabled pages oder folders. 2) Inject the javascript snippet described below in Settings > Advanced > Injection > Footer and configure the script to your needs. This will be explained below step by step. Check your site, if the menues are display correct. Check with debugger for JS errors. 3) Create your language switch. Solution 1-3 require no coding skills. Solution 4 requires css and js skills. a) Solution 1: Create a cover page with a button or link for each language. b) Solution 2: Create the language menue within the main navigation Examle structure for two lanuges ---------------------------------------------------------------- label Url Slug Page Type ---------------------------------------------------------------- EN /en/language Folder English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index DE /de/language Folder English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index c) Solution 3: Create the language menue in the secondary navigation if supported by your template Examle structure for two lanuges ---------------------------------------------------------------- label Url Slug Page Type ---------------------------------------------------------------- English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index d) Solution 4: create menue dynamically with yui, javascript and customize it for your needs and template. Inject custom CSS in Squarespace. You may use a flag sprite to display country flags in language menue. Example CSS posted below. Full script snippet <script> /* LANGUAGE MENUE IN SQS WITH YUI3 ** (c) Raphael Boos, soft.works 2015 ** Version: 1.0 ** Inject in Settings > Advanced > Code Injection ** Easy Language Menues in SQS ** Convention: first level of all URL Slugs is language separator ** Expects predefined html structures: #mobileNavigation|#mainNavigation|#secondaryNavigation > div > a|label ** Old code: var allowedLanguages = ['de','en']; if(allowedLanguages.indexOf(urlparts[0]) != -1){ */ YUI().use('node', function (Y) { // output a menu var output = false; // set default language var language = "de"; // define languages var allowedLanguages = new Array(); allowedLanguages['de'] = { label:'Deutsch', short:'DE', url:'/de/index', flag:'<i class="flag-icon flag-icon-de"></i>', lang:'de-DE' }; allowedLanguages['en'] = { label:'English', short:'EN', url:'/en/index', flag:'<i class="flag-icon flag-icon-en"></i>', lang:'en-GB' }; // detect current language var urlparts = document.location.pathname; if(urlparts.startsWith("/")){ urlparts = urlparts.substr(1); } if(urlparts.endsWith("/")){ urlparts = urlparts.substr(0,urlparts.length-1); } if(urlparts.length) { urlparts = urlparts.split("/"); if(urlparts[0] in allowedLanguages){ language = urlparts[0]; } } var selector = [ '#mainNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#mainNavigation > div > a:not([href*=\"/' + language + '/\"])', '#mobileNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#mobileNavigation > div > a:not([href*=\"/' + language + '/\"])', '#secondaryNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#secondaryNavigation > div > a:not([href*=\"/' + language + '/\"])' ]; // remove all nodes not in current language Y.all(selector.join()).get('parentNode').remove(); // output: append to main and mobile navigation if(output){ Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top')); } // adapt html lang attribute Y.one('html').setAttribute('lang', allowedLanguages[language].lang); }); function buildLanguageMenuHTML(strCurrentLang, arrAllowedLangs, strClass){ var htmlTemplate = '<nav id="langNavigation" class="' + strClass + '"><div class="folder"><input type="checkbox" name="folder-toggle-lang-navigation" id="folder-toggle-lang-navigation" class="folder-toggle-box hidden"><label for="folder-toggle-lang-navigation" class="folder-toggle-label" onclick="" data-href="' + arrAllowedLangs[strCurrentLang].url + '">' + arrAllowedLangs[strCurrentLang].short + '</label><div class="subnav">###languages###</div></div></nav>'; var htmlTemplateInner = '<div class="collection"><a href="###url###">###label###</a></div>'; var htmlInner=''; var htmlOutput=''; for(language in arrAllowedLangs){ if(arrAllowedLangs.hasOwnProperty(language)){ htmlInner += htmlTemplateInner.replace('###label###', arrAllowedLangs[language].flag + arrAllowedLangs[language].label).replace('###url###',arrAllowedLangs[language].url); } } htmlOutput = htmlTemplate.replace('###languages###',htmlInner); return htmlOutput; } </script> Explanation of the script STEP by STEP a) This load the YUI node module you need for manipulation YUI().use('node', function (Y) { b) If output is true a menue is output. You have to adapt the menue output for your template. // output a menu var output = false; c) Define your default language. The language key must be the same used in the URL slugs. // set default language var language = "de"; d) Define all allowed lanuages and configure them for your needs.Each key in the array 'de' or 'en' represents one language and is the same used for your url slugs. label is used for menue output short is used for menue output url is the start url slug for each language flag is a html snippet i use to render a language flag with css and a sprite. lang is used for the manipulation of the html lang attribute // define languages var allowedLanguages = new Array(); allowedLanguages['de'] = { label:'Deutsch', short:'DE', url:'/de/index', flag:'', lang:'de-DE' }; allowedLanguages['en'] = { label:'English', short:'EN', url:'/en/index', flag:'', lang:'en-GB' }; e) Here we detect the curent language, if not configured we use the default language. // detect current language var urlparts = document.location.pathname; if(urlparts.startsWith("/")){ urlparts = urlparts.substr(1); } if(urlparts.endsWith("/")){ urlparts = urlparts.substr(0,urlparts.length-1); } if(urlparts.length) { urlparts = urlparts.split("/"); if(urlparts[0] in allowedLanguages){ language = urlparts[0]; } } f) This is the most tricky part. Probably you will have to adapt this for your template. var selector = [ '#mainNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#mainNavigation > div > a:not([href*=\"/' + language + '/\"])', '#mobileNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#mobileNavigation > div > a:not([href*=\"/' + language + '/\"])', '#secondaryNavigation > div > label:not([data-href*=\"/' + language + '/\"])', '#secondaryNavigation > div > a:not([href*=\"/' + language + '/\"])' ]; g) All menue elements that do not belong to the detected language are removed from the page menue. // remove all nodes not in current language Y.all(selector.join()).get('parentNode').remove(); h) Here the output flag is checked and if true the function for menue creation is called // output: append to main and mobile navigation if(output){ Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top')); } i) The html lang attribute is adapted // adapt html lang attribute Y.one('html').setAttribute('lang', allowedLanguages[language].lang); }); j) The function for building the menu. This function builts a dropdown menue with default SQS dropdown markup.Parameters of the function: strCurrentLang - Current Language arrAllowedLangs - array with configured language strClass - injects css Classes to the nav Tag to define the position. Example CSS will be posted below. CSS Example You have to adapt CSS and output for your template #headerNav #langNavigation .folder-toggle-label{ background: #1d1a1a; border-radius: 50px; padding: 0; line-height: 3em; width: 3em; } #headerNav #langNavigation.top{ top:-3px; } #showOnScrollWrapper #langNavigation .folder-toggle-label{ background: #292525; border:5px solid #292525; } #langNavigation{ position: absolute; z-index: 10050; } #langNavigation.right{ right: 0; } #langNavigation.left{ left: 0; } #langNavigation.top{ top: 0; } #langNavigation.bottom{ bottom: 0; } html:not(.touch-styles) body:not(.always-use-overlay-nav) .nav-wrapper #langNavigation.right .folder .subnav { left: auto; right: 0; } /* FLAG ICONS FOR LANGUAGE MENU ** svg images+css from http://lipis.github.io/ ** upload images to SQS and use static url for referencing ** add as many languages you need */ .flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.33333333em; line-height: 1em; height: 1em; font-size: .85em; margin-right: .5em; } .flag-icon-de { background-image: url(//static1.squarespace.com/static/56b1f8b060b5e9f4fa0f2143/t/56b33d8ae32140d4e6e85a10/1454587288318/de.svg); } .flag-icon-en { background-image: url(//static1.squarespace.com/static/56b1f8b060b5e9f4fa0f2143/t/56b33dc0e32140d4e6e85ab9/1454587328016/gb.svg); }
This leaderboard is set to New York/GMT-05:00
×
×
  • Create New...