I’m going through the tutorial right now and I’m watching the “Create CSS rules & add stylesheet” chapter. However, when I follow the instructions in the video and click on the plus in the square to save the inline style into a css rule, no popup appears, unlike shown in the video. I also tried this with a separate project independent of the tutorial, but the popup does not appear for me there as well.
@Lava does it show up when you click on Create button?
Is it possible it is somewhere off-screen?
Are there any red errors in the Dev Tools console?
A popup (not the same one as shown in the video as it has the title “Save inline style into a proper css rule”) shows up when I click on “Create”. But unlike your screenshot I do not have a “style.css” available in the Stylesheet dropdown.
I checked if the popup was off-screen somewhere, but I couldn’t find it.
Unfortunately, there are no errors in Dev Tools console.
@Lava I see that Bootstrap is active in your project. Did you do anything besides the tutorial steps to get it into the project?
I don’t think there is Bootstrap active in the project, where did you see it? I followed the instructions in the video and this is how the folder structure looks like currently (I think there would be a Bootstrap folder if it was included, right?).
I just tried it again with all the three options: HTML/CSS only, Bootstrap and Tailwind. For HTML/CSS, the popup appears, for Bootstrap and Tailwind projects it does not. Also, it does not for the “Introduction”/tutorial project. Is it intentional that this doesn’t show up in Tailwind & Bootstrap?
@Lava sorry, I saw Bootstrap in my own image that I posted here!
What are the errors in the console?
There are no errors in console, I also did a clean refresh and tried again, console says no errors. Does it work for you though? To reproduce: For me it is the part at timestamp 02:24 in the video “Create CSS rules & add stylesheet” (Video 07) which doesn’t work.
@Lava this happens when there is no CSS stylesheet included on the page (or stylesheets are ignore / not loaded in PG). Looks like some kind of issue in this case because the css/style.css should be included on the page. Can you double check if it is?
Also, update to Pinegrow plugin 1.0.1.
Thanks for your help!
I updated the plugin to 1.0.1. It now indeed reports that there is not active stylesheet.
I also noticed that it works in Bootstrap now as well as in “Custom CSS” project type. It does not work in Tailwind project type nor in Introduction tutorial.
For Tailwind project type and in the Introduction tutorial, this message appears:
I just found out something. If I right-click the index.html and select “Open in code editor”, one will find the included css-stylesheet in the head area. If I then simply change the href attribute
<link href="css/style.css" rel="stylesheet">
for example by adding a space to the link and then remove it again, then the popup also appears from this point on as soon as you click on the square plus symbol. It looks like the include has now been refreshed. Maybe the stylesheet is not included on initial page load?
It sounds like you may be experiencing one of the PG bugs for style sheets where the style sheet appears as active but does not show up in the UI. For me, it happens at the start of every project. To work around this bug you just need to go into the stylesheet dropdown and click “ignore in active” then open the style sheet dropdown again and click “show in active”.
Thanks for the info. I found a “Refresh” button there, so this is also a way to fix or have a workaround for this problem.
After clicking, now the popup is visible as well when clicking the square plus button.
Thanks @jonroc! I’m looking at what might cause this issue. It is hard to reproduce because it seams to depend on the combination of project content and the way how the browser loads it.
