tuanphan

What is access password?

Add to Home > Design > Custom CSS

.gallery-slideshow {
    padding-top: 0;
}

What is access password?

@media screen and (max-width:640px) {
div#home-worship-banner-section .index-section-wrapper {
    height: 50px;
}
}

Add to Info page Settings > Advanced Header

<style>
  main#page {
    background: red;
}
</style>

Use this guide.

Try adding to Code Block

<h1 class='title'>PARTICLES!</h1>
<h4 class='subtitle'>Click / Touch Anywhere</h4>
<div class='particle-count'>
  <span class='number'>0</span>
  Particles
</div>
<span class='credit'>
  Created by
  <a href='https://codepen.io/ShawnCG' target='_blank'>Shawn G.</a>
</span>
<div class='particles'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    sizes = [
      15, 20, 25, 35, 45
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;

function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};

$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});

$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var timer = setInterval(function () {
    $d
    .one('mouseup mouseleave touchend touchcancel touchleave', function () {
      clearInterval( timer );
    })
    createParticle( event );
  }, 1000 / 60)
  
});


function createParticle ( event ) {
  var particle = $('<div class="particle"/>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles );
  particleCount++;
  updateParticleCount();
  
  var particleTimer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
    
    
    particle
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + .25,
    	transform: 'rotate(' + spinVal + 'deg)',
    	webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle.remove();
  		particleCount--;
      updateParticleCount();
      clearInterval(particleTimer);
    }
  }, 1000 / 60);  
}
</script>

Your site is private. Please setup password & share url

To tapply backgroun images to blocks, you need to use code.

Can you share link to page where you want to use background image?

Add to Home > Design > Custom CSS

div#home-page {
    padding-top: 5px;
}

Your site is private. Can you setup password & share url?

Can you share access password?

On 4/1/2020 at 9:21 PM, LonelyRiot said:

the red text that says lonely riot is what i want to change into my own red font.

a.Header-branding, a.Mobile-bar-branding {
    font-family: yourfont !important;
}

answered in another post

On 4/2/2020 at 5:42 AM, BlackWidow said:

Hey Tuanphan
One other quick question slighty off topic: I'm trying to get the top navigation to break into two lines when I vertically view the website on a tablet. I'm using the following code:

@media only screen
  and (min-width: 641px)
  and (max-width: 1024px)
   {
.tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner {

    margin: -.20em -.20em;
        margin-right: -22em;
        margin-left: -22em;
     }}

It does break it at first but reverts back to one line when I view another page. Can you let me know what I'm doing incorrect.

Cheers
Black Widow

@media screen and (min-width:641px) and (max-width:900px) {
[data-nc-container="bottom-center"] {
    flex: 100% !important;
}
}

Your header isn't fullwidth, so it is difficult to set background color. See screenshot below

On 4/1/2020 at 10:15 PM, aaron_leduc said:

Thank you so much for your help! 

When I copied your code in, it didn't work as intended. I tweaked some of the parameters to get the logo and menu back to where they should be, but the header is limited to the box around the content.  Screenshots attached

Can you share link to page where you use overlap block? I can take a look

12 hours ago, mpuls1 said:

I am having the same problem. The CSS isn't working for me and when I inspect the page, I also have "MagicPaddingController. Can anyone help? I am trying to reduce the padding on all gallery sections.

Use CSS

[data-section-id="enter section id here"] .content-wrapper {padding-top: 5px; padding-bottom: 5px;}

Each section has different ID. If you share link to your site, I can take a look

Add to Home > Design > Custom CSS

[data-nc-container="top-left"]:hover ~ [data-nc-container="top-right"] a {
    opacity: 0.5;
}

15 hours ago, edmhawkins said:

@tuanphan I tried out the code and i think I haven't explained myself correctly - sorry. I have a scrolling gallery block that i want to become my homepage banner. How can I add live text, and if possible, a button, on top of the scrolling slides? Different copy per slide - I want it to look like the static banner that you see on the homepage. Thanks! 

 

SS 7.1 doesn't support text on Gallery. You can follow this guide to add text. https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/

18 hours ago, djm said:

So good. This both works perfectly. Thanks @tuanphan.

Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

Just checked quickly. Increase width seems time-consuming.

You can use this code to solve.

.folder-toggle~.subnav div span {
    word-break: break-word;
}

12 hours ago, djm said:

I’ve got the same problem with a client website:

https://thermodynamx.squarespace.com

PW: 3fN3!^Mn

You mean Trusted by...?

You want 2 logos/row or?

Add to Home > Design > Custom CSS

.gallery-item-description {
    background: transparent !important;
    bottom: -40px !important;
}

So did you solve?

Add to Home > Design > Custom CSS

/* Select dropdown */
.variant-select-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Quantity */
.product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}