Re: Change Button Border To Underline (Dawn Theme)

Solved

Change Button Border To Underline (Dawn Theme)

MMast
Trailblazer
182 1 25

Hi there!

I’m looking to change my current underline on my button border to an underline that fits the words properly and also placed closer that works for both mobile and pc version. Examples shown below.

How my site looks:

IMG_0546.jpeg

How I want my site to look:

IMG_0545.jpeg

https://decemberschild.com
password: dc

Accepted Solutions (4)
Moeed
Shopify Partner
4351 1121 1375

This is an accepted solution.

Hey @MMast 

 

Remove the previous code and add this updated code with the same steps mentioned above.

<style>
a.button.button--secondary:after {
    box-shadow: unset !important;
}
a.button.button--secondary {
    text-decoration: underline !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button {
  min-height: auto !important;
  padding: 3px 0px;
  border-bottom: 1px solid #000000;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Dan-From-Ryviu
Shopify Partner
8528 1681 1692

This is an accepted solution.

Please update the code 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
    box-shadow: none !important;
}

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
4351 1121 1375

Hey @MMast 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
a.button.button--secondary {
    text-decoration: underline !important;
}
a.button.button--secondary:after {
    left: unset !important;
}
</style>

RESULT:

Moeed_0-1714633590433.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
MMast
Trailblazer
182 1 25

This is how the mobile view looks:

IMG_0547.jpeg

Moeed
Shopify Partner
4351 1121 1375

This is an accepted solution.

Hey @MMast 

 

Remove the previous code and add this updated code with the same steps mentioned above.

<style>
a.button.button--secondary:after {
    box-shadow: unset !important;
}
a.button.button--secondary {
    text-decoration: underline !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
MMast
Trailblazer
182 1 25

That worked thank you! Is there a way to move the line down to my liking or back up if needed?

Dan-From-Ryviu
Shopify Partner
8528 1681 1692

Hi @MMast 

You can try to add this code to your theme.liquid file, after <head> 

 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

 

Screenshot 2024-05-02 at 14.30.39.png

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MMast
Trailblazer
182 1 25

This is how the mobile version looks with that code:

IMG_0548.jpeg

Dan-From-Ryviu
Shopify Partner
8528 1681 1692

This is an accepted solution.

Please update the code 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button {
  min-height: auto !important;
  padding: 3px 0px;
  border-bottom: 1px solid #000000;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
MMast
Trailblazer
182 1 25

This is how it looks on mobile view:

IMG_0549.jpeg

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
    box-shadow: none !important;
}

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support