Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS Overriding Issue
- This topic has 6 replies, 2 voices, and was last updated 10 years, 6 months ago by
Porter.
-
AuthorPosts
-
October 4, 2014 at 11:14 pm #126796
Porter
ParticipantI just up a bit more on CSS overriding, and it seems I need to be more specific with my selectors in order to achieve what I want, without using !important (I try to avoid ever using this).
Here's what I'm trying to chage:
.su-heading-style-default .su-heading-inner { padding: 0em; border-top: 4px solid #eee; border-bottom: 4px solid #eee; }
I set the padding to 0, but the default of 1em 0.5em; is staying instead. I know I can wrap that entire section in yet another class, adding yet another selector, such as .testing, but I'm wondering if in this situation there are any simple additions that I could use to override this? Are there any simple selectors, or properties that help override most things?
This code is from the spacing above and below the header text, on this page - anightinburlington.com/bars/bar-test
October 5, 2014 at 7:22 am #126808bandj
MemberBecause this style is coming from a plugin you can do a search on ways to override a plugin's css.
I found this: http://wordpress.stackexchange.com/questions/101037/how-do-i-cleanly-override-a-plugins-css-with-a-child-theme
October 5, 2014 at 7:23 am #126809bandj
Memberbtw, it looks really nice. I like it.
October 5, 2014 at 8:11 am #126810bandj
Memberlooks like that plugin has a custom css section also
October 5, 2014 at 8:52 am #126820Porter
ParticipantUnfortunately, I need most of the css in that file, so I can't simply dequeue the script, as that isn't optimal. As I said, I can wrap it in a div, add a random class, and have yet another selector, which fixes the issue, it's just not as clean as elegant as I'd like. I'm essentially just looking for a super simple "ah ha!" fix. For instance, if it were text, I could simply target that with the "a" selector, but it's spacing unfortunately, so that isn't more specific.
It's not so much that I have a problem that needs fixing, it's that I want a more elegant solution, and want to know any "trade secrets" of css that might fix this seemingly simple situation. I'm looking for common selectors that aren't used, but apply, as adding ANY additional selector that applies to this css would override the plugins. Example:
What I have:
.su-heading-style-default .su-heading-inner { padding: 0em; border-top: 4px solid #eee; border-bottom: 4px solid #eee; }
What I need:
.something .su-heading-style-default .su-heading-inner { padding: 0em; border-top: 4px solid #eee; border-bottom: 4px solid #eee; }
Adding .something overrides it, as there's an additional selector, making it more specific - I just want to know if such a selector exists (common ones, like bold, a, links, etc).
October 5, 2014 at 8:56 am #126825bandj
MemberI understand what you're looking for. I don't know one. In the past I've just edited the plugin's css
October 5, 2014 at 11:56 am #126840Porter
ParticipantI ended up needing to wrap the entire thing in a div tag anyway, so I went ahead and fixed it like that. That being said, I'm still curious if anyone knows any tricks for the future.
Also, thanks for the compliment on the design - it's coming along, and looking a lot better now that I'm applying some CSS to it. I'm not too skilled in the way of design, so it's nice to hear I'm making some progress on that front 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.