WordPress.org

Support

Support » Themes and Templates » [Resolved] Can't override parent theme's CSS

[Resolved] Can't override parent theme's CSS

  • mcfmullen
    Member

    @mcfmullen

    I have a child theme in buddypress. The parent theme annoyingly uses !important tags and I can’t override them. Is there a work around?

    Parent:

    .activity-list li.load-more {
    	margin: 15px  0 !important;
    	padding: 10px 15px !important;
    	background: #edeff4 !important;
    	text-align: center;
    	font-size: 1.2em;
    	border: 1px solid #d8dfea;
    }
    
    .activity-list li.load-more a {
    	color: #3b5998;
    }

    Child:

    li.load-more {
    	background: #fe895b url(_inc/images/more.png) repeat-x !important;
    	background-position:left top;
    }

    All I want is the background image but it won’t display because the parent is taking control! I don’t want to edit the parent’s CSS because that defeats the whole point of having a child theme!

Viewing 2 replies - 1 through 2 (of 2 total)
  • @mercime
    Participant

    @mercime

    The parent theme annoyingly uses !important tags and I can’t override them. Is there a work around?

    Use the same selector at very least to override style from parent theme – .activity-list li.load-more has more weight than li.load-more

    Therefore, use this in your child theme’s stylesheet

    .activity-list li.load-more {
    	background: #fe895b url(_inc/images/more.png) repeat-x left top !important;
    }

    mcfmullen
    Member

    @mcfmullen

    thank you for the solution. It is so annoying however a it requires me to then make more lines of CSS with more !important tags attached to them in the future but I guess i will have to do!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] Can't override parent theme's CSS’ is closed to new replies.