CSS code issue

• 

  djdubuque2014 · Member · Jul 27, 2021 at 4:21 am

  • Copy link
  • Add topic to favorites

  Why would this code only change the description color but not the header (title)?

  .site-title a {
  color: #fff !important;
  }
  .site-description {
  color: #fff !important;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  kokkieh · Staff · Jul 27, 2021 at 9:03 am

  • Copy link

  Hi there,

  It changes both the site title and tagline for me.

  However, that’s not the best code to use for this – any time you need to use !important to get your CSS to work, it usually means your selector is not specific enough. In general, !important should be avoided, as it can end up overriding other CSS you try to add later, or existing CSS you didn’t intend to override.

  For this change, this code is better:

  .site-branding .site-title a {
    color: #fff;
  }
  .site-description {
    color: #fff;
  }

  And if you’re going to make both the same color you can even shorten that to:

  .site-branding .site-title a, .site-description {
    color: #fff;
  }

  That said, your site is not hosted on WordPress.com, but using the open source version of WordPress, made by the community on WordPress.org.

  For more CSS help with your theme, please post in the forums for that theme directly:

  https://wordpress.org/support/theme/twentysixteen/