Duplicate rule into new .css

Hi @kat
Your operating system file explorer. I’m not sure if you are mac pc or linux. So, however you navigate files outside of a program.
It is still happening after deletion of that file? This error typically shows up when people enable and then disable the design panel. Do you know what might have triggered the error?
Sorry for your troubles,
Bob

  1. Why is inline style still there after I create the class .title? I’m on a mac
    Screen Shot 2021-07-24 at 9.45.22 AM

  2. In top level indexNew.html files I constantly get a orange alert: local browser sync is not running on local… Command B brings up a local browser window fine.
    This happens if I duplicate a style, drag an element in tree from one place to another…

  3. In poetry project index.html deleted class.tracker.json. Seems OK.
    But inserting div and dragging in tree freezes Pinegrow.

Screen Shot 2021-07-24 at 10.01.40 AM

For your first question I would need a little more info. Basically, creating a class won’t transfer any inline styles, that has to be done manually.

For the other tow questions, something really odd is going on. Not sure if it is your project or … Can you start a ticket with support and send your project, please? support@pinegrow.com
Thanks,
Bob

You got rid of inline styles in your css grid tutorial. Possibly you cannot do this with a Bootstrap theme?

Does a browser sync window (command B) not offer any web dev tools in the browser window? I just get 4 errors and a log.

Didn’t work:

Delivery has failed to these recipients or distribution lists:

Original message details:

Server “74.125.195.27:25” returned an error:

  • 552 5.7.0 This message was blocked because its content presents a potential
    5.7.0 security issue. Please visit
    5.7.0 File types blocked in Gmail - Gmail Help to review our
    5.7.0 message content and attachment content guidelines. z13si9309278plc.281 - gsmtp

Hi @kat,
For your first question above, after you add a class, you have to actively move your CSS rules from inline to that class. Once you have the element with the inline style selected, you click on the plus icon to the right of the “Style attribute” title. If there are no rules on the element, it will ask you to pick a selector. You can then either add a class, or pick any combination of selectors that are already on the element. If there are already rule(s) targeting the element Pinegrow will ask if you want your inline moved to one of them.

For your second question. Yes the outside browser (whether using BrowserSync or not) has DevTools. Maybe you were on the console tab and not the Elements tab?

Finally, for your last issue. I’m guessing you were trying to send a zip through GMail, which they don’t allow. If you could use a service like https://WeTransfer.com, that would be great.

Thanks,
Bob

Hi @kat,
We reviewed the projects that you sent to us. The problem stems from the use of two different frameworks on the same project. This is not recommended at all and, in this case, is leading to conflicts that Pinegrow cannot resolve.
For the “Poetry” project, you are using Bootstrap 5 together with Tailwind CSS. The Tailwind CSS framework is designed to lessen its footprint using a compiler to strip away unused rules. In this case, the compiler is hanging up trying to parse some of the rulesets presumably coming from Bootstrap.
For the other project you are using both Bootstrap and Foundation. Again, this could lead to conflicts, this time in how their respective JavaScript handle some things on the page, although these two frameworks are more likely to work together.
Overall, each project should use a single framework. Using multiple frameworks can lead to unusual events and slower page loading. For example, if you bring the frameworks in by CDN, net latency could cause one framework to load first for some clients and the other for different clients. Because stylesheet load order matters, this could cause completely different styling.
The solution here is to eliminate one of the frameworks from each of your projects. You seem to have done the most customization with Bootstrap, so I recommend elimination Tailwind CSS and Foundation.
Cheers,
Bob

1 Like
  1. How do I get rid of Foundation in indexNew.html, which will become index.html? OK to link to 4 separate project pages using Foundation galleries, All pages are in my big top level mcgraphics “project” site—see png.

  2. How do I get rid of Tailwind CSS in poetry?

Amazing turnaround on my support ticket. Thank you
kat

Hi @kat,
You can use either Foundation or Bootstrap (or Tailwind CSS) on individual pages. The only problem comes from having Bootstrap and Tailwind both active in a project with the Design Panel active.

Two things to do to get rid of Tailwind CSS. FIrst, look in the head of your page to see if the Tailwind.css file is being loaded in. Second, Go to the File → Manage libraries & plugins menu item with your page open. Then deactivate any Tailwind or Tailwind CSS Blocks libraries. You will have to do this for each page.

Cheers,
Bob

1 Like

How can I solve the conflict you mention above? In indexNew.html Foundation is not in css, scripts or open in Libraries & Plugins Manager.

I’ve removed Tailwind.css in every page. But every time I reopen PG, Tailwind css & blocks are activated in Manage style sheets and plug-ins, despite my having deactivated it in every page and in project then shutting down PG

Hi @kat,
For the project with Foundation, I guess it is only your original index.html that has Foundation activated. Not either of the two duplicates. If you aren’t going to use it anymore it should be fine.

For the second. It looks like after you remove the stylesheets and turn off Tailwind and Tailwind CSS Blocks in each of your pages, you need to save all of your files, exit the project and then delete the pinegrow.json file.

Good Luck,
Bob

1 Like

All Tailwind alerts are finally gone.

  1. How do I add back in the pinegrow.json file?
  2. Do I need <script src="assets/js/jquery.min.js"></script> with Bootstrap 5?
    Thanks for your patience, Rob.
    Kat

Hi @kat,

  1. The pinegrow.json file will be automatically regenerated when you open/save.
  2. It is hard to answer if you need jQuery or not with Bootstrap 5. Bootstrap 5 doesn’t need jQuery, but still can utilize it if it is present within your project. Since you are updating an old project, I don’t know if you have any jQuery dependancies.
    Cheers,
    Bob
1 Like

I’m still getting these insert popups which freeze on page. They happen when I try to drag in tree. What to do please?

Hi @kat,
Are you getting any error in your devtools console window. You can open it by right-clicking on the pinecone in the upper left corner of the app and selecting “Inspect”.
Thanks,
Bob

Control upper left pinecone is very cool.
Browser sync still doesn’t work. I downloaded & installed node.js then did the terminal command several days ago. Didn’t help.

Huh, somehow Pinegrow still thinks that you have Tailwind and the Tailwind Design Panel open in this project. In one of the project files you must still have some Tailwind CSS files and the library turned on. That must be re-generating the class.tracker.json file. Additionally, I would uncheck the “Use BrowserSync” until you can figure out the install of it to eliminate the additional error messages.

Should I delete class.tracker.json in pginfo?
Only 4 htmls, none with Tailwind open.
Any place else tailwind could be?

On a good note, I ran various terminal commands. Nothing seemed to respond as desired, though node.js is installed. Still now Browser sync is working, at least temporarily.

Hi @kat,
Yeah, delete class.tracker.json, but I’m afraid it will regenerate. Somewhere in your project is still an active Tailwind CSS library. If you look at the pinegrow.json file I’m sure that tailwind will be listed under the frameworks. The only other thing that I can think to do - which would be slightly painful - is to create a new folder and copy everything except the _pgbackup and pinegrow.json files into it from the old folder. Then open it as a new project. That might work.
Sorry for the troubles,
Bob