so i added my css class, that i have written in the custom css feature of the theme here into the row attribute.
during page render, the added class is not the top most overriding class. Is this an expected behavior??
My expectation where, that whatever i write in my custom css, and i mention into the overriding attribute should be last added css, and capable override the style.
Yes whatever i mention in the custom css box in the row attribute does get added as inline css, and workd, but i would rather not copy paste all css data everywhere, and i still do want the flexibility of choosing which style sheet to apply
Hi Rohit
Thanks for your question.
during page render, the added class is not the top most overriding class. Is this an expected behavior??
What you’re seeing isn’t related to cascading order. Your CSS rule is being overridden because of specificity. You’d need to add specificity to your rule or use !important.
If you send us a URL to the page we can assist with adding specificity.
https://css-tricks.com/specifics-on-css-specificity/
Yes,
i later on my search for issue with margin property overriding, i did found out about the “!important” property.
As this is specifically overriding factors the “!improtant” makes sense here. Everywhere i read it said to avoid “!important” so thought there might be some elegant way of doing it other than overriding using the “!improtant” attribute but there seem to be none as such.
so lets consider this issue as closed
I was asked to continue my another thread issue Thread :
property overriding here, but it has quite a different issue, and is not similar to this, so i will continue the discussion there itself.
I am adding a new details to it, to make my point there a bit more clearer, so lets please continue our discussion there itself
Thanks
Rohit
Yes,
i later on my search for issue with margin property overriding, i did found out about the “!important” property.
As this is specifically overriding factors the “!improtant” makes sense here. Everywhere i read it said to avoid “!important” so thought there might be some elegant way of doing it other than overriding using the “!improtant” attribute but there seem to be none as such.
so lets consider this issue as closed
I was asked to continue my another thread issue Thread :
property overriding Herehere, but it has quite a different issue, and is not similar to this, so i will continue the discussion there itself.
I am adding a new details to it, to make my point there a bit more clearer, so lets please continue our discussion there itself
Thanks
Rohit
I just saw the green tick, so i dont know if the reply there would be read or not, im copy pasting the reply here too
Hi,
As i mentioned there it a pretty different level of issue, which i am unable to resolve using “!important”
my css is :
.removemarginbottom { margin-bottom: 0px !important; }so
1) i applied the css to row attribute in the page builder
the resultant render is
2) i tried applying the css to the row element, specifically the tow row, as the gap is existing from the margin-bottom property
the resultant render is
3) the issue is the “margin-bottom : 30px” is not part of those element, but the element in the middle as highlighted here
My setup is :
my issue is :
it get removed on disabling the line i showed in the problem screenshot, that has the margin value
I believe this value is part of the auto generated grid data by the pagebuilder.
There needs to be an elegant way to resolve this
thanks
rohit
Sure, the more elegant solution would be to increase CSS specificity.
Hi Rohit
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Once we’ve taken a look at the source it’ll be much easier for us to advise a solution. Thanks.
This is a private message.
Thanks. I’ve added the following to Custom CSS and changed the row attribute styles. Here is an example of not using !important
/* SO's temporary styles */ .layout-full .panel-row-style.panel-row-style-full-width.remove-top-bottom { padding-top: 0; } .layout-full #page-wrapper .panel-row-style.panel-row-style-full-width.remove-top-bottom .panel-grid-cell .so-panel { margin-bottom: 0; }The above means that a row with the remove-top-bottom class added will remove top padding and also remove bottom padding of the cell within in the row. For sure, this isn’t as easy as it should be. We’re here to help wherever you need it. Take a look at Custom CSS and the row attributes and see what I’ve done.
Thanks
Hi,
Thanks, but frankly, i was aware of doing this,
for removing the “!important”, what we did here, is like, we created a an empty class in css, then mentioned that class in the attribute, then added a new definition in css that was pretty specific. In this scenario, i would put my neck out and say, that using “!important” is a more elegant way of going about it.
for the second part of removing margin, its just that i was expecting a cleaner and better way of doing it, i just expected, the css for the grid creation also to be exposed, like the row, and the element css, specific widget is exposed to “add-to”. Here finer control wont be possible say, there where the same 5 hero elements, one below the other, and i did not want to remove the margin form the 4 element, it wont be easy, as all the elements will share the defined css for overriding thereby removing the margin
Thanks
Rohit
Sure, using !important is much quicker. You know the scope of the rule being used so there isn’t a possible impact later in the project which is usually the challenge.
Attributes controls work correctly in Page Builder. In the case of Vantage there is a lot of legacy CSS. Vantage was the first theme to get Page Builder controls that later became part of the plugin. This is the main reason that we’re stuck battling specificity as we’ve discussed above.
Thanks for your feedback. We’re constantly improving the product, looking for ways to help both regular end users and our more advanced developer community. You’re quite right to point these challenges out. Vantage legacy CSS is a hurdle in this case.
Ohh,
for some reason, i believed vantage to be latest theme and not the first.
Which of the themes is the most latest and cleanest among all the offered once. i.e. which theme was authored after creation of the page builder, so that its css might not hold much legacy code?
I don’t mind switching to it, as this a personnel website, and i have all the freedom in the world :D
Thanks
Rohit
You could perhaps give North a try:
https://wordpress.org/themes/siteorigin-north
We’re working on it at the moment so there will be updates released soon to enhance it’s functionality.