Jump to content

Adding text to one individual store page

Recommended Posts

Hi all,

I am trying to add text to this page, with a title saying "Background" in this colour (#E2A94C) with black body text beneath it. However, when I add text to this page is pastes it onto my other store pages. I would like this text to only be on this one page.

Does anyone know what CSS would be needed for this?

Link to comment
  • Replies 10
  • Views 291
  • Created
  • Last Reply

Top Posters In This Topic

8 hours ago, jasipai said:

Hi all,

I am trying to add text to this page, with a title saying "Background" in this colour (#E2A94C) with black body text beneath it. However, when I add text to this page is pastes it onto my other store pages. I would like this text to only be on this one page.

Does anyone know what CSS would be needed for this?

Can you share your URL so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
8 hours ago, jasipai said:

Hi @Beyondspace here is the link - https://chrysalis-cow-lp5d.squarespace.com/store/gin-more
I just want to add text as a title in that gold hex code on this one particular page for gin

Where do you want to put your text?

image.thumb.png.eb827a634bf7c2f66577f047d57a694e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
9 hours ago, jasipai said:

@Beyondspace I would like to put a title under "Gin & More" and then body text beneath it.

Do you mean something like this?

image.thumb.png.793a85d2a849fb246d4e4185d9015c60.png

Try the following Custom Css

#collection-6579070e40a8986ae3136f06 .nested-category-title::before {
  content: 'my body text';
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;

}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi mate, really appreciate your help with this. I've pasted the text in but for some reason it's not showing. I see the red error message in the bottom left and I've added a { but it now says syntax error on line 1, still doesn't fix it.

Also I'm looking to add a subtitle that says "Background as well".

 

image.thumb.png.f72526fc5005e2a9edcdc4ebcd6a5bca.png

Link to comment
18 hours ago, jasipai said:

Hi mate, really appreciate your help with this. I've pasted the text in but for some reason it's not showing. I see the red error message in the bottom left and I've added a { but it now says syntax error on line 1, still doesn't fix it.

Also I'm looking to add a subtitle that says "Background as well".

 

image.thumb.png.f72526fc5005e2a9edcdc4ebcd6a5bca.png

Try

"

and

"

image.png.c77430bb70264a95907f165cd91365e4.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi guys, still not working. 
I'm so over deadline with this project and the text won't bloody show up. How do I fix it?

 

How do I fix that error message at the end "Missing opening {"

Whoever helps me fix this I'll buy a coffee

Screenshot 2024-05-24 at 6.24.44 PM.png

Edited by jasipai
Link to comment
On 5/24/2024 at 3:24 PM, jasipai said:

Hi guys, still not working. 
I'm so over deadline with this project and the text won't bloody show up. How do I fix it?

 

How do I fix that error message at the end "Missing opening {"

Whoever helps me fix this I'll buy a coffee

Screenshot 2024-05-24 at 6.24.44 PM.png

Try remove Line 01 to Line 12 to see syntax error disappear or not

If not, you can send all code, I think it is missing somewhere

In the meantime, to add text, you can use this new code to Website > Website Tools > Code Injection > HEADER

<style>
  #collection-6579070e40a8986ae3136f06 .nested-category-title::before {
  content: 'my body text';
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;

}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/25/2024 at 7:18 PM, tuanphan said:

Try remove Line 01 to Line 12 to see syntax error disappear or not

If not, you can send all code, I think it is missing somewhere

In the meantime, to add text, you can use this new code to Website > Website Tools > Code Injection > HEADER

<style>
  #collection-6579070e40a8986ae3136f06 .nested-category-title::before {
  content: 'my body text';
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;

}
</style>

 

Hi mate, neither worked for me. Tried copy and pasting that text into code injection under header, nothing is showing up. I also tried deleting the 2 lines of code you mentioned, nothing. In the meantime I've reverted everything. Here is the full code:
 

#collection-6579070e40a8986ae3136f06 .nested-category-title::before {
  content:"Jackson’s the brand was founded out of the well known gin distiller Burleighs from Leicester and uses only the finest original unique distinctive ingredients. Collaborations have included Leicester City FC and Tigers Rugby Club";
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;

}
.accordion-item__title{color: #E2A94C}
/* nav items color */

}
/*

  begin payment processor icons
  
  License       : < https://bit.ly/3F8sn8W >
  
  Version       : 0.3.0
  
  SS Versions   : 7.1, 7.0
  
  v7.1
  Fluid
  Engine
  Compatible    : Yes
  
  Dependencies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  // justify-content values see < https://mzl.la/32Lkas4 >
  
  @justify-content : center;
  @max-height-width : 75px;
  @spacing : 20px;
  
  // display order
  
  #display-order ( ) {
  
    #afterpay ( ) {
    
      #badge ( ) {
    
        #black-on-bondi-mint ( ) {
        
          // index 1
          
          display : unset;
          @order : 0;
          
          }
          
        #bondi-mint-on-black ( ) {
        
          // index 2
          
          display : unset;
          @order : 0;
          
          }
          
        #white-on-black ( ) {
        
          // index 3
          
          display : unset;
          @order : 0;
          
          }
          
        #black-on-white ( ) {
        
          // index 4
          
          display : unset;
          @order : 0;
          
          }
          
        } // badge
      
      #lockup ( ) {
    
        #black ( ) {
        
          // index 5
          
          display : unset;
          @order : 0;
          
          }
          
        #mint ( ) {
        
          // index 6
          
          display : unset;
          @order : 0;
          
          }
          
        #white ( ) {
        
          // index 7
          
          display : unset;
          @order : 0;
          
          }
          
        } // lockup
      
      } // afterpay
      
    #american-express ( ) {
    
      #logo ( ) {
      
        #blue-bright ( ) {
        
          // index 8
          
          display : unset;
          @order : 0;
          
          }
          
        #blue-dark ( ) {
        
          // index 9
          
          display : unset;
          @order : 0;
          
          }
          
        #neutral-bright ( ) {
        
          // index 10
          
          display : unset;
          @order : 0;
          
          }
          
        #neutral-dark ( ) {
        
          // index 11
          
          display : unset;
          @order : 0;
          
          }
          
        } // end logo
        
      #logotype ( ) {
      
        #one-line {
        
          #blue-bright ( ) {
          
            // index 12
            
            display : unset;
            @order : 0;
            
            }
            
          #blue-dark ( ) {
          
            // index 13
            
            display : unset;
            @order : 0;
            
            }
            
          #neutral-bright ( ) {
          
            // index 14
            
            display : unset;
            @order : 0;
            
            }
            
          #neutral-dark ( ) {
          
            // index 15
            
            display : unset;
            @order : 0;
            
            }
            
          } // one line
          
        #two-lines {
        
          #blue-bright ( ) {
          
            // index 16
            
            display : unset;
            @order : 0;
            
            }
            
          #blue-dark ( ) {
          
            // index 17
            
            display : unset;
            @order : 0;
            
            }
            
          #neutral-bright ( ) {
          
            // index 18
            
            display : unset;
            @order : 0;
            
            }
            
          #neutral-dark ( ) {
          
            // index 19
            
            display : unset;
            @order : 0;
            
            }
            
          } // two lines
          
        } // end logotype
        
      } // end american express
      
    #apple-pay ( ) {
    
      // index 20
      
      display : unset;
      @order : 0;
      
      }
      
    #clearpay ( ) {
    
      #badge ( ) {
    
        #black-on-bondi-mint ( ) {
        
          // index 21
          
          display : unset;
          @order : 0;
          
          }
          
        #bondi-mint-on-black ( ) {
        
          // index 22
          
          display : unset;
          @order : 0;
          
          }
          
        #white-on-black ( ) {
        
          // index 23
          
          display : unset;
          @order : 0;
          
          }
          
        #black-on-white ( ) {
        
          // index 25
          
          display : unset;
          @order : 0;
          
          }
          
        } // badge
      
      #lockup ( ) {
    
        #black ( ) {
        
          // index 25
          
          display : unset;
          @order : 0;
          
          }
          
        #mint ( ) {
        
          // index 26
          
          display : unset;
          @order : 0;
          
          }
          
        #white ( ) {
        
          // index 27
          
          display : unset;
          @order : 0;
          
          }
          
        } // lockup
      
      } // clearpay
      
    #mastercard ( ) {
    
      #symbol ( ) {
      
        // index 28
        
        display : unset;
        @order : 0;
        
        }
        
      #brand-mark ( ) {
      
        #vertical ( ) {
        
          #white-light ( ) {
          
            // index 29
            
            display : unset;
            @order : 0;
            
            }
            
          #black-dark ( ) {
          
            // index 30
            
            display : unset;
            @order : 0;
            
            }
            
          } // vertical
          
        #horizontal ( ) {
        
          #white-light ( ) {
          
            // index 31
            
            display : unset;
            @order : 0;
            
            }
            
          #black-dark ( ) {
          
            // index 32
            
            display : unset;
            @order : 0;
            
            }
            
          } // horizontal
          
        } // end brand mark
        
      } // end mastercard
      
    #paypal ( ) {
    
      // index 33
      
      display : unset;
      @order : 0;
      
      }
      
    #stripe {
    
      #slate {
      
        // index 34
        
        display : unset;
        @order : 0;
        
        }
        
      #white {
      
        // index 35
        
        display : unset;
        @order : 0;
        
        }
        
      #blurple {
      
        // index 36
        
        display : unset;
        @order : 0;
        
        }
        
      } // end stripe
      
    #visa ( ) {
    
      #black ( ) {
      
        // index 37
        
        display : unset;
        @order : 0;
        
        }
        
      #white ( ) {
      
        // index 38
        
        display : unset;
        @order : 0;
        
        }
        
      #blue ( ) {
      
        // index 39
        
        display : unset;
        @order : 0;
        
        }
        
      } // end visa
      
    } // end display order
    
  #twc-payment-processors {
  
    /* for diagnostics the background color is set to gray, for production
       change gray to unset */
    
    background-color : gray;
    
    }
    
  .twc-pp-icon-index {
  
    /* for configuration; index numbers proceed the icons, for production
       change unset to none */
    
    display : unset;
    
    }
    
  // do not change anything below, there be the borg here
  
  #twc-payment-processors {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
    gap : @spacing;
    
    justify-content : @justify-content;
    margin : @spacing;
    
    }
    
  .twc-pp-icon {
  
    max-height : @max-height-width;
    max-width : @max-height-width;
    min-width : 50px;
    
    }
    
  .twc-pp-icon-index {
  
    align-self : center;
    background-color : white;
    font-weight : bold;
    padding : 0em 1em;
    
    }
    
  // afterpay
  
  .afterpay.badge.black-on-bondi-mint.twc-pp-icon,
  .afterpay.badge.bondi-mint-on-black.twc-pp-icon,
  .afterpay.badge.white-on-black.twc-pp-icon,
  .afterpay.badge.black-on-white.twc-pp-icon,
  .afterpay.lockup.black.twc-pp-icon,
  .afterpay.lockup.mint.twc-pp-icon,
  .afterpay.lockup.white.twc-pp-icon,
  
  // clearpay
  
  .clearpay.badge.black-on-bondi-mint.twc-pp-icon,
  .clearpay.badge.bondi-mint-on-black.twc-pp-icon,
  .clearpay.badge.white-on-black.twc-pp-icon,
  .clearpay.badge.black-on-white.twc-pp-icon,
  .clearpay.lockup.black.twc-pp-icon,
  .clearpay.lockup.mint.twc-pp-icon,
  .clearpay.lockup.white.twc-pp-icon
  
    {
    
      max-width : @max-height-width * 1.66666667;
      min-width : 75px; // ap and cp allow down to 64px
      
      }
      
  // begin american express
  
    // begin logo
    
      // bright blue
      
      .american-express.logo.bright-blue {
      
        fill : #3a6cbe;
        
        }
        
      // dark blue
      
      .american-express.logo.dark-blue {
      
        fill : #1e2a51;
        
        }
        
      // bright neutral
      
      .american-express.logo.bright-neutral {
      
        fill : #868e96;
        
        }
        
      // dark neutral
      
      .american-express.logo.dark-neutral {
      
        fill : #2e2a2b;
        
        }
        
      // end logo
      
    // begin logotype
    
      // begin one line
      
        .american-express.logotype.one-line.twc-pp-icon,
        .american-express.logotype.one-line.twc-pp-icon
        
          {
          
            max-width : @max-height-width * 1.25;
            min-width : 175px;
            
            }
            
        // bright blue
        
        .american-express.logotype.one-line.bright-blue {
        
          fill : #3a6cbe;
          
          }
          
        // dark blue
        
        .american-express.logotype.one-line.dark-blue {
        
          fill : #1e2a51;
          
          }
          
        // bright neutral
        
        .american-express.logotype.one-line.bright-neutral {
        
          fill : #868e96;
          
          }
          
        // dark neutral
        
        .american-express.logotype.one-line.dark-neutral {
        
          fill : #2e2a2b;
          
          }
          
        // end one line
        
      // begin two lines
      
        .american-express.logotype.two-lines.twc-pp-icon,
        .american-express.logotype.two-lines.twc-pp-icon
        
          {
          
            max-width : @max-height-width * 1.5;
            min-width : 100px;
            
            }
            
        // bright blue
        
        .american-express.logotype.two-lines.bright-blue {
        
          fill : #3a6cbe;
          
          }
          
        // dark blue
        
        .american-express.logotype.two-lines.dark-blue {
        
          fill : #1e2a51;
          
          }
          
        // bright neutral
        
        .american-express.logotype.two-lines.bright-neutral {
        
          fill : #868e96;
          
          }
          
        // dark neutral
        
        .american-express.logotype.two-lines.dark-neutral {
        
          fill : #2e2a2b;
          
          }
          
        // end two lines
        
    // end american express
    
  // mastercard
  
  .mastercard.brand-mark.white-light.horizontal.twc-pp-icon,
  .mastercard.brand-mark.black-dark.horizontal.twc-pp-icon
  
    {
    
      max-width : @max-height-width * 2.33333333;
      min-width : 125px;
      
      }
      
  // paypal
  
  .twc-pp-icon#paypal-logo-icon {
    
    min-width : 125px;
    
    }
    
  // begin display/order icons
  
    #twc-payment-processors {
    
      .order ( @order ) {
      
        -webkit-box-ordinal-group : @order + 1;
        -ms-flex-order : @order;
        order : @order;
        
        }
        
      .afterpay {
      
        &.badge {
        
          &.black-on-bondi-mint {
          
            #display-order#afterpay#badge#black-on-bondi-mint;
            
            .order ( @order );
            
            }
            
          &.bondi-mint-on-black {
          
            #display-order#afterpay#badge#bondi-mint-on-black;
            
            .order ( @order );
            
            }
            
          &.white-on-black {
          
            #display-order#afterpay#badge#white-on-black;
            
            .order ( @order );
            
            }
            
          &.black-on-white {
          
            #display-order#afterpay#badge#black-on-white;
            
            .order ( @order );
            
            }
            
          } // end badge
          
        &.lockup {
        
          &.black {
          
            #display-order#afterpay#lockup#black;
            
            .order ( @order );
            
            }
            
          &.mint {
          
            #display-order#afterpay#lockup#mint;
            
            .order ( @order );
            
            }
            
          &.white {
          
            #display-order#afterpay#lockup#white;
            
            .order ( @order );
            
            }
            
          } // end lockup
          
        } // end afterpay
        
      .american-express {
      
        &.logo {
        
          &.bright-blue {
          
            #display-order#american-express#logo#blue-bright;
            
            .order ( @order );
            
            }
            
          &.dark-blue {
          
            #display-order#american-express#logo#blue-dark;
            
            .order ( @order );
            
            }
            
          &.bright-neutral {
          
            #display-order#american-express#logo#neutral-bright;
            
            .order ( @order );
            
            }
            
          &.dark-neutral {
          
            #display-order#american-express#logo#neutral-dark;
            
            .order ( @order );
            
            }
            
          } // end logo
          
        &.logotype {
        
          &.one-line {
          
            &.bright-blue {
            
              #display-order#american-express#logotype#one-line#blue-bright;
              
              .order ( @order );
              
              }
              
            &.dark-blue {
            
              #display-order#american-express#logotype#one-line#blue-dark;
              
              .order ( @order );
              
              }
              
            &.bright-neutral {
            
              #display-order#american-express#logotype#one-line#neutral-bright;
              
              .order ( @order );
              
              }
              
            &.dark-neutral {
            
              #display-order#american-express#logotype#one-line#neutral-dark;
              
              .order ( @order );
              
              }
              
            } // end two lines
            
          &.two-lines {
          
            &.bright-blue {
            
              #display-order#american-express#logotype#two-lines#blue-bright;
              
              .order ( @order );
              
              }
              
            &.dark-blue {
            
              #display-order#american-express#logotype#two-lines#blue-dark;
              
              .order ( @order );
              
              }
              
            &.bright-neutral {
            
              #display-order#american-express#logotype#two-lines#neutral-bright;
              
              .order ( @order );
              
              }
              
            &.dark-neutral {
            
              #display-order#american-express#logotype#two-lines#neutral-dark;
              
              .order ( @order );
              
              }
              
            } // end two lines
            
          } // end logotype
          
        } // end american express
        
      #apple-pay-mark-icon {
      
        #display-order#apple-pay;
        
        .order ( @order );
        
        }
        
      .clearpay {
      
        &.badge {
        
          &.black-on-bondi-mint {
          
            #display-order#clearpay#badge#black-on-bondi-mint;
            
            .order ( @order );
            
            }
            
          &.bondi-mint-on-black {
          
            #display-order#clearpay#badge#bondi-mint-on-black;
            
            .order ( @order );
            
            }
            
          &.white-on-black {
          
            #display-order#clearpay#badge#white-on-black;
            
            .order ( @order );
            
            }
            
          &.black-on-white {
          
            #display-order#clearpay#badge#black-on-white;
            
            .order ( @order );
            
            }
            
          } // end badge
          
        &.lockup {
        
          &.black {
          
            #display-order#clearpay#lockup#black;
            
            .order ( @order );
            
            }
            
          &.mint {
          
            #display-order#clearpay#lockup#mint;
            
            .order ( @order );
            
            }
            
          &.white {
          
            #display-order#clearpay#lockup#white;
            
            .order ( @order );
            
            }
            
          } // end lockup
          
        } // end clearpay
        
    // begin mastercard
    
      #mastercard-symbol-icon {
      
        #display-order#mastercard#symbol;
        
        .order ( @order );
        
        }
        
      .mastercard {
      
        &.brand-mark {
        
          &.vertical {
          
            &.white-light {
            
              #display-order#mastercard#brand-mark#vertical#white-light;
              
              .order ( @order );
              
              }
              
            &.black-dark {
            
              #display-order#mastercard#brand-mark#vertical#black-dark;
              
              .order ( @order );
              
              }
              
            } // end vertical
            
          &.horizontal {
          
            &.white-light {
            
              #display-order#mastercard#brand-mark#horizontal#white-light;
              
              .order ( @order );
              
              }
              
            &.black-dark {
            
              #display-order#mastercard#brand-mark#horizontal#black-dark;
              
              .order ( @order );
              
              }
              
            } // end horizontal
            
          } // end brand mark
          
        } // end mastercard
        
      #paypal-logo-icon {
      
        #display-order#paypal;
        
        .order ( @order );
        
        }
        
      .stripe-wordmark {
      
        &.slate {
        
          #display-order#stripe#slate;
        
          .order ( @order );
        
          }
          
        &.white {
        
          #display-order#stripe#white;
        
          .order ( @order );
        
          }
          
        &.blurple {
        
          #display-order#stripe#blurple;
        
          .order ( @order );
        
          }
          
        } // end stripe
        
      .visa {
      
        &.black {
        
          #display-order#visa#black;
        
          .order ( @order );
        
          }
          
        &.white {
        
          #display-order#visa#white;
        
          .order ( @order );
        
          }
          
        &.blue {
        
          #display-order#visa#blue;
        
          .order ( @order );
        
          }
          
        } // end visa
        
      }
      
    // end display/order icons
    
  // end payment processor icons

// change one nav link color //
.header-nav-item:nth-child(2) a {
 color: #E2A94C !important; }
// change one nav link color //
.header-nav-item:nth-child(1) a {
 color: #E2A94C !important; }
// change one nav link color //
.header-nav-item:nth-child(3) a {
 color: #E2A94C !important; }

.accordion-item {color: black}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.