Can't override parent theme's CSS

  • Resolved mcfmullen

    (@mcfmullen)


    14 years, 2 months 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!

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

    (@mercime)

    14 years, 2 months 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;
}

    Thread Starter mcfmullen

    (@mcfmullen)

    14 years, 2 months 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!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Can't override parent theme's CSS’ is closed to new replies.