• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

CSS Overriding Issue

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS Overriding Issue

This topic is: not resolved

Tagged: css, override, property, selector

  • This topic has 6 replies, 2 voices, and was last updated 8 years, 5 months ago by Porter.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 4, 2014 at 11:14 pm #126796
    Porter
    Participant

    I 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


    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 5, 2014 at 7:22 am #126808
    bandj
    Member

    Because 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 #126809
    bandj
    Member

    btw, it looks really nice. I like it.

    October 5, 2014 at 8:11 am #126810
    bandj
    Member

    looks like that plugin has a custom css section also

    October 5, 2014 at 8:52 am #126820
    Porter
    Participant

    Unfortunately, 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).


    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 5, 2014 at 8:56 am #126825
    bandj
    Member

    I 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 #126840
    Porter
    Participant

    I 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 🙂


    Buy me a beer? | Try DigitalOcean VPS Hosting

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble