Beyondspace
-
Posts
10,143 -
Joined
-
Last visited
-
Days Won
80
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Beyondspace
-
-
36 minutes ago, Shei said:
Thank you for your comment, Paul! But the problem is that I cannot edit the footer. Please refer to this short video:
Is there any chance you put the embed code into Google Tag Manager?
-
5 hours ago, BilO said:
Hi,
I created custom code block on this page to create a "Read More/Read Less" button for this jobs page (see below) that was very text heavy. The function is working properly on desktop however when I look on my phone is all jumbled up. (Resizing my desktop to a mobile size on my computer everything looks fine.) I modified the code from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
Does anyone have an idea what is happening in mobile and how to fix it, or maybe is there a better code option that I can use for this same effect and look?
Appreciate the help in advance. Thanks
Website Page: https://bell-cheetah-n87s.squarespace.com/jobs
PW: scratchRegarding read less/ read more, you can try the following solution on this post
-
4 hours ago, braydentav said:
The code is showing under the nav bar even though it is hidden. .ProductItem .ProductItem-details .product-price,
.ProductItem .ProductItem-details .afterpayString is the code that is showing. Any help to hide it is greatly appreciated.</style>
.ProductItem .ProductItem-details .product-price,
.ProductItem .ProductItem-details .afterpayString
{
visibility : hidden;
}
body.twc-spc-show .ProductItem .ProductItem-details .product-price,
body.twc-spc-show .ProductItem .ProductItem-details .afterpayString
{
visibility : hidden;
}
</style>
<script>
( ( ) => {
// bail if no mutation observer available
if ( ! ( 'MutationObserver' in window ) ) return;
const initialize = ( ) => {
const isDetail = twcsl.page.store.detail.is;
const options = twc.x8af7a0e8;
const keys = Object.keys ( options.searchReplaceText );
const changeText = ( node ) => {
const walker =
document.createTreeWalker ( node, NodeFilter.SHOW_TEXT );
while ( walker.nextNode ( ) ) {
const node = walker.currentNode;
let t = node.data;
$.each ( keys, function ( i, s ) {
const m = s.match ( /\/(.+)\/(.*)/ );
let r = options.searchReplaceText [ s ];
if ( m !== null ) { // m appears to be a regex pattern
try {
s = new RegExp ( m [ 1 ], m [ 2 ] );
} catch {
return; // bail on error
}
if ( ! s.test ( t ) ) return true; // continue if text no match
}
if ( typeof r == 'function' ) {
r = r ( node, isDetail, t, s );
if ( typeof r == 'boolean' ) return r;
}
t = t.replace ( s, r );
} );
node.data = t;
}
}
const $productPrices = $( '.product-price' )
.each ( function ( ) {
changeText ( this );
} );
const $afterpayPrices = $( '.afterpayString' );
if ( options.afterpay )
$afterpayPrices.each ( function ( ) {
changeText ( this );
} );
if ( ! isDetail ) return; // bail if not detail
const attribute = 'data-twc-spc-mo';
const observer = new MutationObserver ( mutations => {
$.each ( mutations, function ( ) {
// continue if no added nodes
if ( ! this.addedNodes.length ) return true;
const target = this.target;
// previous change was forced
if ( this.attributeName == attribute )
if ( $( target ).attr ( attribute ) == 'true' )
$( target ).attr ( attribute, 'false' );
else if ( this.oldValue == 'true' )
return true;
observer.disconnect ( );
changeText ( target );
pricesObserve ( );
} );
} );
const pricesObserve = ( ) => {
// listen for changes in product prices
$productPrices.each ( function ( ) {
observer.observe ( this, {
attributeFilter : [ attribute ],
attributeOldValue : true,
childList : true
} );
} );
// listen for changes in afterpay prices
if ( options.afterpay )
$afterpayPrices.each ( function ( ) {
observer.observe ( this, {
attributeFilter : [ attribute ],
attributeOldValue : true,
childList : true,
subtree : true
} );
} );
};
pricesObserve ( );
$( 'body' ).addClass ( 'twc-spc-show' );
};
switch ( true ) {
case twcsl.ss.is71 :
$( initialize );
break;
case twcsl.ss.is70 :
Squarespace.onInitialize ( Y, initialize );
break;
}
} ) ( );
</script>Can you share your URL so we can check easier?
-
Use Gallery block to place both gallery and text in same section, on 7.1 sections, use Classic Gallery block to insert Gallery block
-
On 2/7/2024 at 8:11 PM, ZKE said:
I need some code that will turn a Gallery slideshow block into a (slideshow) lightbox when clicked. This is for a course collection page (so it's behind a paywall and I cannot share the URL.)
I purchased the Lightbox Anything plugin but it does not solve my problem. If anyone could help with this (opening a gallery slideshow block in a lightbox), it would be hugely appreciated!
If this isn't possible, another workaround option that I'm currently using is an image block that links to a File that opens a PDF... But I want to be able to add a caption (or caption on hover) that tells people to click in to the image to open the file. How could I do this, and is there any way to use CSS to apply the same affect to all images within this course collection? (So I do not have to update the code for every class page I create, which will have different images and files but all need the same functionality of a caption on hover...)
Please check out our plugin Lightbox Studio, I have make a step-by-step tutorial to Lightboxify Slide, Carousel and Stacked Gallery block
-
@SEOSpace_Henry could you shed some light in this matter? I was noticed that after using SEOSpace to filter the unindexed page too
-
On 4/20/2024 at 1:12 AM, MoveIndigo said:
@Beyondspace Your custom CSS works well but appears to override the mobile wrapping of the tags. Any way to keep the wrapping so a long list of tags still works well on mobile with your styles?
Can you share your URL so I can take a look?
-
On 4/20/2024 at 4:19 PM, Tommyisbae said:
Yes. That block. I want to split it into two columns. With 1 to 3 on one column and 4 to 6 on the second column
How do you think if you create 2 accordion blocks for 2 columns?
-
Standard function on SQS allows you to change padding, space between items. Have you tried it out?
-
On 2/16/2024 at 5:34 AM, inkmouse said:
@creedon my client was unable to get it to work. Any possible updates or can you advise? Thank you.
You can checkout our freebie that replace the datepicker with month/year view
https://beyondspace-showcase.squarespace.com/blog-publish-datepicker
-
On 4/20/2024 at 7:51 PM, AC-TAL said:
@tuanphan Yes, I'm the settings the excerpt reads "1934 - 2022", and the SEO description reads "Test".
I used this code:
Currently, we do not have the excerpt information with the above codes. It is required to have the custom code to achieve it
-
10 hours ago, davidgluhaich said:
I have the business plan. Is there any way to copy the formula?
This is the code that I'm working with on w3schools but can't quite figure out the rest.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}.slider:hover {
opacity: 1;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #000000;
cursor: pointer;
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #000000;
cursor: pointer;
}
</style>
</head>
<body><p>Drag the slider to the SQFT of your listing.</p>
<div class="slidecontainer">
<input type="range" min="0" max="7000" value="2000" class="slider" id="myRange">
<p><span id="demo"></span> SQFT</p>
</div><script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;slider.oninput = function() {
output.innerHTML = this.value;
}
</script></body>
</html>You can try adding the following code to the code block
<p>Drag the slider to the SQFT of your listing.</p> <div class="slidecontainer"> <input type="range" min="0" max="7000" value="2000" class="slider" id="myRange"> <p><span id="demo"></span> SQFT</p> </div> <style> slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #000000; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #000000; cursor: pointer; } </style> <script> var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } </script>
This is the beginning where you can get the final result
-
5 hours ago, LeasPhotos said:
Hello beautiful people,
I just started to code to pimp my website. Following tutorials, learning some basics. I already implemented some stuff but now I got to a point where I don't understand what to do. Is here someone nice who could help me out?
I'm trying to implement this text effect to my landing page: https://codepen.io/Valgo/pen/PowZaNY
But I don't know where to put the CSS, HTML and JS. I tried a few variations with code boxes, code injection, custom code. I downloaded a google font, imported it.
Is there a friendly soul here who could lead me step by step through this project?
Best wishes
LeaHave you tried using code block which allow you to input HTML, CSS and JS script?
-
4 hours ago, sofia62 said:
Website: https://www.voodoo-warehouse.com/
Hi there! I've integrated an Instagram plugin code onto my website to incorporate a chat feature, but it's causing some interference with the space allocation on my footer. Could anyone lend a hand in eliminating the excess space? Much appreciated!
Have you figured it out? I check that there is no space on my side
-
On 4/20/2024 at 4:51 AM, 1000Watts said:
Hello,
I found a code to add the subtitle in my heading but it is landing in the middle of my site name. How do I move my subtitle "TELEVISION PRODUCER" underneath my site title and change the font? Site: https://www.ellekeoghanclark.com/ Password: ilovejagger.
CODE FOUND:
a#site-title:after {
content: "TELEVISION PRODUCER";
display: block;
font: advent pro;
font-size: 14px;
}
Thank you so much!!
Natalee
Do you mean something like this?
-
1 hour ago, daniellemusarra said:
Sure, here is the code to hide the logo when you open the burger menu on desktop
@media only screen and (min-width: 768px) { .header--menu-open .header-title-logo { visibility: hidden; } }
-
11 hours ago, davidgluhaich said:
So I have a real estate marketing company and my pricing is based off of square footage of the listing. I'd like to have a slider, like on this page (https://www.mavenxvisuals.com/pricing-and-packages-1), that adjusts the pricing shown when you drag it between different square footage. How did they accomplish this? I've seen it before, but they were always WP websites. This one is Squarespace, so now that I know it's possible, I'd like to do the same on my site.
Thanks in advance!
I checked that this site is running some code blocks and custom javascript to proceed with this calculation. It is required at least the business plan to achieve this feature.
Your site requires the same formula as this site or you have a different concept?
-
53 minutes ago, PapaJoe said:
Hi, I'm currently having an issue - I'm currently using "simple list" to create the card feauture but as seen in the attached screenshot I can't replicate/implement the same look as shown in the design. The cards on the site are so far away and "fat". Is there a way to customize and fix this?
Also, for some reason I can't change the font family/style either - any advice on that?
Can you share your URL so we can check it easier?
-
-
7 hours ago, daniellemusarra said:
Hi there!
I'm wondering if I could get some help - my hamburger icon is disappearing when I open my full screen menu. I used this tutorial to create the menu: https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 but it seems like the open menu covers the exit symbol when opened. I'd like the exit icon to be on top of the open full screen menu.
my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123Current CSS:
//show burger icon//
@media screen and (min-width:768px) {
.header-burger {
display: flex !important;
justify-content: flex-start !important;
z-index: 1 !important;
}
.header-nav {
display: none;
}
.header-actions-action {
display: none !important;
}
.header .header-announcement-bar-wrapper {
padding-top: 40px !important;
padding-bottom: 20px !important;
}
}
@media screen and (min-width:768px) {
/* Fix footer invisible behind page content */
footer.sections {
z-index: 9999999 !important;
}
/* change footer 2 sections to 100% height and 50% width */
footer.sections section:nth-child(3), footer.sections section:nth-child(2) {
width: 50%;
height: 100vh;
position: fixed;
z-index: 9999;
left: 0;
}
footer.sections section:nth-child(3) {
left: 0;
}
/* move footer section 2 to right 50% */
footer.sections section:nth-child(2) {
left: 50%;
right: 0;
}
/* disable scroll when burger menu is open */
.header-burger--open body {
overflow: hidden;
}
/* effect on 2 sections when click burger menu */
body footer.sections section:nth-child(3), body footer.sections section:nth-child(2) {
transition: transform 1.2s ease;
top: 32px !important;
}
body footer.sections section:nth-child(3) {
transform: translateY(-150%);
transition: transform 0.75s ease;
}
body footer.sections section:nth-child(2) {
transform: translateY(150%);
transition: transform 0.75s ease;
}body.header--menu-open footer.sections section:nth-child(3) {
transform: translateY(-0%);
transition: transform 0.75s ease;
}body.header--menu-open footer.sections section:nth-child(2) {
transform: translateY(0%);
transition: transform 0.75s ease;
}
}Any help would be much appreciated thank you!!
Your footer is set with 9999999 which is over than header
Quotez-index: 9999999 !important
Try adding the following Custom CSS to make it visible again
#header { z-index: 99999999 !important }
Let me know how it works
-
8 hours ago, Tommyisbae said:
Hello. How can I get my product blocks to have rounded corners. The product blocks are in the "New Arrivals" section. My website is https://chrysalis-dog-f4na.squarespace.com/ password is 1234
Do you mean something like this?
Try adding the following Custom Css
.products-list .grid-item .grid-image { border-radius: 40px; }
Let me know how it works on your site
-
-
1 hour ago, hoehtstudio said:
Hi
can someone help me out, please?
I want to create a real parallax in 7.1.
Example is https://www.franckmuller.com
The brine family in 7.0 was great for that, but i lacked great features that exist in 7.1.
Thanks so much for help.
Kind regards,
Hugo
Have you tried the standard image effect on Squarespace yet?
-
4 hours ago, latrell_hopamountain said:
URL: bhr-harnessing-hope.squarespace.com
PW: bhhh2024I have a full-bleed gallery section that I want to blend with the header color using linear gradient *without* making the gallery part of the header background. I tried using the following CSS from a different thread, but it only works with single background images:
section[data-section-id="65de50da35bbef7c964a2ee7"] .content-wrapper { width:100%!important; background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(255, 255, 255, 1)); z-index: 1; max-width: inherit; }
If at all possible, I would like the same effect but apply it to a gallery section for a seamless transition between header and gallery.
@tuanphan might you have some insight?
Have you tried setting the solid header?
Gallery Blocks 7.1
in Images & Videos
Posted
Checkout our latest plugin Classic Gallery block (freebie) to help insert Gallery block to Squarespace 7.1 section