Have CSS snippet override Theme Style

Help
1

Things I have tried

I have a theme that I really like, but want to make some modifications to it (via CSS styles) so that I can continue to get updates from the theme publisher.

Is the best way to do this by adding !important to the CSS style? What exactly would that look like? Here’s a copy of the snippet.

/* 3.9.1. Bullet lists */
ul {
  list-style: none;
}

li>p {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

ul li:not(.task-list-item)::before {
  content: "•";
  color: var(--accent-2);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  padding: 0;
  font-weight: bold;
  text-shadow: 0 0 0.5em var(--accent-2);
}

ul ul li:not(.task-list-item)::before {
  content: "➜"
}

ul ul ul li:not(.task-list-item)::before {
  content: "↳"
}
2

You can override CSS via matching or exceeding selector specificity or using !important. If the theme CSS uses!important, however, you need to use birth specificity and !important.

More here:

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.