Jump to content

Element displaying differently online

Go to solution Solved by sorca_marian,

Recommended Posts

Hi,

The logo looks good on my end.
For the transparent button, add the below code in Page settings -> Advanced -> Page header code injection

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
}

button[type="submit"] .form-submit-button-label {
    color : #000;
}
</style>

 

Screenshot 2024-03-07 at 21.11.36.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
22 minutes ago, sorca_marian said:

Hi,

The logo looks good on my end.
For the transparent button, add the below code in Page settings -> Advanced -> Page header code injection

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
}

button[type="submit"] .form-submit-button-label {
    color : #000;
}
</style>

 

Screenshot 2024-03-07 at 21.11.36.png

Hey, thanks fro hte code! Is there anyway the code can be adjusted so that the button is exactly the same style as my newsletter button? Its a rounded rectangle, 1px border, and when you hover over it it turns black with white writing. Thank you!

before hover.png

whilst hovering.png

Link to comment

Sure

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
}

button[type="submit"] .form-submit-button-label {
    color : #000!important;
}

button[type="submit"]:hover {
    background : #000!important;
}

button[type="submit"]:hover .form-submit-button-label {
    color : #fff!important;
}
</style>

 

Screenshot 2024-03-08 at 20.01.32.png

Screenshot 2024-03-08 at 20.01.35.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
9 minutes ago, sorca_marian said:

Sure

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
}

button[type="submit"] .form-submit-button-label {
    color : #000!important;
}

button[type="submit"]:hover {
    background : #000!important;
}

button[type="submit"]:hover .form-submit-button-label {
    color : #fff!important;
}
</style>

 

Screenshot 2024-03-08 at 20.01.32.png

Screenshot 2024-03-08 at 20.01.35.png

Ah amazing thank you! I just need the border to be a little bit less thick (i would like to copy the 'sign up' button style just below it. Please could you help? 🙂 

Link to comment
  • Solution

Great
 

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
    border-width : 1px!important;
}

button[type="submit"] .form-submit-button-label {
    color : #000!important;
}

button[type="submit"]:hover {
    background : #000!important;
}

button[type="submit"]:hover .form-submit-button-label {
    color : #fff!important;
}
</style>

 

👨‍🔧👨‍💻 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
29 minutes ago, sorca_marian said:

Great
 

<style>
button[type="submit"] {
    background : transparent!important;
    border : 1px solid #000;
    border-radius : 5px;
    border-width : 1px!important;
}

button[type="submit"] .form-submit-button-label {
    color : #000!important;
}

button[type="submit"]:hover {
    background : #000!important;
}

button[type="submit"]:hover .form-submit-button-label {
    color : #fff!important;
}
</style>

 

Thank you so much buddy!

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.