Mary_DG

On 2/2/2023 at 4:46 AM, tuanphan said:

Hi,

Add to Design > Custom CSS

.blog-item-author-profile-wrapper {
    pointer-events: none;
}

 

Hello Tuanphan, what if I want to remove it only for certain blog pages? 

19 hours ago, tuanphan said:

Can you keep code in CSS box? I can check it again easier

Hi Tuanphan, I have added back to the CSS box. 

On 12/6/2023 at 5:09 AM, tuanphan said:

You can use this CSS code

span.description.required {
    position: relative;
    left: -5px;
}

 

Hi Tuanphan, I added it to the CSS but it didn't seem to work. There is still space before the "*". 

Hi, this was resolved by adding on CSS

/**Spanish logo**/
body.body-es header#header img {
    content: url(spanishlogo.jpg);
}
 

On 12/2/2023 at 7:05 PM, tuanphan said:

Can you share link to page where you use form? We can check easier

www.hellocinnamon.com

Thank you in advance. 

Hello, 

I am trying to remove the "space" before the asterisk on required fields on my form. Is there a code available to do that. Help much appreciated. 

Thank you, 

6 hours ago, tuanphan said:

You can add it to Site Footer, then we can give jQuery code to move its position

Or use plugin. 

I used to help some sites to achieve same cases, by using section in footer or plugin

Thanks, Tuanphan. but by adding it to the footer will it not appear on other pages too? If you can provide me the Jquery code, I can try it out and get back to you. As always thank you for your help. 

Hello, related to this topic about adding a section on squarespace blog page. I need to add a form below the blog links on every blog page but I don't have a way to add a section. The form is the same format that I have on every other page on this site: www.hellocinnamon.com 

I need to add the same form format to the individual blog pages. 

Hello Tuanphan, I had removed the caption since it will showing too small. I had placed it in the image itself as a work around. The problem I am facing now is that I need the image to bleed on the sides in mobile. Everything is perfect on desktop. But on mobile, since I placed the caption inside the image itself I need the image to be as big as possible and right now it is small and in the middle. Anyway to increase the size of the image to match the first profile image on mobile:

https://www.hellocinnamon.com/en/meet-seema

Hello everyone, I added a code (thank you Brad) to display EN only and ES only depending on the language selected. I however have a code to display the header with the logo in the middle and split the menu items on the side. 

www.hellocinnamon.com 

I created duplicate for each page in ES language . 

Can anybody help with the having the logo in ES to display in ES pages only. 

Below is the code I use for the split navigation:
 

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 4;
@actionSize: 1px; 
@logoSpacing: 1vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

.header-title-logo a {
    max-height: unset !important;
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

and this is the code I have for the English/Espanol language switch. 

<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 = 'en';
    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 == "es") {
      $('a[href="/"]').attr("href", "/es/inicio/");
    }

    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').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="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/es/inicio/" class="lang-es"><span class="flag-icon flag-icon-mx"></span></a></div>');

  });
</script>

Appreciate everybody who can help. Thank you in advance. 

 

On 11/4/2023 at 3:45 AM, tuanphan said:

Can you share link to page? We can check easier

Hello Tuanphan, here is the link:
https://www.hellocinnamon.com/en/meet-seema

19 hours ago, melody495 said:

I've been looking recently also, this is what I found. There is no native SquareSpace feature for this. 

For 7.0, you can create gallery page and use summary block. Then use the Lazy Load plugin for the summary block, this has the load more option. https://www.squarewebsites.org/squarespace-plugins/lazy-summaries

For 7.1, you can use this plugin. https://elfsight.com/photo-gallery-widget/. You can try the demo, choose the masonry grid and turn on load more. 

The site I wanted to do this is 7.1, and I didn't go with the plugin, so can't comment on usability. I use Lazy Load on summary blocks for blogs, and found it easy to use, there's a slack channel for support also. 

I tried to code something ... But maybe in the future. 

Thank you Melody495. I switched to Grid:Simple and it looks better on mobile. So not going to use Load More for now. If you do get a chance to work on the code without the use of a plugin, that would be super. Appreciate you. 

Hello, I added this code to decrease the blank spaces of the gallery slide show in mobile:

 

/* Mobile Slideshow Gap */
@media screen and (max-width:767px) {
.gallery-slideshow {
    margin: 0 !important;
    padding-top: 0 !important;
}
.fe-6490c89f2289d0d04a66ffeb {
    row-gap: 0 !important;
}
.gallery-slideshow {
    height: 30vh !important;
}
}
@media screen and (max-width:767px) {
.gallery-masonry .gallery-masonry-item[data-loaded] img
{
    width:100% !important
}

}

But the caption is gone from mobile. Need help getting the caption back on mobile with minimal spaces between the image and the caption text. 

Thank you in advance. 

Hi, I have a page where I have added a section with image gallery type Grid: Masonry 

On desktop, looks good. But on mobile all of the images are there on scrolling. Anyway to add a "Load More" button after the first two images just like this reference site (made in wix) https://www.zerofoxbne.com.au/

Thank you so much in advance. 

Thanks, Tuanphan, we had to later remove it since it was cost-restrictive. Appreciate your response. 

Hello Tuanphan, 

I don't know how to move the weglot button to the right just below the last menu item (REACH OUT).

Website: www.hellocinnamon.com

Currently, I am split navigation code that allows divided menu items with the logo in the middle. 
 

===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 4;
@actionSize: 1px; 
@logoSpacing: 1vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

.header-title-logo a {
    max-height: unset !important;
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

Thanks in advance. 
 

2 hours ago, tuanphan said:

Can you share link to this page?

 

https://www.aelo.ai/

On 7/25/2023 at 1:43 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Mobile Start of a journey page mobile */
@media screen and (max-width:767px) and (orientation:landscape) {
body#collection-62529309c36f381162dc8983 .gallery-slideshow {
    height: 150vh !important;
}
}

 

Thank you again, Tuanphan, it worked great on hellocinnamon.com site. It is perfect. 

But I tried using the same code in our other website: www.aelo.ai

slideshow:simple gallery and it is not working. see screenshot below. Should i be using a different code?

7 hours ago, tuanphan said:

Sorry. Missing your comment. The link doesn't work

Hello @tuanphan thank you for checking, we have moved ahead from the design. I appreciate you attempt on the matter. Cheers!

On 7/22/2023 at 7:46 PM, tuanphan said:

Can you share link to this page?

https://www.hellocinnamon.com/start-of-a-journey

Thank you in advance. 

On 7/17/2023 at 2:59 PM, Mary_DG said:

Hi Tuanphan, yes, please. I am still using 30vh until i have code that will decrease the space between the image and caption. Thank you. 

Hello @tuanphan hope you can get back to me. Also, 

Hi Tuanphan, yes, please. I am still using 30vh until i have code that will decrease the space between the image and caption. Thank you. 

Thank you @tuanphan I did it with 45vh. Is there anyway to decrease the space between the caption and the image:

@tuanphan thank you, I tried this but it is giving me downward scroll arrow to scroll down the page, I was hoping to get the round dot indicator on carousel, like below sample. 

@tuanphan hello, thank you I tried this and it removed the space on top. Which is great, but it removed the caption on mobile: