d
Topic
Posts:
7
10 days ago

Narrative Theme accent link removal

Sorry I have not had a chance to pour over the css or code just yet, but I am finishig up transfering my site to Shopify and I'm under a massive time crunch to get my site launched. 

In Narrative, all links including images and buttons have a accent line... 

Where can I get rid of this line on all links?

Thanks so much for the help. 

i
Replies
Ciara G Shopify Employee
Posts:
37
Last edited 9 days ago

Hey, Dan !

Ciara here from Shopify. Thanks for posting. :)

First congrats on the work you have done so far on the site, Narrative is a new theme and it's really nice to see it being used so well, so congrats on all the work so far :)

So do you mean this underlining of links with the mouseover feature in narrative eg here.

If I understand correctly (and it relates to the feature in that screenshot), the great news is that because it's a Shopify theme, we can send it off to our resident theme-wizards as a customisation request with your design time if you like?

You would just need to pick a plan (You'll still be on free trial until your two-week period is up), but once the plan has been picked you can avail of your one hour of design time.

So if we are on the same page, and you are ready to pick a plan, then just send an email to support@shopify.com, then reply here with your ticket number so I can find it in our system.

I'd then be happy to send this off as a theme customisation request for you :)

I hope this helps! Keep me posted 🌻

Ciara G | Shopify
support@shopify.com

Posts:
7
9 days ago

Hi Ciara. Thanks for the response. No that's not the line I was talking about. I have attached a screen shot from one of my pages. 

The pdf icon is linked to a pdf and the button is linked as well. You can see they both have a teal blue line in them. I know this is coming form the theme's accent color setting because when I set the accent color to clear, the line goes away... but I want the accent color, expect for on links. 

I hope that made sense. I can show you other examples if you need. 

Dan

Posts:
1110
9 days ago

I can not see the screenshot but I think that you are referring to the focus outline.

If so, don't. That is an accessibility feature, people rely on that to follow links, buttons, inputs with assistive technology devices.

If you want to rmove it, you will need to replace it with something else that will reflect the focus state. 

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
7
9 days ago

Hi Mircea. Thanks for your reply. No this isn't the focus line. I think it's a link indicator. I think I forgot to upload the image... sheesh!

Here it is. 

Again, it's the blue long over the pdf image and the blue line at the bottom of my button. This appears on all links whether I link up an image or button. 

It might just be the standard text-decoration atribute.

Screen shot 2017 06 19 at 10.37.42 am thumb
Posts:
1110
9 days ago

Hi,

It could be few things like a pseudo element, a link decoration, a border...

Would it be possible to see some live code?

 

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
7
9 days ago

yeah. I'll try to get some up tonight. Sorry I'm working on finishing a sales letter for the site and I only have an hour left to get most of it done. 

Thanks for helping!

Posts:
7
9 days ago

 

Okay so I'm looking at this HUGE scss file and I've found the variable $color-primary. 

In the theme setting under the colors tab, youc an set up a color accent which is the cole that is showing in my links. But this accent color also does a lot more. 

In the scss file, it's used a bunch. 

I've found a couple uses that seem like it might be the issue.

.btn--primary-color {
  color: $color-primary;
}
.btn-link {
  padding: 0;
  color: $color-primary;
  border: 0;
  border-bottom: 1px solid $color-primary;
  background-color: transparent;
  text-decoration: none;
  font-size: rem(14);
  line-height: 1;

This one is interesting because even though the border is zero, the line height is 1 and this line in my links is definitely a 1px line. I would guess this is it... except for the fact that the line shows up on images. And maybe images become buttons when they are linked up?

If I have the right variable, these are the only two spots in the file that I would think add thsi line. 

I could add this in my Shopify development account and mess around I guess right?

 

Posts:
7
8 days ago

Hi Ciara. My ticket number is: 6153699

Thanks!