Jump to content

Custom coding for buttons

Recommended Posts

Site URL: https://alexandrahall.squarespace.com

Hey community!

I am doing a project for a program I am in where we are asked to recreate a site that already exists. I chose: www.cascobotanicals.com 

I am trying to get the buttons to look like the ones on my inspo site. But it seems very tricky and confusing. My squarespace site is https://alexandrahall.squarespace.com and password is brineintopedro

Any idea how to get the buttons to look somewhat like the ones on www.cascobotanicals.com ? I attached a photo of what they look like below. Thanks so much.

Screen Shot 2021-04-10 at 5.43.58 PM.png

Link to comment
  • Replies 13
  • Views 1.1k
  • Created
  • Last Reply

The font being used is Ambit. That isn't a font SS has as far as I can see. If the font could be found that could be uploaded to your site and then it could be used. Alternately you could try to find a font with a similar right arrow style.

To add the arrow to your button I think you'll need to use use the ::after pseudo element to add it.

#block-yui_3_17_2_1_1618017340534_2404 .sqs-block-button-element::after {

  content : ' →';
  
  }

 

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
On 4/10/2021 at 6:23 PM, creedon said:

The font being used is Ambit. That isn't a font SS has as far as I can see. If the font could be found that could be uploaded to your site and then it could be used. Alternately you could try to find a font with a similar right arrow style.

To add the arrow to your button I think you'll need to use use the ::after pseudo element to add it.


#block-yui_3_17_2_1_1618017340534_2404 .sqs-block-button-element::after {

  content : ' →';
  
  }

 

Thanks so much! Any idea how to get the button to move upwards toward the photo? 

Link to comment
#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

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
3 hours ago, creedon said:

#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

This helped move them right underneath the photo which looks MUCH better. Thank you so much! But still not touching the photo, seems that is a bit tricky as I've tried a million things!

Screen Shot 2021-04-12 at 4.20.30 PM.png

Link to comment

Next I'd suggest going after the margins and padding on top of the buttons.

#block-yui_3_17_2_1_1618017340534_2404 {

  padding-top : 0
  
  }

Although this looks like it will trigger the need for other changes.

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
On 4/13/2021 at 6:22 AM, thirdeyegyps said:

This helped move them right underneath the photo which looks MUCH better. Thank you so much! But still not touching the photo, seems that is a bit tricky as I've tried a million things!

Screen Shot 2021-04-12 at 4.20.30 PM.png

The site has also some problems.

Site URL: https://alexandrahall.squarespace.com/

1. (Mobile-Homepage) Button text overflow

alexandrahall.squarespace.com-mobile-hom

2. (Tablet-Homepage) Similar above

alexandrahall.squarespace.com-tablet-hom

3. (Tablet-Homepage)

alexandrahall.squarespace.com-tablet-hom

4. (Tablet-Science)

alexandrahall.squarespace.com-tablet-sci

5. (Mobile-Science)

alexandrahall.squarespace.com-mobile-sci

6. (Mobile-Science)

alexandrahall.squarespace.com-mobile-sci

7. (Mobile-Overlay Menu) Make icon – instagram same line?

alexandrahall.squarespace.com-mobile-ove

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:

The site has also some problems.

Site URL: https://alexandrahall.squarespace.com/

1. (Mobile-Homepage) Button text overflow

alexandrahall.squarespace.com-mobile-hom

2. (Tablet-Homepage) Similar above

alexandrahall.squarespace.com-tablet-hom

3. (Tablet-Homepage)

alexandrahall.squarespace.com-tablet-hom

4. (Tablet-Science)

alexandrahall.squarespace.com-tablet-sci

5. (Mobile-Science)

alexandrahall.squarespace.com-mobile-sci

6. (Mobile-Science)

alexandrahall.squarespace.com-mobile-sci

7. (Mobile-Overlay Menu) Make icon – instagram same line?

alexandrahall.squarespace.com-mobile-ove

Hi Tuanphan. I was very worried about the mobile 😞 Any recommendations to fix all this?

Link to comment
11 hours ago, thirdeyegyps said:

Hi Tuanphan. I was very worried about the mobile 😞 Any recommendations to fix all this?

Q1. Q5. Q6. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* About casco button */
div#block-yui_3_17_2_1_1618270406081_16305 a {
    font-size: 24px;
}
/* Science q56 - your scient matters */
div#block-yui_3_17_2_1_1618083478688_40600 * {
    font-size: 50px;
}
/* Science q56 - the posibilities */
div#block-yui_3_17_2_1_1618083478688_54360 * {
    font-size: 50px;
}
}

 

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
18 hours ago, tuanphan said:

Q1. Q5. Q6. Add to Design > Custom CSS


/* Mobile */
@media screen and (max-width:640px) {
/* About casco button */
div#block-yui_3_17_2_1_1618270406081_16305 a {
    font-size: 24px;
}
/* Science q56 - your scient matters */
div#block-yui_3_17_2_1_1618083478688_40600 * {
    font-size: 50px;
}
/* Science q56 - the posibilities */
div#block-yui_3_17_2_1_1618083478688_54360 * {
    font-size: 50px;
}
}

 

Tuanphan! You are a saint. Any clue how to make the icon and instagram in the footer to be next to each other instead of on top of each other?

Link to comment
On 4/12/2021 at 12:29 PM, creedon said:

#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

Hi Creedon! This code helped me so much to bring the buttons close to the image. I'm trying to do the same thing to the buttons on the Science Page and the About Page but am having trouble finding the correct blocks to plug into the code?

Link to comment

I use a browser inspector myself.

block-yui_3_17_2_1_1618084883418_20055

block-yui_3_17_2_1_1618084883418_21352

block-yui_3_17_2_1_1618084883418_23163

block-yui_3_17_2_1_1618092079627_36371

block-yui_3_17_2_1_1618092079627_39417

block-yui_3_17_2_1_1618092079627_40872

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
3 hours ago, creedon said:

I use a browser inspector myself.

block-yui_3_17_2_1_1618084883418_20055

block-yui_3_17_2_1_1618084883418_21352

block-yui_3_17_2_1_1618084883418_23163

block-yui_3_17_2_1_1618092079627_36371

block-yui_3_17_2_1_1618092079627_39417

block-yui_3_17_2_1_1618092079627_40872

Thanks a million.

Link to comment
On 4/16/2021 at 8:16 AM, thirdeyegyps said:

Tuanphan! You are a saint. Any clue how to make the icon and instagram in the footer to be next to each other instead of on top of each other?

Add to Design > Custom CSS

/* footer instagram icon text */
div#block-yui_3_17_2_1_1618357904010_22796>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.