Adding text shadow to Narrative Theme

josh2huge
New Member
2 0 0

Hi all,

I am trying my darndest to add text shadows (to improve visibility) to the text of my hero and slideshow headers. Could anyone please tell me how I can do this to the Narrative theme? 

I have seen recommendations for adding text to Debut themes, and I have tried adding code to "theme.scss.liquid," under /*================ Hero and slideshow headers ================*/ but to no success.

For example, I added this: 

/*================ Hero and slideshow headers ================*/
.mega-title,
.mega-subtitle {
  text-shadow: 1px 1px 0px $color-text-shadow;
}

But it doesn't seem to work with the "Narrative Theme."

Any help appreciated

0 Likes

Hi,


Here is a step-by-step instruction to add text shadow to the slideshow headers.

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

Follow these steps:

1.From your Shopify admin, go to Online Store > Themes (In this example I have managed Narrative theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
4. You should go to the bottom lines in the file and Paste this code:

/ ==== custom CSS  - add text shadow to the slideshow headers ==== /

#Slideshow-slideshow .slideshow__heading, #Slideshow-slideshow .slideshow__button-label {
  text-shadow: 1px 1px 0px #e9e4e4;
}

#e9e4e4 - your text-shadow color;


Hope this helps you!

 

Best,
Arthur

 

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
josh2huge
New Member
2 0 0

Thanks Arthur, appears it worked well

0 Likes
LENA_LEVI
New Member
1 0 0

Dear Arthur, thank you for the reply regarding shadowing!

Would you please advise how to manage text composition on the slideshow pages - it looks wonderful in Brooklyn when in Narrative key messages look like a mess - no possibility to split the text into 2 lines or (and) change its size/proportions. Any chance to manage this? Sorry can't upload the image properly...

Millions of thanks in advance for reply, Lena

0 Likes
gmb511
Tourist
6 0 2

Hi Arthur,

I know it's been a bit over 2 years since you posted this, would greatly appreciate if you can clarify what I'm doing wrong in the theme.scss.liquid file lines after pasting the code in your response. 

The slider text disappears completely after pasting the code. For reference my shopify website is suculentasbyluna.com (I reverted the changes to the file for the time being, so it shows as it was originally). 

Again, very much appreciate any guidance, I'm fairly new to liquid. 

Thanks! 

    .icon-3d-badge-full-color-element {
      fill: $settings-color-primary-heading-text;
      opacity: 1;
    }
  }
}
.image-bar__flex { padding: 5px; }
    }
  }
}
/ ==== custom CSS  - add text shadow to the slideshow headers ==== /

#Slideshow-slideshow .slideshow__heading, #Slideshow-slideshow .slideshow__button-label {
  text-shadow: 1px 1px 0px #e9e4e4;
}

 

0 Likes
tompaine
New Member
1 0 0

Hi - I've just used this code and it works, but is there a way to create an all-around 'glow' (for lack of a better word) rather than a hard drop shadow? Similar to the way the titles work on the DEBUT theme. Cheers

0 Likes
shipshopllc
New Member
2 0 0

Hey Arthur, sorry to bring up an old thread but something in the base code of the Narrative theme must have changed since you posted this solution. I also want to add shadows to the text in my headers but when I paste the code in at the bottom of the theme.scss.liquid file, my homepage only renders the slideshow picture and nothing else loads. Any ideas?

0 Likes
shipshopllc
New Member
2 0 0

By the way - my shop's page is www.thewatchcone.com

0 Likes