Jordy_TheShop

On 8/4/2021 at 9:50 PM, zzlogan said:

I had to use this code to change the text of the placeholder 

 

.sqs-block-form .field-element::placeholder {
  font-family: 'YOUR FONT' !important;
}

 

This worked for me. Thanks!

On 7/20/2020 at 11:25 PM, tuanphan said:

All images? Add to Home > Design > Custom CSS

img {
	border: 5px solid violet;
}

 

Hi Tuan,

I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? 

Thanks,

Jordy 🙂

Site URL: https://www.aghlaw.com.au/document-packs

Hi,

I'm looking to find if it is possible to add images or icons inside code blocks? My client wants to add company logos inside of each of the boxes on their services page (see screenshot). 

Each box is an individual service package that requires a different logo in each box. 

Any help would be appreciated!

Thanks,

Jordan

16 hours ago, bangank36 said:

Your site is private now. Kindly give it a protected password so we can take a look

Sorry about that! Site is now available – PW: abc123. Thank you 🙂

Site URL: https://papaya-toucan-w78e.squarespace.com/store/p/vase-gw65w

Hi,

I am wondering if anyone knows a solution to adding a section border on the product page. I'm trying to add a full-width section border below the product image and description, but before the additional content. I've tried the regular section border code which I use on other pages (see below) and this isn't doing the trick. 

I've also attached a screenshot for reference. 

Any help would be appreciated!

CSS I would generally use:

[data-section-id="61ea8fcf58b76c24c766ddb1"] {border-bottom:1px solid #262626;

overflow: hidden;

}

Thanks,

Jordy

On 1/12/2022 at 11:22 PM, tuanphan said:

This is not possible. The button is in iframe tag. You need to style it from Podia.com

Thanks for your clarification 🙂

Site URL: https://www.growpl.com.au/home

Site: https://www.growpl.com.au/home

Hi everyone,

I'm looking for help with some styling inside a code block.

Inside the Code Block is an embedded Checkout Form which is styled as a Button/Lightbox. When the customer clicks the Button the form opens up. The Button is working perfectly however doesn't match the styling of the rest of the site. 

Ideally, I'd like to match the Code Block Button with the in-house Squarespace Buttons. If this is not possible, ideally I'm looking for a way to at least match the fonts and font styling. The font is Lora. I've got some screen shots attached to help.

Any help is much appreciated! 

Thanks,

Jordy 

Awesome. Thank you! 🙂

On 10/26/2021 at 5:15 PM, bangank36 said:

If it 's your desired result, you can add the following codes to Home > Design > Custom Css

@media only screen and (min-width: 800px) {
  .header-announcement-bar-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px !important;
    padding-right: 0 !important;
  }
  .header-display-desktop {
    display: block;
  }

  .header-nav .header-nav-list {
    flex-direction: column;
  }  
}

Let me know if it works property on your site

Support me by pressing 👍 if this useful for you

Hey! Thanks for your help.

I managed to solve the problem by using a section of your code. This is the part I used:

@media only screen and (min-width: 768px) {
  .header-nav .header-nav-list {
    flex-direction: column;
  }  
}

When I used the rest of the code, the header items were pushed over to the left of page even on larger monitors. As the rest of the website content width is quite narrow, this looked a little off (I preferred to keep the header width narrow as well).

I hope this makes sense – in summary your code helped solve my issue.

Thanks,

Jordy!

Hi there,

I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. 

I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. 

Site URL: carnation-parsnip-br2g.squarespace.com

PW: abc123

I've got the following code so far: 

//HEADER STYLING START//
.header-title-text {
    text-align: left;
}

.header-title-nav-wrapper {
    margin-left: 0 !important;
}
.header-nav {
    text-align: left !important;
}

@media screen and (min-width: 800px) {

  .header {
  background: transparent!important;
}
}
//HEADER STYLING END//

Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. 

Thanks,

Jordy 🙂 

10 hours ago, tuanphan said:

Don't remove any code

Add this to Design > Custom CSS

.header-title-text {
    text-align: left;
}

 

Thank you! Have a wonderful day. 🙂 

On 6/10/2020 at 10:13 PM, tuanphan said:

.header-title-nav-wrapper {
    margin-left: 0 !important;
}
.header-nav {
    text-align: left !important;
}

add this.

Thank you.

Hi @tuanphan

I'm seeking this same effect to create a 'sidebar nav' however this did not fully work for me. Whilst my nav links are working, my site title is not fully to the left of the page. Any ideas?

Site:https://carnation-parsnip-br2g.squarespace.com/

PW: abc123

Your help is much appreciated!

Thanks,

Jordy

Site URL: https://idealog.com.au/

Hi,

I'm working with a client on a Personal Subscription. I'm looking to see if there is a way to centre mobile-only text but only on specific pages.

My client has a blog page, and I'd like to centre the mobile text on all pages except the blog page to keep it left aligned for better reading. 

Is there a way to do this or will I have to enter every page's individual section manually? 

Thanks,

Jordy 🙂

Yes I did – I ended up noodling around and the following CSS worked for anyone else needing this effect. 

//MARQUEE START//
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 40px;
  padding-top: 0px !important;
  overflow: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
//MARQUEE END//

Thanks,

Jordy 🙂

Hi,

I'm having trouble with a rotating text marquee on my site. I've successfully managed to put the marquee in using a code block, however I have site overflow and not sure how to fix it. I've tried fiddling the max width but no luck. Any help would be much appreciated.

HTML:

<h3>
<div class="marquee">
  <div class="track">
    <div class="content">&nbsp;SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO • SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO</div>

CSS:

//MARQUEE START//
.marquee {
  position: center;
  width: 150vw;
  max-width: none;
  height: 40px;
  padding-top: 3px !important;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
//MARQUEE END//