Another Visual Style interface bug, or my misunderstanding?

General Bug Reports
1

Hi.
Here again.
So I am aware that the 4 pseudo states have a button you select to make them active , ie, hover etc,
But with regards this tutorial, (the timeline tutorial) there is a

:before

pseudo state (and several others you must type in)

now, following along with the tutorial, I noticed that the style.css is AREADY populated with the style attributes I am to add.

GREAT I thought, this should speed things up… er no.

so here is… another vid.

notice that while the 3 styles listed in the element properties for the Selected div, show up correctly , they dont match what appears in the Active styles tab at all.

So I guess this, MIGHT be from the prepopulated styles.css sheet that comes in the tutorial download.

and then, I have a still capture from the video that DOES show the

timeline-item:before
style show up in the Active styles tab, for the same Element.

Screenshot 2021-03-03 at 23.33.32
Screenshot 2021-03-03 at 23.33.321529×1051 376 KB

is this another bug, or could someone correct me and point me in the right direction.

Midnight now, ive not got to where I wanted to be and am now going to bed.
BUT!.. every day’s a school day :slight_smile:

woops, forgot to add my image here too of how it looks for me.

But… then, when I tried to view it it didnt seem… right.

this is the NEXT day. In the morning, and IM smashing into some wierdness now.WIll add a new video

2

You shouldn’t write as a class name like “timeline-item:before”.

If you want more detail about pseudo classes and pseudo elements please follow the links below will help.

https://www.w3schools.com/css/css_pseudo_classes.asp

https://www.w3schools.com/css/css_pseudo_elements.asp

If you want to learn more advanced stuffs please flow the link below

1 Like
3

Thanks for the links @smemis , They look good info. I will go through them later, as i rarely use Pseudo classes myself if i’m honest.

But, just checking why I shouldn’t use class names like this? in your opinion, what is wrong with it?
single/double : or the naming convention? BEM etc?

Im currently trying to follow along with the Timelines tutorial,

It comes with a starter project of resources to download, and this particular style and its name is already in the download.

it looks like this:

Screenshot 2021-03-04 at 10.14.16

So I haven’t touched that, I didn’t create and name it myself and that is the name it already has -even though I am supposed to create it myself in the tutorial, it is already IN the download (which kind of confused me, as in the tutorial,

  1. you create the style names and apply them to an element FIRST…
  2. then add the css properties to this new style.

…well as soon as I created the class name and added it to the element, the properties INSTANTLY applied! since thant class name and its properties had already been added to styles.css in the download resource! I didn’t know that.

:slight_smile:
that caught me out when the very first h2 centered on its own… wah?
:smiley:

So, I then thought *ah ha! - they already exist, so I can just speed through the tutorial and
just Add the class names to the elements!

er, no… hence this possible bug/my misunderstanding/mistake, whatever.
SO this is what was happening when I was trying to apply these *already exisiting style sheet rules, to the new elements I was creating.

But I usually hit all sorts of weird stuff when following along with stuff, so kind of stop, then give up
I thought, this time, I`ll catalogue it, and try and get it checked out and some help, see if its me or PG.

So thanks :slight_smile:

4

Hey @schpengle,
Mea Culpa. I guess I never set the stylesheet back to “zero”. I’ll upload a new project with a proper stylesheet shortly.
As to your “pseudo” problem. @smemis is correct. You don’t need to add the pseudo-class or -element to your class name. The browser does it based on user interaction with the page or at display time. To use an easier to explain class, if you add a class of `.timeline-item:hover’ to an element then when the user hovers over the element the browser will interpret that as ‘.timeline-item:hover:hover’.
If you look at the W3C rules:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.

Basically, colons are not allowed to be used for class names.
Cheers,
Bob

1 Like
5

oh ok!.. sort of.
I need to digest this.
Thanks both… but could. you check out this following vid too>?

Is this me being retarded… or is the interface not behaving as it should?

I have class showing in the listed ACTIVE styles.
I am selecting and deselecting classes in the element properties styles…

And yet I have commented OUT styles, which I have never commented out, that I cant get to be
uncommented!

I understand (well just remembered) that by clicking to select/deselect the class names in the
Element Properties tab -it ADDS and REMOVES the classes in the… HTML code.
Ok got it.

and that then by clicking the EYE icon in the ACTIVE tabs styles list… it
COMMENTS OUT and then Uncomments the same styles in the style sheet…

ok…got that.

so iN THIS vid… shouldn’t the Commented out styles…be visible… in the
Active styles… tab?.. with the EYE icon so that I can UNCOMMENT them,
as the styles are STill present in the html code (NOT removed via the other tab)

BUT. seem to have dissapered from the active tab
(ie, timeline-item) … so I can no longer use the visual editor to re enable it after been hidden/commented out by it.

I have had to restart PG so many times now, that I am not sure what state anything is in any more.

I will process and uplaod this vid now.

ps

is NO PROBLEM! having the final CSS sheet :smiley:
In fact I always find that having the entire final project is GREAT
as then, when im breaking it… and stuck I can look at the correct end result and see where Ive gone wrong.

so maybe update it with the COMPLETED site and put the blank CSS in the START site?

I will do this video now.

Here is da vid

this is the youtube Commentary ive added on youtube to explain, incase it is viewed here>

A slightly confused vid initially.
I try to show that while the

PROPERTY ELEMENT tab, works by adding and removing classes in the actual HTML of the selected element shown in the breadcrumb,

The ACTIVE TAB… COMMENTS out the styles altogether in the stylesheet.

Now, in the state captured in the video, the STYLES can be added and removed from the HTML Element code by clicking on the blue styles icons in the Element Properties Panel (on this occassion, it works correctly - in a previous video that was yet another bug, where it wasnt working correctly and missing clicks)

BUT… in the ACTIVE tabs … for the same element, which has the css style applied to it, the styles are now PERMANENTLY commented out!

They are no longer listed in the Active styles tab, and so, I no longer have access to the eye icon (or indeed the others) to show/hide this style anymore

6

oK im now totally confused!

If your referring to that quote above…er I never…created that as a class.
not just

:before

in fact, I never created ANY of it arrived, in the style.css of the project.
and is broken.

pinegrow is failing to render it.

im now totally confused, giving up as usual and going to the horses again.
this is why I give up on this stuff constantly when trying to get somewhere and have basically got nowhere with this after years of trying…

I will check in later, see if its me, and time for a career change!

UPDATE

ok, no horses yet, i microwaved lunch instead.

lets eat and look again before running away

Ok Ive relaunched PG and it has now started with those commented classes STILL commented out in the CSS file, so its no longer possible to make them visible in the
ACTIVE tab visual view.
unless I actually edit the CSS style myself and
mmm and another thing I noticed about when PG was in that state was that is that, in this tutorial example it was NO LONGER POSSIBLE

to click on the image to select that item.

i had to keep going to the breadcrumbs to do it.
and when I selected the timeline-item element, in the breadcrumbs, the img breadcrumb would not appear, greyed out, like in your tutorial.

now it does and I can swap back and fore betweeen the two.
as shown in the vid

this vid shows both of these issues…

and as this image shows,
previously, as well as the class states being broken, the breadcrumb also failed at the same time.

Screenshot 2021-03-04 at 10.38.56
Screenshot 2021-03-04 at 10.38.561521×991 348 KB

see there is NO img tag in the breadcrumb trail.
it was also not possible ot select it in the visual editor view.
my only choice was to swap to tree view and THEN select it.

this all takes far longer than just coding.
so is it me or have i hit the same bugs that have had me for some time again?
This is the standard 3 col view.
ive had to give up on custom workspace for the moment.

i will also uninstall and reinstall PG again, in case I have oddness after testing the Monaco plugin,
but I have had these issues before but never doggedly pursued them as much due to confusion!

so please say Im not just confused :stuck_out_tongue:

7

Nope.
its definitely broken.

here is the vid

and

here is the description Ive added on the youtube vid

Selecting multiple styles in Pinegrow Active Tab to show and hide styles
breaks functionality and permanently comments them out, thereby removing them from the Active Styles tab completely and making it impossible to re enable them by clicking on the EYE icon as - it is no longer present, since the entire styleset or individual style has now gone from the Interface for good.

Restarting Pinegrow does not fix this.

Only manually editing the CSS stylesheet and removing the comments, re enables the styles/stylesets to once more become visible in the Pinegrow Active styles tab panel… for elements, for which it is active on in that state of course! :slight_smile:

I can now finish my baked potato, knowing Ive not gone (any) mad(der) and then head to the horses.

N.B.
This is BEFORE uninstalling and reinstalling PG again i should add. I will do that testing later

UPDATE

ok uninstalled, reinstalled,

Went straight to the project, did the same thing, more or less, with a little more order
and have worked out that it is , in THIS example , when you Hide then RE ENABLE>… the
main root style of the pseudo classes that everything falls apart. (rather gracefully :slight_smile: no crashes, just everything works as before but with your comments now totally invisible, so welcome to the land of confusion!)

here is youtube commentary , followed by video

as can be seen in video,
multiple active styles of an element which has various pseudo classes can be shown and hidden.

Pinegrow accomplishes this by commenting OUT those styles in the accompanying style sheet.

however, when using MULTIPLE show and hides… and alternating between them OR using
Pseudo state styles

AND THEN HIDING THE MAIN ROOT STYLE of those states… on re enabling that main style, all the pseudo/sub styles REMAIN commented out in the code and make it impossible to carry out out further modifications/show hide in the visual editor as those styles have now remained commented out and cease to be accessible via the visual editor’s active styles tab.