change the button color narrative theme

jt17
New Member
6 0 0

Hi everyone,

May you please help me with changing this button color and button border color without changing colors in the whole theme.

The theme is Narrative.

Thanks in advancenarrative.jpg

0 Likes
stephaniejags
New Member
3 0 0

I'm having this same issue. Who wants a red button you can't change? Major accents should ALWAYS be customizable. This is really annoying. Let me know if you figure it out.

0 Likes

Hello @jt17

Please share your store URL and reference site URL.

Please tell us which color want to the button in whole site.

So that I can check and let you know the exact solution for this.

Thanks...

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

Hello @stephaniejags 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Nazgulan
New Member
2 0 0

Hi, 

1.Open Narrative themes theme.scss.liquid file

2. look for .btn on lin 1694 and follow the comments shown bellow
3.1. change background-color: <insert color here> on line 1701
3.2  change border-color: <insert color here> on line 1704
3.3 change outline 4px solid <insert color> on line 1731.

Done.

Have a great day!

 

.btn,
.btn--secondary {
  @include prefix("user-select", "none", moz ms webkit spec);
  @include prefix(appearance, none, webkit moz spec);
  display: inline-block;
  position: relative;
  width: auto;
  background-color: #1E1E1E; //background color
  border-radius: 0;
  color: $color-button-text;
  border: 2px solid #1E1E1E; //border  color
  font-size: rem(12);
  font-weight: $font-weight-bold;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 30px;
  line-height: 2.2;
  vertical-align: middle;
  cursor: pointer;
  transition: $button-transition;
  box-sizing: border-box;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 2px solid $color-button;
    transition: $button-transition;
  }

  &:not(.disabled):hover::after {
    outline: 4px solid #1E1E1E;//outline color
  }

  &:not(.disabled):active::after {
    outline: 0 solid $color-primary;
  }

 

0 Likes
Nazgulan
New Member
2 0 0

..And change 

&:not(.disabled):active::after { outline: 0 solid $color-primary; }

$color-primary;  to whatever color you need

 

0 Likes