How to copy a style from one css, like bootstrap, foundation or Froala to my custom css? Don’t want to have write directly into my css.
Hi @kat
Not quite sure what you mean. Other than copy-and-paste from one file to another, there isn’t a real good way. But I’m not sure what you mean by your last sentence.
I’m trying to learn how to duplicate css from froala_blocks.min.css to my kstyle.css. Part of my problem is that when I started PG the interface was much different. Youtube videos that cover PG css styles panels are for that older PG interface.
Please consider making tutorials on the PG css visual style panels, Robert.
In the mean time back to PG documentation ; )
I’m getting there. The last 2 summer nights tutorials helped.I look at foundation or bootstrap css then write the active style into a new style, but no way to copy foundation or bootstrap to for the new style. I’m having trouble with specificity which you mentioned with my image filtering.
Hi,
Sorry I can’t make more concrete recommendations. I would have to dig a little deeper with your files to determine if there is an easier way.
I’m not sure if you understand CSS specificity. I have a tutorial coming out on pseudo-classes and I’ve added an intro to CSS specificity to that. We are debating if it will appeal to enough Pinegrow users. Basically, you can think of specificity as a four digit number (not actually true, but close enough). The first digit is a 1 if the HTML element has in-line styling. That gives a specificity of 1000. The second digit is the number of Ids in the selector that match the element. If there is one then the specificity is 0100. The previous example of 1000 would overrule the second of 0100. The third digit is the number of matching classes. So if there were two classes the specificity would be 0020. which is less specific than 0100. The final digit is the number of elements , for example an img tag. So a CSS selector like, img.artist would have a specificity of 0011. This number has to be greater then any other rule matching the element you want to style for that particular rule to be applied. Make sense?
1 Like
Very much hoping for the tutorial.
Clarification please.
pecificity 1 highest, 4 lowest.
1.The first digit is a 1 if the HTML element has in-line styling Like ‘<h2>or <p>’?
2.The second digit is the number of Ids in the selector that match the element Like ‘#Home’?
3. The third digit is the number of matching classes Like ‘.red’ or ‘.dog’?
4.The final digit is the number of elements , for example an img tag Like ‘{css declarations;’?
Which is the most general and which the most specific? I wouldn’t want use all,
For specificity, digit 1 is highest, 4 is lowest. Read it just like a normal four digit number one thousand = 1000, two hundred = 0200, ten = 0010.
First digit is if the HTML element has a style attribute - so <p style="color: red;"></p> That would score 1000, which means anything in your stylesheet would need an !important to have higher specificity
Second and third you are perfectly correct.
Fourth digit is just an HTML tag like <p> or <img>
Basically, you want the lowest specificity that gets you styling only on the element that you want. You want to start selecting from the end of the chain, closer to the actual element. The farther up the selector chain you get, the more chance that you CSS will hit many other elements.
I can’t completely tell without seeing other elements on the page and I’m also not sure what you are trying to style exactly, but. I would start with the other end of that chain and click on the .image-overlay and maybe if needed the .gallery-thumb. That would give a specificity of 0020 and would apply styling to all of the gallery thumbnail overlay elements. Remember, you only need a high specificity if there is another rule styling the same element.
Make sense?
I pretty much understand specificity from your explanation. But don’t get the 4-digit#
".image-overlay and maybe if needed the .gallery-thumb" Is this 0020 because end then 2nd from end. Could you have 0040, 0090?
Both .image-overlay and .gallery-thumb are classes - take a look at either the code directly, or the target element and the parent of the target element in the properties panel. You will see that they have the indicated classes. The browser counts the number of classes up and puts them in the third position. Hence 0020. If there were four matching classes in the selector it would be 0040. If your selector has an ID, although there aren’t any in the selector chain you posted, the specificity would be 0100. In CSS the IDs are prefixed with #. If your selector had one ID and one class the specificity would be 0110.
Am I even close?
‘body div.grid-container .grid-x.small-up-1.medium-up-2.large-up-3.grid-padding-x div.cell div.callout p img’
No ID
6 classes (anything with a . in front of it)
2 html tags
= 0062
No ID
8 classes in blue
6 html tags in red
=0086
Remember, you only need a high enough specificity to overcome any other rules and target only the items you want. My guess is the
.callout img might be enough to achieve what you want.
This is great. I mis-counted the classes and the html tags can be anywhere in the line up.
I understand using the lowest specificity.
MY problem remains the 3 PG visual editors. Back to the documentation. 
So far it is simpler to open the css or html and write the code there, though that is pretty limiting for me.
I’m really looking forward to your next tutorial