WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Can't override parent theme's CSS (3 posts)

  1. mcfmullen
    Member
    Posted 2 years ago #

    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!

  2. @mercime
    Volunteer Moderator
    Posted 2 years ago #

    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;
    }
  3. mcfmullen
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic