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

I’m working through this 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?


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 :slight_smile:

And just noticed a UI Typo.


Well 2 hours later and I have got it to work.
its subtle. I also forgot most of the Pinegrow UI :slight_smile:
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 :wink: and click the Big device title instead :slight_smile:

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


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)


and here is my process.

You want this shiny goodness

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

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.


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


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


  1. Select the Class name you wish to effect.


6.Now to add the PSEUDO Class - hover state here (at last!)

7.Check that you have the correct class name and state listed, with all dots :slight_smile:

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


    • yes, like it says in the picture… again. click it! … CLICK ITTTT!

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

but don’t see the results listed until this

and if you check your code view you should see this


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

.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.

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

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

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.

1 Like

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)

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 :slight_smile:

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!

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.

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!!!

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 :slight_smile:

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 :slight_smile: