lisbet

I have the same issue also in different browsers

Note - I found out how to fix the margin on the header for the add ons - but still struggle with the one cullom for the add ons on the product add ons.

is there a way that you can see it without the shop is visible on the webpage? the shop should launch on friday so I am beginning to be in a hurry. Really hope you can help me 🙏

@tuanphan the shop is not live yet but it is live in the hidden pages - how do i find the link to this? the page is smykbar.dk dont know id you then can find it ?

Hi. I have made a css that affects H2 and I want to keep it as it makes sense most places on the website: h2 {margin-bottom: -10px !important;} But on product pages there occurs a problem - the shop is not live so you will not be able to see it. but it is the header for the Add on products that is now too close to the product images. - is there a way to target this header and change it? And an other thing is if there is a way on the mobile version to have the Add on products in rows two side by side? Kindly Lisbet

@paul2009 I have this for the store page but the problem is the add on products on the product page. Do you have an idea for this? or @tuanphan maybe? 🙏

Hi @paul2009 i do want this css to be sitewide. but to make an exception for just this header for the add on products on the product pages. Would you know a code that can do this. or @tuanphan maybe you?

Hi. I have made a css that makes sense many places on the website: h2 {margin-bottom: -10px !important;} But on product pages there occurs a problem - the shop is not live so you will not be able to see it. but it is the header for the add ons that is now too close to the product images. - is there a way to target this header and change it? And an other thing is if there is a way on the mobile version to have the add on products in rows two side by side? Kindly Lisbet

Brilliant Thank you so much @JayVanDyke

@tuanphan yes i kind of did. But still there is something about the icon that is not totally right. You see the lines are not as they should be - I will attach the right icon and you will see. It seemed like it put many logos next to each other. I would love if you have an idea how to tweak it so it is perfect ♥️

@tuanphan I tried SO many codes on the website smykbar.dk and none have been working sofar. this one comes closest but the icon looks weird like its showing twice .header .header-actions-action--cart svg {opacity:0!important} .header-actions-action--cart .icon-cart-quantity {display:none} .header .header-actions-action--cart {background-image: url(https://static1.squarespace.com/static/5e7da489f524e90512c17a11/t/66d8692750465f483e83cbd7/1725458727813/shoppingbag.png) !important; background-size: contain} can you please help?

Hi. Hi there I have tried to change the shoppingcart icon with this code i found on a toturial page but it is not working // CUSTOM CART ICON .icon--cart svg { display:none; } .header .header-actions-action--cart svg { stroke:transparent!important } .header .header-actions-action--cart { background-image: url(); background-size: 22px 24px; background-repeat: no-repeat; } Does someone please have a code that works for a 7.1 site?

OMG - there is Parallax as a image effect on backgrounds now - no need for code anymore for this one 🤩

I also just experienced that the background image disappeared. I removed the parallax code and its back again, but now there is no parallax. Does someone know a new code for this that works? I removed this code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

@tuanphan I figured out how to make the hover with the poster layout in image and a css you have posted in other question - thank you. but how would the code look like if i would like the background overlay to be semi transparent white and the text dark grey? and then there is still the question if i can link to the subpage from an image or I have to build these pages i have made again.

@tuanphan Yes i know - the problem is that I have a lot of pages on a 7.0 site that i would like to move to a new 7.1 site. I have discovered the squarewebsites tool that makes this possible - but i cannot copy the content to a portfolio subpage. So now i just tried what you wrote - to add the old style image block - that works thank you 🙂 BUT it is not so stylish nice as the portfolio hover that makes a full overlay with the text centered. Is there a way to get a nice hover on the old style images? Plus is there a way that I can link from an image to the portfolio subpages that i have already created? Has been quite a job so far..

I would love to make a portfoliopage a bit like this http://www.tinasmithdesign.com/ I like on the front page that it change a bit between one image and two beside each other. But the hover on image is kind of important - has squarespace removed this feature? i dont seem to find this posibility anymore 😞

Hi, is it not possible to link to a portfolio page? seems that its only possible to link to the whole project..

I just added the code to the ccs and then I got up the mexican and american flags. but then i went to the advanced code injection and changed the flag names and now i dont get any flags. can you please check if this code is right: Advanced code injection - HEADER: <script> /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/Dk/hjem" class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en”>English</a></div>'); </script> Advanced code injection - footer: (now i just added all the code so you can see if any other code is conflicting) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'dk'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "dk") { $('a[href="/"]').attr("href", "/dk/hjem/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/dk/hjem" class="lang-dk"><span class="flag-icon flag-icon-DK"></span></a> <a href="/en/home/" class="lang-en"><span class="flag-icon flag-icon-US"></span></a></div>'); }); </script> CCS design: /*setup language switcher*/ .language { color: #fff; position: absolute; top: 10px; right: 10px; z-index: 99999; a { color: #fff; &:hover { opacity: 0.8; } } }

Dear Creedon. I would also really like to do so but where is it I should ad this code? I tried in the code injection but nothing happens. <script> /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/dk/Hjem class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en">English</a></div>'); </script>

aah - FINALLY 🤩 THANK YOU SO MUCH. Now I just need to figure out the language switcher. its not there. But I was thinking just adding a button on the front page for danish and english home. But where was it supposed to be situated when having added the code?

Hi creedon, it still does not work 😞 i have now copyed it into textedit. Is it becourse i changed the /en/home to /dk/hjem and es/in... to uk/home ? All the pages have these endings. but when i go to smykbar.dk/uk/home the menu is still the danish and there is no language switcher. here is my new code: <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = ‘dk’; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == “uk”) { $('a[href="/"]').attr("href", “/uk/home/“); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/dk/hjem" class="lang-dk”><span class="flag-icon flag-icon-us"></span></a> <a href=“/uk/home/“ class="lang-uk”><span class="flag-icon flag-icon-mx"></span></a></div>'); }); </script>

Hi creedon Thank you. I have not used any word processor - i did put it into indesign in order to change the /en to /dk. but maybe this is where it happened. I will try to add it to textedit instead.

Site URL: https://www.smykbar.dk/ Hey guys, I've followed the tutorial of https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template and replaced everything of /en with /dk as danish is the main language and /es/ with /uk I dont get any language switcher buttons up - what am i doing wrong? here is the code i added: <link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = ‘dk’; var lang = location.pathname.split(“/”)[1]; var defaultClass = ‘lang-’+defaultLanguage+’’; var itemParent = “nav [class*=’collection’],nav [class*=’folder’],nav [class*=’index’],nav [class*=’group’]”; if (lang == “” || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $(‘a[href=”/”]’).addClass(‘lang-’+defaultLanguage+’’).parents(itemParent).addClass(‘lang-’+defaultLanguage+’’); $(‘nav a:link:not([href^=”http://”]):not([href^=”https://”])’).each(function () { var langType = $(this).attr(‘href’).split(“/”)[1]; var multiLanguageClass = ‘multilanguage lang-’ + langType + ‘’; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $(‘nav button’).each(function () { var langTypeFolder = $(this).attr(‘data-controller-folder-toggle’).split(“/”)[0]; var multiLanguageClass = ‘multilanguage lang-’ + langTypeFolder + ‘’; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == “uk”) { $(‘a[href=”/”]’).attr(“href”, “/uk/home/”); } /* ADD EXCLUSION NAV ITEMS */ $(‘.exclude-me,.exclude-me a’).addClass(‘exclude’); $(‘.sqs-svg-icon--list a,.SocialLinks-link’).addClass(‘exclude’); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $(‘.multilanguage:not(“.lang-’+lang+’,.exclude”)’).remove(); /* SETUP LANGUAGE SWITCHER */ $(‘body’).prepend(‘<div class=”language”><a href=”/dk/hjem” class=”lang-dk”><span class=”flag-icon flag-icon-us”></span></a> <a href=”/uk/home/” class=”lang-uk”><span class=”flag-icon flag-icon-mx”></span></a></div>’); }); </script>