Jump to content

Newsletter block code not working

Go to solution Solved by sorca_marian,

Recommended Posts

I have been trying to update my newsletter block styling on the website however the code I have is either outdated or not working - although I have used it on another SS site before. I want to make the input cells/blocks an underline design as per the example attached.Any help would be appreciated! 

Β 

Screenshot 2024-07-11 at 12.50.49 pm.png

Screenshot 2024-07-11 at 12.51.03 pm.png

Link to comment
  • Replies 13
  • Views 192
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

You might be using older CSS selectors for a previous HTML structure.
Do you know how to inspect the elements through developer tools?

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

Link to comment

Can you send a link to a site you want this styling?
Are you aware of the new styling options for forms through SQSP Editor?

Β ?

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

Link to comment

Is this the desired result?
Β 

input[name="email"] {
    background : transparent!important;
    color : rgb(237, 191, 42);
    text-align : center;
}

input[name="email"]::placeholder {
    color : rgb(237, 191, 42)!important;
    text-align : center;
}

input[name="email"] {
    border-bottom : 1px solid rgb(237, 191, 42)!important;
}

Β 

Screenshot 2024-07-11 at 06.10.20.png

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

Link to comment

sorry @sorca_marianΒ I added a couple of lines to alter the text styling to make it uppercase + added text spacing. The text spacing has applied however the uppercase hasn't. Would you know why?:

input[name="email"] {
Β  Β  background : transparent!important;
Β  Β  color : rgb(237, 191, 42);
Β  Β  text-align : center;
}

input[name="email"]::placeholder {
Β  Β  color : rgb(237, 191, 42)!important;
Β  Β  text-align : center;
Β  Β  font-style: uppercase;
Β  Β  letter-spacing:3px;
}

input[name="email"] {
Β  Β  border-bottom : 1px solid rgb(237, 191, 42)!important;
}

Link to comment

One rule you added is not valid.Β 

I updated the code with uppercase and letter spacing.
Don't forget to mark my answer as the solution πŸ™‚

input[name="email"] {
    background : transparent!important;
    color : rgb(237, 191, 42);
    text-align : center;
}

input[name="email"]::placeholder {
    color : rgb(237, 191, 42)!important;
    text-align : center;
    text-transform : uppercase;
    letter-spacing:3px;
}

input[name="email"] {
    border-bottom : 1px solid rgb(237, 191, 42)!important;
}

Β 

Screenshot 2024-07-11 at 06.21.16.png

Edited by sorca_marian

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

Link to comment

Is this on another page?

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

Link to comment
  • Solution

Try this codeΒ 

input[name="email"] {
    background : transparent!important;
    color : rgb(237, 191, 42);
    text-align : center;
    border : none!important;
    border-bottom : 1px solid rgb(237, 191, 42)!important;
}

input[name="email"]::placeholder {
    color : rgb(237, 191, 42)!important;
    text-align : center;
    text-transform : uppercase;
    letter-spacing:3px;
}

Β 

πŸ‘¨β€πŸ”§πŸ‘¨β€πŸ’»Β Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

πŸ™‹β€β™‚οΈΒ Squarespace Custom Web Development & Design

πŸ“…Β Manage Tasks, Take Notes, and Upload Related Images

πŸ“ΉΒ Squarespace Tutorials for free - YouTubeπŸ“ΉΒ 

πŸ’―πŸš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

πŸ™‹β€β™‚οΈΒ Let's connect on LinkedIn

Β 

Β 

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.