been trying a lot of things, also searching but found no solution. Basically I have set a background image for a row element. I can see following css for the row:
But it just does not work. Looking in the inspector it’s not overriding the default css on the 7-layout-css so it appears that it’s not picking up my custom css at all. I’ve also tried popping it into the Dynamik Custom CSS Editor modal. I cannot find any dialog on BB to insert custom css…
Where do I need to insert this CSS or what do I need to change it to?
This time consuming hurdle has hit me right at the start of using Beaver, which is slightly frustrating. Hope the rest of the work-flow will be smoother.
UPDATE: Ok I see that those options (none/contain/cover) become available when I select to have a fixed/scroll photo as a background image but I really need these rows to have parallax background images. Why cant those options be available for the Parallax setting too?
The reason why your custom CSS is not working is because it doesn’t have enough specificity. If you placed header-background as a class in your row, this CSS snippet should work.
thanks for the quick reply. That makes sense and works now that I have resolved the issue of my custom css not being applied at all (first time using Dynamik). So whatever I put in, even a test using !important, didn’t work. Hence the confusion. Ok done.
Onto my next problem. I want to set the width of an image using the photo module. However because there is an !important being used by the parent stylesheet, there’s no way I can override it.
.fl-photo-content img {
display: inline;
height: auto !important;
max-width: 100%;
width: auto !important;
}
I’ve given the module a class named “meerglanz-small” and put following css into my custom css, but it gets crossed out and overridden by your !important declaration.
adding custom image sizes to the dropwn is sure cool but are you saying I cannot generate a CSS rule for it without having to use !important to override it? I might only add this particular image at 150px width once so it seems a bit OTT adding a custom size for it!
If that’s the case, try declaring your custom CSS as important. That’s the only way you can override another CSS declared as one. Yours has a higher specificity so it should work. Try this…
Sorry, was a bit hasty with the reply. Yep, that’s the way to go. That’s the only way you can override another property declared as important. You could go always with my suggestion, adding a custom image size.
ok thanks will do but surely the BB itself shouldn’t be using !important in the first place but more specific CSS selectors to avoid this sort of situation further down the line?
I agree with you on that regard. But we are trying to make the BB plugin work with any theme. We won’t be able to know how much weight our CSS needs so it can be compatible with the growing number of themes.
