theres this line of code:
Where does the shadow att and the other css come from? I only know the box-shadow attribute. I know i simply can delete the att, but i am interested in where it comes from. This is for the other css too, i only see bootstrap.css files in firebug, but to search and edit them is not really best practise i think and so i am stuck because i want the the table to be a bit more compact/costumized.
The shadow:
Thanks in advance.
I can't tell you exactly what file this comes from, since the Purity iii demo seems to compress and combine the CSS files, but the shadow class has the following CSS:
@media (min-width: 768px) {
.pricing-table .col.shadow {
box-shadow: 0 0 0 5px rgba(0,0,0,0.2);
}
}
It's not recommended to edit the existing CSS files (Template files, Bootstrap, Joomla CSS etc.). As you might know, CSS stands for Cascading Style Sheet, so you can simply override the styles using your own custom CSS file.
In this file you can simply place any class/ID's that you want to change in your template.
To change how the .shadow class looks, add something like this to your custom CSS file:
@media (min-width: 768px) {
.pricing-table .col.shadow {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
}
The result looks like this:
I am not sure if you understand the difference, but the shadow you see there, is not a css property like box-shadow, text-align etc, but a class name for the class attribute of that html element.
The only connection it has with the css box-shadow property, is that it uses this name, so to create an easily identified/memorized predefined css rule-set, to be used to add shadow on multiple elements.
If you want to disable, you will have to create a css override, with your own rule-set, that will take precedence over the existing one.
I haven't check johanpw's answer if it works, but I trust him it will. So follow his suggestions in order to create your custom.css.
