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

  • Resolved mcfmullen

    (@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

    (@mercime)

    Volunteer Moderator

    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;
    }

    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 ‘Can't override parent theme's CSS’ is closed to new replies.