Can’t duplicate rule into style.copy.css from bootstrap.css. Help please.
Hi @kat,
Your screenshots are a little confusing. It looks like you have a rule selected in you style.copy.css file selected when you are pulling up the context menu. You should have the rule selected in the bootstrap.css section, then right-click for the context menu, select style.copy.css in the duplicate dropdown, and then click on duplicate. Sometimes people forget this last step.
Hope this helps,
Bob
How do I get a new bootstrap.css in case I accidentally overwrote anything?
From the “Components” menu select “Add/Update resources from libraries…”. Then in the pop-up select the overwrite checkbox at the bottom and choose to update for the whole project.
Cheers,
Bob
I’m trying to get rid of extra space but still can’t duplicate BT css. So far what works is to write the rule directly in VSC css panel and edit there. Would prefer to copy BT rule by control clicking to add to style.copy.css in PG. But duplicate in blue panel clicking or hitting return does nothing. Help please.
Hi @kat,
Two things,
- After selecting where to copy the rule, are you clicking “Duplicate”?
- Be careful about over-riding CSS by just making a duplicate rule. The only reason your new rule would over-ride the old one is the load order. Just keep this in mind.
Cheers,
Bob
-
Dropdown blue panel>Duplicate in: style.copy.css
I tried clicking in the blue panel and hitting return.
I don’t see anywhere I can click “Duplicate.” -
I there a different way to change the rules that apply the padding and ::before and ::after?
Hi @kat,
After selecting the rule and opening the dropdown:
And the result is (starting with an empty style.css file):
With regards to changes to the padding on the p element. Each part of a CSS selector has a different value (sort of). Those with higher values will over-rule those with lower values. A “class” selector has a higher value than an element selector. In Bootstrap you overcome padding values by adding a class. So a base paragraph element has a margin-bottom of 1rem. This can be overcome within Bootstrap by adding a class of .mb-0. This will give it a margin-bottom of 0 - padding is almost the same .pb-0. If you want a custom value I recommend adding a new class, for example kat-pb. But then, create a selector of p.kat-pb to create the actual rules. That way it has a higher value than just p alone. Bootstrap makes use of !important a lot! Can’t really overcome that except with another !important, so just make sure you don’t have any conflicting classes from Bootstrap like .pb-0 on the same element.
Cheers,
Bob
1 Like
-
Your explanation was a huge help, Rob and the click on Duplicate in the image was perfect!
-
Here is a helpful old PG Page tutorial (date stamped). But really hard to find on youtube. Pinegrow Walkthrough - YouTube
I’m hoping you’ll do update. -
Should I make new classes to control Surprise me new fonts & colors?
Hi @kat,
I recently did a tutorial on adding CSS in Pinegrow, but realize now that I only covered duplicating a rule, not duplicating to a new sheet.
I’m not sure what you mean for the surprise me. When you click that it will change existing colors and fonts unless you have them locked. Any new color classes or font classes will also be changed. It just depends on what you want to achieve.
Cheers,
Bob
1 Like
Can you give me the url please?
Excellent, this is great, lots easier there sifting thru PG on youtube
What does “TypeError: dp.useTailwindJIT is not a function” mean? It’s now popping up constantly when attempting to edit Bootstrap containers card padding.
Got any new tutorials on editing Bootstrap elements, if so url please.
Hi @kat,
We have encountered this error and it will be fixed in the next version coming soon. In the meantime, open the “_pginfo” folder in your project and delete the “class.tracker.json” file. This should take care of it.
Cheers,
Bob
1 Like
Huh, can you check using the OS file explorer? Maybe Pinegrow isn’t updating the files.
Thanks,
Bob
You can try deleting backups - shouldn’t matter. We might need to look at your project.
open the “_pginfo” folder in your project and delete the “class.tracker.json” file
“class.tracker.json” just showed up. I deleted it. I close and reopen a lot; command R doesn’t seem to do the trick.
Watched your SVG and a bunch of bootstrap tutorials. They help a lot.
1 Like
Where is OS file explorer? This is happening in my big top level project and small poetry project