# Adding text shadow show in "Pinegrow Walkthrough" video not working

**URL:** <https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654>\
**Category:** Beginners\
**Tags:** tutorial\
**Created:** [January 30, 2019, 3:05pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654 "2019-01-30T15:05:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mooremsbws](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mooremsbws](https://forum.pinegrow.com/u/mooremsbws)\
**Post date:** [January 30, 2019, 3:05pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/1 "2019-01-30T15:05:28Z")

</div>

I’m working through this video: [https://pinegrow.com/docs/getting-started/pinegrow-walkthrough-video/](https://pinegrow.com/docs/getting-started/pinegrow-walkthrough-video/) at or about the 17m mark adding a text shadow to the .title property is shown. I’ve gone through it about 30 times now and I can’t get the text shadow to show. I’ve deleted the project and restarted it several times in the event I missed a step. This doesn’t seem to be helping me. Suggestions?

Thanks!  
Michelle

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 30, 2019, 10:33pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/2 "2019-01-30T22:33:52Z")

</div>

Hi @mooremsbws, just working through this now to check for you.  
Also, just noticed/remembered @matjaz , at around 10.10 it says _all rules by default are collapsed, to uncollapse them…_ or such like.

Well, You’re better off using the Word _Expand_ for _uncollapse_ .  
Yeah I know, a bit late to the party with that one. Sorry\< I kept seeing it somewhere and Meant to say, but then… couldn’t find it again!  
Right… back through the video until I get to shadows 🙂

And just noticed a UI Typo.

![2019-01-30_23-19-18](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/18953eeb1de71ab767d5a4b8c488e9f3c34391d4.png)

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 31, 2019, 1:15am UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/3 "2019-01-31T01:15:46Z")

</div>

Well 2 hours later and I have got it to work.  
its subtle. I also forgot most of the Pinegrow UI 🙂  
so its done like this

But first…make sure that you have NOT selected… the device view with the media query that means it is NOT active. ie, if your clicking around on the little display device Screen view of Title (which is now deactivated due to the media query, just STOP that 😉 and click the Big device title instead 🙂

I did this wrong too.  
SO picture over load now…

this is JUST snapshots of me following the vids, but I’ve documented it in case it helps as I got confused, too.

ALSO, the

`.title:hover`

class WONT show up… until you click the **:Hover** state tab above it.  
This seems totally counter intuitive and maybe ALL Pseudo class tabs should be active by default for any element that has any of them (or just all elements?) and you physically have to Deselect each one to NOT see that view.

I mean this , (might be a feature request now, unless I have done it wrong in the beginning)

![2019-01-31_00-29-45](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f306d212f313eac50567e1e8fc9610af86c7e628.png)

and here is my process.

You want this shiny goodness  
 ![2019-01-31_00-09-25](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/968c9ac9643b394fb006bb9432851344e0ab67d7.png)

Sexy shadow!

so we do this

1. Click title on the LARGE display page view. and click the `<h1>` element with the .title class

2. Click on the `.title` class in the **Active** Style tab  
 ![2019-01-31_00-10-04](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/dc9fb9f4e1be721135de465a3be130a504d1b3ea.png)

3.Now look above it at the `:pseudo` states of the class you are implementing (here we are adding the **hover** pseudo state to **title**.  
so you can see this.

![2019-01-31_00-10-34](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f5d182d249757863d40d5b1234b09923aa80258f.png)

and then Click the **:hover** tab so it is light grey/activated.

![2019-01-31_00-11-03](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/deece89f50ebc1420c286c9ff2426b7218815d87.png)

4.Click here…yes, just like the picture says 🙂

![2019-01-31_00-45-27](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4126c457641c3c9246d32b95776cbf0c0147d18d.png)

1. Select the Class name you wish to effect.

![2019-01-31_00-11-36](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9432ceb324c4e259034abf2fb8d60be992160b8b.png)

6.Now to add the PSEUDO Class - hover state here (at last!)  
 ![2019-01-31_00-12-04](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1ad984e810f4d1a6bb699100f66496902cf438fd.png)

7.Check that you have the correct class name and state listed, with all dots 🙂  
 ![2019-01-31_00-12-25](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2c901b54f052523a38af4d985bbcf1fcf5efd035.png)

ok! so it is now created but… er. you STILL won’t see it listed… unless you…do 8.

![2019-01-31_00-17-07](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e1cf465a5fc47a214f0718a68598c3f54b48c515.png)

1. 
  - yes, like it says in the picture… again. click it! … CLICK ITTTT!  
 ![2019-01-31_00-17-32](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/ed961d51296d12fe3d84edc02188c55e5641dfcb.png)

so in the big picture, when it’s all done,  
you get this ( well I do 🙂 )

 ![2019-01-31_00-20-51](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bc468ee4ac15dc867de271600e203fbcad5c913e.jpeg)

but don’t see the results listed until this

 ![2019-01-31_00-21-17](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9b35461f74f12e71f3ae336c3372e67e758322f2.jpeg)

and if you check your code view you should see this

![2019-01-31_00-23-26](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a95b8f59f3106def827d1a59510ee6a6426c8cf7.png)

yes, that’s correct.  
You could have …just typed…

```auto
.title:hover {
    text-shadow: 6px 9px 14px #d3aaaa;
}

```

And be done with this whole affair…er once you had created the .title class and all its nice font stuff.

which… leads me to conclude that the UI logic is a bit FUBAR here, and reversed.

I would EXPECT the usual behaviour to be that ALL POSSIBLE PSEUDO STATES would be LISTED as active, unless I specifically DESELECTED them.

That is, with th Pseudo state tabs in the normal coloured state like everything else, then ALL created pseudo States would be listed in the Active Tab and then ONLY IF ONE WAS DESELECTED (that is the tab is Grey) would it NOT be listed.  
Then I would have a reason for noticing something is missing.

like this explains.  
 ![2019-01-31_00-29-45](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f306d212f313eac50567e1e8fc9610af86c7e628.png)

So there you go. thanks for making me do this. I am so rusty. this has taken around 3 hours or so…

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 31, 2019, 1:19am UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/4 "2019-01-31T01:19:22Z")

</div>

Let me know if this helps and thanks, I needed to refresh how to do it too.  
MAYBE, not at 1am…but

I might have found a bug here too.  
Will upload vid for devs

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [January 31, 2019, 5:19am UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/5 "2019-01-31T05:19:02Z")

</div>

Good, detailed explanation, but I disagree that all pseudo class states should be active by default. That would mean that the item in question is (in theory) being clicked, hovered over, focused on and visited all at once, so what which state would it appear as in the website view.

And more importantly, you’d have to go through every clickable/selectable item in a website and deactivate all the pseudo-classes before publishing.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 31, 2019, 11:23am UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/6 "2019-01-31T11:23:30Z")

</div>

Good point @Printninja and I totally agree with you… which means that I completely utterly and totally disagree with … myself!  
And my prior post!

It turns out that I was battling a bug! and Pinegrow appeared (at least to me anyway) to have totally reversed itself when I was using it… eh? I hear you ask?

Well, I had the actions, working… as they should, in a web browser.  
but in Pinegrow, with he action buttons in both states… at various times.  
SO in the end , early in the morning, I had no idea when the hell it was doing and mis interpreted how it was SUPPOSED to work. I think.  
It kept changing its behaviour.

check out my bug report if you could, and make sure I’m not being a dufus! does it appear to be working one way, and then the opposite (buttons selected/deselected , same results, or both seemingly random)

> [@Possible bug with pseudo Class creation and hover state/ shadow rendition via Pinegrow Pseudo state buttons](https://forum.pinegrow.com/t/possible-bug-with-pseudo-class-creation-and-hover-state-shadow-rendition-via-pinegrow-pseudo-state-buttons/2655):
>
> hi , its 2.30 am, so here is a slightly , not as focused as it could be video to show some unexpected behaviour that threw me! Which is why I suggest counter intuitive UI on the post I just created to help @mooremsbws \_ I may very well be wrong about the unintuitive UI, but that maybe because It may be a bug. around 3.27 you see two buttons activate at the same time, Around 4.42 you see the hover state button activate itself and work properly again after going pear shaped earlier. So, please…

its 7 minutes long… but that is nowhere near how long I battled with this while trying to make a tutorial.  
I saved you much pain 🙂

Finally ,having given up, I restarted Pinegrow 5.11 several times and it now seems dandy\>  
I will of course, hammer this feature and try to break it (oops, test it) again …and again… and again,  
to try and replicate whichever state change led me down that rabbit hole.

nb… I wasn’t even rewarded with a rabbit!  
…drat.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 2, 2019, 5:37pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/7 "2019-02-02T17:37:52Z")

</div>

Well? so did you get it sorted @mooremsbws?

It has set the cat amongst the pigeons here and I have been pulling Pinegrow and my workflow apart since this and questions by @randyrie.

let me know how you got on and if any of this helped.  
bye

---

<div class="post-metadata">

**Author:** ![mooremsbws](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mooremsbws](https://forum.pinegrow.com/u/mooremsbws)\
**Post date:** [February 2, 2019, 6:01pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/8 "2019-02-02T18:01:49Z")

</div>

I can’t thank you enough for your tips and pointers! While it seems my issue was much simpler-I was missing that when entering the offsets, blur etc. Pinegrow was not automatically entering **px** behind the numbers. Annoying, but completely my fault. I don’t know if that is by design or if my install is acting weird. Regardless, putting in the px seemed to take care of it. I apologize for you taking so much time and effort over my “it’s so obvious, I looked right past it.” My only defense is I was working so hard on the actual meat of the lesson, I missed the easiest thing to see. I will say reading through all you did though, as a newbie to this whole thing has provided me other insights and I appreciate that! Thanks again!!!

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 2, 2019, 6:29pm UTC](https://forum.pinegrow.com/t/adding-text-shadow-show-in-pinegrow-walkthrough-video-not-working/2654/9 "2019-02-02T18:29:22Z")

</div>

Ah excellent! all good, as long as you got it sorted,  
and I yes, I too forget things like that…oh and _._  
yes a … dot.

before class names.  
some interfaces show them some don’t. so some time I forget to add them. thinking PG will  
it doesn’t. so keep your eye out for that too.

ok well done and welcome aboard. Had to help you had done it 30 times!  
now THAT is frustrating 🙂

oh yeah and it doesn’t enter things where multiple types of units can be used.  
just in case they are the wrong ones.  
right! screwing holes in walls to hang things for me now.  
Cheerio for now and welcome aboard 🙂
