-
Posts
52 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Mary_DG
-
-
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:
-
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?
-
On 7/25/2023 at 1:43 AM, tuanphan said:
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,
On The Start of a Journey page, the album looks okay when the phone is held in portrait mode. But when the phone is turned into landscape mode, instead of the images on the album looking larger, they become extremely tiny. Any way for the image to respond to landscape mode? -
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:
Remove default hyperlink on blog posts' Author Bio - Name and Author Bio - Image
in Code Blocks
Posted
Hello Tuanphan, what if I want to remove it only for certain blog pages?