Jump to content

Creating 2 Buttons on Hayden banner Template instead of 1

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.immyhowardmillinery.com/

Good morning, 

I am very new to custom CSS, and am wondering if anyone might be able to help me with my Hayden template on Squarespace.

I am trying to create 2 buttons on the banner section of my homepage, instead of just having one central button (have attached pics of what the current view is, and what I'd hopefully like to create)- Is there any way I can do this? Apologies if I am missing something really obvious! 

Cheers

Immy

home.jpg

home2.jpg

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan, 

Thanks so much for your help- I use a Personal Plan on squarespace, with the Hayden Template- is that the correct info? I hope so!!

I can't seem to add text under or above button sadly, only seems to be the button only (the section with the button in is called 'Banner')

Thanks so much again!

Immy

Link to comment
On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan, 

Just wanted to check in with this and ask if you needed any extra info from me at all? Not really sure if I can resolve this button issue as the button itself is in the banner of my template. Hmm. If there’s any info you need from me at all, just let me know 🙂 thanks ever so much. Your help really is invaluable!

 

Immy

Link to comment
On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan

Just realised I haven't mentioned which version of squarespace I'm on, sorry about that. I have version 7.0 with the Hayden template. I hope this helps!

Thanks x

Link to comment
  • Solution
On 5/12/2021 at 8:47 PM, ImmyH said:

Hi Tuanphan

Just realised I haven't mentioned which version of squarespace I'm on, sorry about that. I have version 7.0 with the Hayden template. I hope this helps!

Thanks x

Edit Site Footer >> Add a Markdown Block >> paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<p class="tbutton"><a href="https://google.com">Button 2 text</a></p>').insertAfter('body.homepage .desc-wrapper>p:nth-child(3)');
	});
</script>
<style>
body.homepage .desc-wrapper p a {
    background-color: transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    border: 2px solid #9c9999 !important;
    color: #9c9999;
    -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    font-family: futura-pt;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 1.75em;
}
  body.homepage .desc-wrapper p a:hover {
    background-color: #9c9999;
    color: #181818;
}
  body.homepage .desc-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
  body.homepage .desc-wrapper p:nth-child(-n+2) {
    display: none;
}
  body.homepage .desc-wrapper {
    padding-top: 100px;
}
</style>
  

image.thumb.png.6da20a9d93ceab40c638ffc807383052.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
3 hours ago, tuanphan said:

Edit Site Footer >> Add a Markdown Block >> paste this code


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<p class="tbutton"><a href="https://google.com">Button 2 text</a></p>').insertAfter('body.homepage .desc-wrapper>p:nth-child(3)');
	});
</script>
<style>
body.homepage .desc-wrapper p a {
    background-color: transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    border: 2px solid #9c9999 !important;
    color: #9c9999;
    -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    font-family: futura-pt;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 1.75em;
}
  body.homepage .desc-wrapper p a:hover {
    background-color: #9c9999;
    color: #181818;
}
  body.homepage .desc-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
  body.homepage .desc-wrapper p:nth-child(-n+2) {
    display: none;
}
  body.homepage .desc-wrapper {
    padding-top: 100px;
}
</style>
  

image.thumb.png.6da20a9d93ceab40c638ffc807383052.png

Hi Tuanphan

You are such a wizard, thank you so much! This has worked perfectly! Once again, my endless gratitude!

Immy

Link to comment
  • 11 months later...

@ticecl

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.