Beyondspace

5 hours ago, Saish said:

How do add an image that is in my asset library to the code block that I have put in my website?

Get the URL on the asset Library

1. File Details -> Right Click on image the copy image address

2. On your code block, use the img tag and add the URL with the one you copy from library asset

Have you make it yet? Share your URL so we can take a look

Have you fixed it yet?

I check on my device and it works properly without any scrollbar on the right

Can you share the screenshot of syntax error?

4 hours ago, Ramon-east said:

the summary block above 4 items is causing the layout to break. i found out after contacting support, is there a solution?

Can you share the URL to this page so I can take a look?

3 hours ago, skyseasand said:

How to have a second Image on Hover and/or clickable images without a link to a page in a 7.1 Gallery?

Can you share your URL so I can take a look?

17 minutes ago, sofia62 said:

I apologize, but I'm extremely new to this field and my grasp of coding is quite limited 🫠. From what I understand, the issue lies with the pagination of the Universal Plugin. However, I prefer to keep the pagination as it helps maintain the organization of the shop. Is there any potential solution that doesn't involve disabling the pagination?

Might be there is, you can PM me with the site url

4 hours ago, rhondahymason said:

In editing mode, the empty Shopping Cart page looks perfect in the mobile view (see screenshot 1).

However, on my device, the empty Shopping Cart page has scroll bars on the right and you have to scroll down to see the footer, even though there is no content on the page (see screenshot 2).

How can I fix this so that the empty Shopping Cart page on my device has the footer sitting at the bottom of the page with no scrollbars? 

Thank you!

Can you share your URL so I can take a look?

16 hours ago, Celeste_Woodside said:

Hi there! Unfortunately it didn't work....It seemed to just make the logo transparent but not the header.... @Beyondspacee! 

Try replacing my previous code with the following one

#collection-65d4ca134ce2a875379c1be8 .header {
  --solidHeaderBackgroundColor: transparent !important; 
}
#collection-65d4ca134ce2a875379c1be8 .header-title-logo a {
  position: relative;
}

#collection-65d4ca134ce2a875379c1be8 .header-title-logo a img {
  visibility: hidden;
}
#collection-65d4ca134ce2a875379c1be8 .header-title-logo a:after {
  content:'';
  display:block;
  width: 100%;
  height: 100%;
  background-image: url(https://plus.unsplash.com/premium_photo-1712325632272-b0cbb2a27db6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); 
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left:0;  
}

Does SQSP Starter plugin expose any API to interact on how it works? Universal load all pages dynamically so i think that's the root cause of the confliction

14 minutes ago, KRAVEVIP said:

Hey all!

Posting this up here as I have no idea what to edit in order to achieve the result of what Im looking for. 

I want to add a border around my item title, description, color and size.

How can I do this?

Please find attached a photo that I edited in photoshop on what I am trying to do.

Thanks in advance!

Can you share your URL so I can take a look?

On 4/7/2024 at 8:10 PM, Celeste_Woodside said:

Adaptive:


and solid:



I would also want to use a different logo on the main page (as it is a logo meant for light backgrounds and the solid header uses the logo that is meant for dark backgrounds.)

TIA for any help you (or anyone) may offer!

You can apply the following CSS code (add in custom CSS, not in code injection) to set the specific style for logo on Home Page only

#collection-65d4ca134ce2a875379c1be8 {
  .header {
    --solidheaderbackgroundcolor: transparent !important;
  }
  .header-title-logo {
    a {
      position: relative;
      img {
        visibility: hidden;
      }
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(https://plus.unsplash.com/premium_photo-1712325632272-b0cbb2a27db6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); /*add your logo url here*/
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}

let me know how it works

18 hours ago, UKCWP said:

I've removed these as requested.  Thank you so much for the help.

The latest snippet for your site below @UKCWP

<!-- sqs:beyondspace--date-format -->
<script src="https://cdn.jsdelivr.net/combine/gh/csuwildcat/SelectorListener/selector-listeners.min.js,npm/dayjs-with-plugins@1.0.3/dist/dayjs-with-plugins.min.js,gh/BeyondspaceStudio/beyondspace-snippets@0.0.52/src/date-format/index.min.js" data-widget-config='{"outputFormat":"dddd DD-MM-YYYY","defaultLocale":"en"}'></script>
<!-- /sqs:beyondspace--date-format -->

Tips for other readers: always use the latest snippet on the page Beyondspace Dateformat, as I always update new changes to the script regularly

11 hours ago, TekneLab said:

@tuanphan

I would also like to do this on my site, I want to hide 'All Courses' and My Dashboard' from my main site Navigation. I'd appreciate some help! 

https://www.teknelab.io/

 

You can try the following code

@media only screen and (max-width: 1024px) {
  #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(5), #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(6) {
    display: none;
  }
}

Let me know how it works on your site

9 hours ago, Celeste_Woodside said:

Hi there! I am looking for some code that will alllow for an adaptive header on the homepage but solid headers on all other pages.

TIA!!

site: https://www.alonasharon.com
pw: alona

How do the adaptive header and solid header look like? Can you show some examples?

7 hours ago, Rorafilmco said:

https://grasshopper-moose-taz5.squarespace.com/films

What is your site-wide password?

7 hours ago, tifflee said:

Hi there! I am trying to keep my blog summary block as 3 columns until it hits mobile. Currently on my large screen it's at 3 columns but when I go to a smaller laptop size it goes into 2 and so there's one image on it's own line. Is there CSS I can apply to prevent this from happening? I'd like it to be 3 columns even at tablet size. Thanks!

 

Please note that the site is launching Tuesday so you won't be able to see it yet, but I've attached a screenshot for your reference. Thanks! 

Can you share your URL with protected password so I can take a look?

Site-wide passwords – Squarespace Help Center

Your site is set with private now. Provide it a password so I can access it

Site-wide passwords – Squarespace Help Center

3 hours ago, HWP said:

Hi,

On my homepage when on the mobile site I want the background colour when the menu burger navigation bar is clicked to be black and text in white. How do I alter just the homepage background without the other pages being effected. I am happy with the others being white with black text as shown in the photos.

Also how do I change the text size on the mobile navigation menu, it is way too big.

Any help will be so appreciated I'm tearing my hair out trying to find a solution

Thanks,

Harry

Can you share your site so I can take a look?

1 hour ago, UKCWP said:

Thank you.  Why are the dates all wrong?  They are showing incorrect dates and the wrong year?

I saw the issue, please take off the code so I can check what was wrong, both in your blog code injection and the footer @UKCWP

Correct format should be dddd-DD-MM-YYYY, 

@UKCWP You must use the token that have been introduced on the page, correct snippet for you page should be, also why dont you place it in Footer? will help unify the dateformat across post list as well

REMOVED

Tips for other readers: always use the latest snippet on the page Beyondspace Dateformat, as I always update new changes to the script regularly

Usually we can use download attribute to trigger download file from a link, but Squarespace images are stored on their CDN, which has different domain (cross-origin) from user website, therefore the download attribute may not work as intended  Chrome deprecations and removals announcement

1 hour ago, fercoresc said:

Hello! 

I recently did some customisation to my Lightbox for a strips gallery page on my website. The result is exactly what I wanted except I have not been able to remove the container border for the close button, as shown in the screenshot below. It only appears after using the previous / next navigation on the lightbox. Is there any way to remove it?

Page URL is www.fernandacortina.com/gallery. This is the code I used for the changes I made:

 

/*** Lightbox customisation ***/
.gallery-lightbox-close-btn-icon {
    top: 20px; 
  	bottom: auto;
    right: 10px; 
  	left: auto;
}

/* change the background color - gallery*/
.gallery-lightbox-background{
    background: #ffffff;
  	opacity:0.98;
}

/* change the close button color - gallery */
.gallery-lightbox-close-btn-icon {
  color: #9D9D9D!important
}

/* change the prev/next controls - gallery */
.gallery-lightbox-control-btn-icon *{
    color: #9D9D9D;
}

/* add close text before button */
.gallery-lightbox-close-btn-icon:before {
  	font-family: 'nourd-light';
  	font-weight: 500;
  	font-size: 13px;
  	letter-spacing: 1px;
  	color: #7D7C7C!important;
    content: "CLOSE";
  	position: absolute; /* Change from relative to absolute */
    top: 2px; /* Adjust this value as needed */
    left: -48px; /* Adjust this value as needed */
}

I tried to click arrows but can not reproduce the issue? What I need to do?

Update 01-April-2024

Latest changes on dateformat plugin

- Update Blog item and Blog list item on Brine 7.0 template

- Update the mechanism of the date formatter using DOM attribute for faster initialization

Checkout latest version of date format here

You can change your code to

p {
  font-family: 'PPPangramSans-CompactRegular'!important;
}

Note: DOM element p1,p2,p3 do not exist, we only have p element