Webswool

On 4/9/2024 at 8:38 AM, tuanphan said:

The code for above page only, each page has a different ID, so if you use same code for your site, it won't work.

You can share link to portfolio page on your site, I can adjust ID easier

The portfolio I'd like to target is this: https://marguerite-elliot.squarespace.com/the-international-roots-project

I need to hide the header/footer from all project pages inside that portfolio if possible!

Client only has a personal plan so CSS only...

On 9/25/2023 at 8:43 AM, charlineca said:

Hi, my page is https://magnolia-flamingo-p4lk.squarespace.com/ and the password is squarespace.

I want to remove the header and footer from my individual portfolio pages but can't find out how to target all individual portfolio pages using css? I don't want to use the collection tags but instead want to write a code that automatically targets portfolio pages. Can anyone help with this? Thank you!

Did you ever have any success with this? Trying to achieve the same thing with CSS

@tuanphan I couldn't get this to work - has anything shifted with recent updates? I'm looking to hide the header and footer from a portfolio and all the pages within it.

Site URL: https://www.chevychaseart.org/

Hello! I'm working with an artists organisation and they're opening up submissions for an exhibition.

They want artists to be able to upload 5 images, and have those images be saved to a folder for that specific artist - e.g. Sammi uploads her 5 artworks and they are automatically saved into a folder together (Ideally named "Sammi"), Jenny uploads her 5 artworks and they are saved to a "Jenny" folder... etc.

I'd previous been using a Google Form and collated all the artworks in one folder, but we'd asked the artists to name their files appropriate (e.g. Sammi1.jpg, Sammi2.jpg etc...) but this is seeming to be too much work for the organisation to deal with...

Does anyone know of any software/plugin (paid or otherwise) that would allow us to set up essentially, personalised upload forms per applicant?!

Any thoughts would be helpful as I'm out!

Sx

6 hours ago, tuanphan said:

Can you share link to page?

Solved now, thanks though @tuanphan

On 8/2/2021 at 7:23 AM, tuanphan said:

Do you want to fix these?

(Checked July 31)

Site URL: https://live-vitae.squarespace.com/

1. (Tablet – Homepage) Increase banner text width?

2. (Mobile – Pop up) Image disappear

3. (Mobile/Tablet – Work with me) Background image doesn’t show in full size

https://live-vitae.squarespace.com/personalised-nutrition-services

4. (Mobile – About) The same here

https://live-vitae.squarespace.com/about

If you have the time @tuanphan - absolutely! 

1 minute ago, Pabsr said:

Hey @Webswool, did you have an luck getting this sorted. I've been battling this problem since January too. THought I had it resolved but it's come back again in the last 24 hours. Thanks.

In short, no.

The plugin developer gave me a temporary fix but it never truly solved the issue. Since then, my client has removed that element from their shop.

7 hours ago, tuanphan said:

The Code Block code added a blank link item to Summary.

Try adidng this to Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  // remove first item in summary about us 
  $(document).ready(function(){$('div#block-yui_3_17_2_1_1619079445519_3109 .summary-item-list>a:first-child').remove();});
</script>

 

Absolute legend @tuanphan - that worked a treat! Thanks!!

Site URL: https://live-vitae.squarespace.com/about

Hey peeps.

Bit of a strange one...

I'm embedding an interactive map on a clients website using a code block. (I'll link to where we're getting the map code from here: https://www.amcharts.com/visited_countries/#DE,NL,PT,RO,CH,GB,CA,GT,MX,US,BH,ID,SA,AE,AU)

When I put the code in the code block and hit save, it is making the first slide of my summary block blank.

I'll show you what I mean...

I'm using the same summary block on two pages to pull through client testimonials. Exact same settings. On the Work With Me page (https://www.livevitae.com/personalised-nutrition-services )the summary block works great, but on the About Live Vitae page (https://www.livevitae.com/about-live-vitae) there is a blank slide being added to the summary block, so it looks like the content hasn't loaded. When you click the ">" it takes you to the first client testimonial. 🤯

I've double checked and there are no rogue blank client testimonial blog posts floating about... and when I remove the map code block from the section above, the summary block behaves perfectly normal.

Any ideas? 

On 7/17/2021 at 11:39 PM, tuanphan said:

Remove last / from anchor links

to

 

Thanks @tuanphan - much appreciated!! 😀

Hey @tuanphan - have attached 2 screen shots showing the anchor links (or where I'm trying to put them!) in the main navigation. 

under 'ABOUT' - both 'Weight Loss Philosophy' and 'My Favorite Clients' are the same page (the Weightloss Philosophy page), but two different sections.

There is a code block above each section at the moment... but I think I'm doing something wrong.

Site URL: https://weightlosswithcoachmelanie.squarespace.com/

Hey peeps.

I'm trying to use anchor links in my clients navigation to jump to a section of a page... password is: melanie

the "Weight Loss Philosophy" and "Favorite Clients" are both on the same page. I've tried numerous methods and nothing seems to be working. Currently I'm using a code block on each section, with a unique id (weight loss philosophy is #approach, favorite clients is #clients)

On another note, I've noticed that another clients anchor links that have been working beautifully up until now have also stopped working (About dropdown on https://livevitae.com) - is anyone else having issues? Or am I just doing something wrong?

On 8/27/2020 at 9:38 PM, IXStudio said:

Hi

Use this code in Design -> Custom CSS

.Loader {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1440px;
    z-index: 9999;
    background-color: transparent;
    -webkit-transition: background-color .3s ease-out,transform 0s .3s linear;
    -moz-transition: background-color .3s ease-out,transform 0s .3s linear;
    -ms-transition: background-color .3s ease-out,transform 0s .3s linear;
    -o-transition: background-color .3s ease-out,transform 0s .3s linear;
    transition: background-color .3s ease-out,transform 0s .3s linear;
    display: none
}[data-mercury-loading] .Loader {
    background-color: rgba(255,255,255,.22);
    -webkit-transition: transform .3s cubic-bezier(0,0,0,.618);
    -moz-transition: transform .3s cubic-bezier(0,0,0,.618);
    -ms-transition: transform .3s cubic-bezier(0,0,0,.618);
    -o-transition: transform .3s cubic-bezier(0,0,0,.618);
    transition: transform .3s cubic-bezier(0,0,0,.618);
    -webkit-transform: translatex(60%);
    -moz-transform: translatex(60%);
    -ms-transform: translatex(60%);
    -o-transform: translatex(60%);
    transform: translatex(60%)
}[data-mercury-loading='done'] .Loader {
    -webkit-transform: translatex(100%);
    -moz-transform: translatex(100%);
    -ms-transform: translatex(100%);
    -o-transform: translatex(100%);
    transform: translatex(100%)
}

.tweak-site-ajax-loading-enable.tweak-site-ajax-loading-bar-show .Loader {
    display: block
}

Please use the like button if it helps you!

 

Best,

Leopold

Hey Leopold @IXStudio

I'd love to implement this kind of page transition effect on my client's 7.1 site - I've tried using just the CSS alone but to no avail.

Any suggestions would be hugely appreciated!

acg-demo.squarespace.com (password: demo)

9 hours ago, aadmint2021 said:

Can you share the code? I'm actually trying to do the same for my client. Thanks!

Hey @aadmint2021

I used the following code in my Footer Injection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
var eventFired = false,
    objectPositionTop = $('section[data-section-id="5fbc069d82d4af71faa5c888"]').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
  


// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 670500}, {
	duration: 10000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('section[data-section-id="5f4cc944f0feca27412aafdc"] h1').text(Math.ceil(this.someValue) + ' ' + ' kg CO2e');
	}
});






 }

});
</script>

Switch out the section ID for the section you're working with, and you should be able to switch h1 out for whatever size of text you're using and the 'kg CO2e' out for whatever units you need.

This code doesn't require a code block on the actual section you're using it on - it'll automatically make the h1 (or whatever size you change it to) behave like an counter

Hope that makes sense? If not, just holla.

Oh yeah that'd be great @tuanphan - thank you!

On 3/5/2021 at 1:41 PM, tuanphan said:

Add to Design > Custom CSS

/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

 

Thanks so much @tuanphan - that did the trick! Much appreciated 🙂

Site URL: https://marguerite-elliot.squarespace.com/

Hey folks -

I'm forcing mobile navigation on all devices with this website, but the gap between the links gets really huge when viewed on desktop. I've tried targeting the line-height between the links but had no luck... the settings in the style editor are great for mobile view, but as soon as the screen size increases the links seem to grow in size, as does the space between them.

Would love to tweak the spacing overall, but specifically for the smaller (sub) links

Have attached a screengrab - thanks in advance!

Sx

@tuanphan thanks for the reply! We’ve actually gone in another direction as the default wording in the customer notifications is still too restrictive/confusing for customers

On 5/27/2020 at 9:26 AM, tuanphan said:

You can't change font for all elements (can change some) in Order Confirmed email content.

Which elements do you want to change?

 

Hey @tuanphan - I'd love to change as much of the text in my customer notifications to Futura PT 

I know we won't be able to customise everything, but anything you can suggest would be great!

Thank you 🙂

5 hours ago, tuanphan said:

Have you contacted Plugin Author yet?

Yes @tuanphan both on the Plugin website and also directly on here, but no response yet...

Site URL: https://jordancs.ie

Hey all - 

A client of mine has been using the Universal Filter and Lazy Summary plugins to filter the properties on his website. All was working beautifully but things have gone awry since the most recent shop update for 7.1. His issues are:

1. The properties are now listing automatically in order of their geographical location, whereas the client would like to be able to move the order of the properties around to suit his needs (ie. show users properties that are still for sale before showing sold ones)

2. Some of the properties are priced at over €1 million - they had previously got around the pricing cap on Squarespace by leaving the price blank for these products and using an additional "price" variant. This is still working for the universal filter summary blocks, but NOT for the normal summary blocks now... 

Anyone else had any instances of the update causing issues with these plugins? My client has reached out to the developer but has been waiting for some time (several months) for a response/solution.

Any ideas would be great!

Sammi x 

2 hours ago, tuanphan said:

Have you solved it yet?

Yes, but I ended up using a slightly different bit of code I think? @IXStudio provided me with a bit of code that included the suffix I needed :-) 

On 7/9/2020 at 2:51 PM, tuanphan said:

Add Code Block > Paste code

Code from https://codepen.io/syedrafeeq/pen/rcfsJ

<h1>JQUERY NUMBER ANIMATION</h1>
<h3>jQuery counter to count up to a target number</h3>

<div class="wrapper">
    <div class="counter col_fourth">
      <i class="fa fa-code fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
       <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-lightbulb-o fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>

    <div class="counter col_fourth end">
      <i class="fa fa-bug fa-2x"></i>
      <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
      <p class="count-text ">SomeText GoesHere</p>
    </div>
</div>
<style>
  .col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  (function ($) {
	$.fn.countTo = function (options) {
		options = options || {};
		
		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);
			
			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;
			
			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};
			
			$self.data('countTo', data);
			
			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);
			
			// initialize the element with the starting value
			render(value);
			
			function updateTimer() {
				value += increment;
				loopCount++;
				
				render(value);
				
				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}
				
				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;
					
					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}
			
			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};
	
	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 1000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};
	
	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
</script>

 

Hey @tuanphan - is it possible to display a unit immediately next to the animated numbers? Have tried but it always wants to sit directly underneath (the 'kgC02e')

Have made a mockup to show what I mean.

This was so useful! Thanks @tuanphan