MasonCreative

Please advise: I cannot share the site due to it being a re-build in a new template within my existing live site.

I'm trying to work out how to change the background color of a section, make it full-width, etc. in the Basil template. Not sure if I'm missing something, but it seems that in this and some templates, adding a 'section' to a page is not possible, so I've been building pages with blocks (I have also built pages with an index page and sections, which gives me control over this, but I can't nest those pages in the nav menu so I don't think that's possible in the example).

So, I'm curious if anyone can explain the best practice to make an entire section with multiple blocks, etc. a different color from other sections in the page? Please see example screenshots showing the section in question, block ids and some code from the page. Any ideas?

3 hours ago, Ziggy said:

When enabling parallax, the image needs to be ~20% taller than the space it is filling so that it can move in the background

Thanks Ziggy, I understand that and that may solve for this image -- I'll give it a shot. Would still love to know how to target those images specifically so I can experiment with adjustments via CSS, any idea what they're called here? Can't seem to target them with any code.

Please advise: I cannot share the site due to it being a re-build in a new template within my existing live site.

I am trying to target the parallax banner images in the Basil template -- it seems that it is somehow 'zooming' in on the images I upload and causing them to display at sizes far bigger than the image is, which is causing pixelation, image going off the edge of the page, etc. I can't seem to figure out how to target the image and perhaps force the max-width on it or something to avoid this. I have already experimented with uploading different sizes of images, etc. and still looks bad. See screenshots for how the image looks currently, the SS ids, what the image actually looks like and html code... thanks in advance for any advice!

First, I apologize but I cannot share the site as I am building via a new template in 'preview' mode and cannot share it...

I am trying to learn how to target specific sections in the Basil template (Brine family) to adjust the padding, as some sections I have need full-width and others do not. Hoping for some general advice on how to approach this best and what the code will look like. Attaching a screenshot showing the text section I'm looking to target and the name of the sections from ID Finder. How can add padding on the left side of the block section so it is flush with the logo in the top nav?

First, I apologize but I cannot share the site as I am building via a new template in 'preview' mode and cannot share it...

I am trying to learn how to target specific sections in the Basil template (Brine family) to adjust the padding, as some sections I have need full-width and others do not. Hoping for some general advice on how to approach this best and what the code will look like. Attaching a screenshot showing the text section I'm looking to target and the name of the sections from ID Finder. How can add padding on the left side of the block section so it is flush with the logo in the top nav?

@Ziggy can you clarify how I would share the view invitation with an email address?

57 minutes ago, Ziggy said:

Beyond sending a "view" invitation to a specific email address there isn't a good way to publically share when in this mode.

OK, thanks -- any ideas on the best approach then? Should I share screenshots? The tendency is for the entire thread to turn into people telling me I need to share the site hah.

I have been asking questions about a site re-design I am working on, and can't seem to find a way to share the site so contributors here can help me. I am using the 'starting over' method (version 7.0) outlined by SquareSpace at the link I've referenced here:

https://support.squarespace.com/hc/en-us/articles/205815378-Starting-over

The method I am using involves adding a new template to the existing site and using the 'preview' function to build the site - before pushing it live and over-riding the current template when it is completed. Question is: How can I share the site here for help when the method of using a password doesn't work, and it seems that nobody outside of my SS account can see the live pages I'm building? 

Thanks @paul2009 that helps. There is some hesitation internally to switch to 7.1, so I am stuck in 7.0. If it were possible, I would use the same template we're on now for the re-build, but of course I can't do that. I was under the impression that Bedford was in the Brine family, but looks like it's not so I may try to switch here. 

As for asking questions about the template I am working on that is not public... how can I go about asking questions? Should I just post a link to the template family and ask the question that way? Seems strange that there is no way to share something you are working on ahead of roll-out, right?

@Web_Solutions @paul2009 any ideas on how to get the hero to be 100 vh here? Also, starting to wonder if it's best to build out the homepage with an index page or through the demo homepage as I started off here? Seems to be more flexibility, any thoughts?

curalinc.com/landing-bedford

Pass: Astro1965

26 minutes ago, melody495 said:

Update your post title to include that. The clearer you make a post, the easier other users can help! As we are all just volunteering our time on the forum to help each other out.

I think it's plenty clear but thanks.

1 minute ago, melody495 said:

Thanks for sharing. I am not familiar with that template, nor more generally 7.0 templates to be honest. But maybe there is a 7.0 template that provides this functionality that you are looking, that you can try?

The template is setting the banner to work that way you see with a bunch of different settings, we could use code to set it o 100% viewport , but without more a thorough look, I don't feel comfortable that it doesn't affect other things.

Either see if another SquareSpace user responds to you, or I suggest posting another forum question with your template name in the title. e.g. Bedford 7.0 - set banner  section to 100vh.

Sorry couldn't help more!

Thanks, the very first line of my post says I'm using Bedford.

3 hours ago, melody495 said:

The code doesn't work because it looks like you only have 1 section? Ideally you should have the hero banner as 1 section, then I would have the logo as a different section, then Our Approach a different section etc. 

Maybe the problem is that I'm starting from the home page in the template (doesn't seem to be any options for adding sections) -- maybe I should make the homepage from an index page instead? 

48 minutes ago, melody495 said:

We would need a link to your website to really see what's going on and help you. It is really hard without, hence just guessing with code that should work based on the information you have provided. 

Think I finally figured it out 🙂
curalinc.com/landing-bedford

Pass: Astro1965

14 minutes ago, melody495 said:

Go to accounts.squarespace, do you see 2 sites? 1 for your live site, and 1 for the one you are currently working on?

Thanks again, I will add a section and see what happens. To clarify, I am using the 'starting over' method outlined by Squarespace here (option 1 in 7.0). I am not creating a new site, only switching templates, with this method - so I still don't see how I could password protect and/or share the template I am working on without affecting the live site. 

https://support.squarespace.com/hc/en-us/articles/205815378-Starting-over?platform=v6&websiteId=606b7f0d50868d69372d1aed

20 hours ago, melody495 said:

Sounds like you have two sites. One is live, one is the one you are building. Set a password to the one you are building with the instructions from paul.

 

Do you only have 1 section on that page? If so, you can add page-section to your code. 

Try and let me know how it goes.

#collection-6579abe8eb3505138ea56434 .page-section {

height: 100vh !important;

}

 

Thanks again,

Regarding the password... I still don't quite understand, because the password seems to apply site-wide and not to an individual theme (i.e. the new theme I'm using to re-build the site). So, wouldn't it make it where current users of the live site would need to enter a password? Certainly don't want that, but maybe I'm missing something? 

As for the code, it didn't seem to work... attaching a screenshot of what I have so far, trying to get the banner area above the logo scroll to default to 100 vh.

1 hour ago, melody495 said:

You need the one that's called section ID from the ID Finder Or please see @paul2009 's post above for how to share your website url. 

Thanks, working out how to share the URL. When I use ID finder, it only gives me a collection ID at the top where the banner is, so I have a code that looks like this but it isn't working:
 

#collection-6579abe8eb3505138ea56434 {
height: 100vh !important;
}

2 hours ago, paul2009 said:

My post, How to Post a Forum Question provides guidance on how to provide a link to an unpublished site.

Thanks, but I still don't understand -- to clarify, I currently have a live site based on a template, and I'm re-building the site via a new template (using the 'preview' function)... it seems to me that if I apply a password to the site, it would apply to the live site, right? thx!

12 hours ago, Web_Solutions said:

Can you share your website URL?

I would love to, I typed it in to the initial post but it must not have taken. I am building this with a new template as the current site is still live, so it's unpublished and I'm unsure how I would share that -- any advice?

I'm using the Bedford template and trying to figure out how to set the banner section to 100 vh so it fills the entire screen. I've tried some code I've found on here, but can't seem to get it to work - I don't think I understand what the name of that section is (I have the finder plugin but it calls it a collection)? Thanks for any ideas.

@tuanphan not sure why it's not showing up as I keep including it in the 'URL' field in the OP. Regardless, here is the URL:

https://curalinc.com/fmlalinc

Trying to optimize for mobile, I have some code in the first section of the page that I'm trying to use to:

1. Hide the desktop background image
2. Replace the image with a new one on mobile
3. Re-organizing the section to stack the images/text, etc. instead of displaying as a background

So far, I have the new image showing up on mobile, and the elements are stacking via the flex code. But, I can't for the life of me figure out how to hide the original background image in the desktop version. I've tried every variation of the code I can find (using opacity, hidden tag, etc.) and can't seem to get it to disappear. Here is the code in question as I have it now, any ideas on how to get this to work in 7.0?

 

<style> 
@media screen and (max-width:640px) {

#section-background img {opacity: .1;}
  
#new-page-4 {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#fff; //change as needed
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
          flex-direction:column-reverse;
  
  .Index-page-image {
    position:relative;
    height:40vh;
    background-image: url(https://static1.squarespace.com/static/606b7f0d50868d69372d1aed/t/645520402e00c8148fedcbda/1683300418222/banner-image-woman-on-laptop-mobile.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99;
  }
  
  .Index-page-content {
    min-height:initial !important;
    padding-top:10px;
  }

  h1,h2, h3,p {
   color:white;
 }
  
}
}
</style>