Ignite CSS Snippets

To customize Ignite with the CSS snippets below, please refer to our Custom CSS tutorial. If you can't find what you're looking for, stop by the Ignite support forum to ask for help.

Categories

Site Header - Change Background Color

.site-header {
  background: #43b3c4;
}

Changes the background color of the site header.

Primary Menu Items - Capitalize (Not Uppercase)

.menu-primary-items a,
.menu-unset a {
  text-transform: capitalize;
  letter-spacing: 0;
}

Converts primary menu items to normal capitalization from all uppercase. Also, removes additional spacing between letters added for uppercase styling.

Social Icons - Increase Size

.social-media-icons i {
  font-size: 24px;
}

Increases the size of the social media icons. Increase the "24px" value to further increase the size of the social icons.

Social Icons - Change Color

.social-media-icons i {
  color: #43b3c4;
}

Changes the color of the social media icons. Change the hexadecimal color code (#43b3c4) to change to a different color.

Site Title - Increase Font Size

.site-title {
  font-size: 32px;
}

Increases the font size of the site title. Increase the "32px" value to further increase the size of the site title.

Site Title - Change Color

.site-title a,
.site-title a:link,
.site-title a:visited {
  color: #43b3c4;
}

Changes the color of the site title. Change the hexadecimal color code (#43b3c4) to switch to a different color.

Tagline - Change Color

#site-description {
  color: #43b3c4;
}

Changes the color of the tagline. Change the hexadecimal color code (#43b3c4) to switch to a different color.

Body

Site text - Turn off Hyphenation

body {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
}

Ignite hyphenates words that don't fit on one line (in some browsers only). This turns off the hyphenation.

Posts, Pages, & Widgets - Make Background Semi-Transparent

.entry, .excerpt, .widget {
  background: rgba(255,255,255,0.5);
}

Makes the background of Posts, Pages, and Widgets partially transparent. Change the "255" values to change the color of the background. The "0.5" value indicates 50% opacity, but can be changed anywhere from 0-1 to change the level of opacity of the background.

Posts/Pages

Featured Image - Hide on Posts/Pages

.entry .featured-image {
  display: none;
}
.entry.has-post-thumbnail {
  padding-top: 36px;
}

Hides Featured Images on Posts and Pages. Also, adds padding to the top of the Posts/Pages removed when Featured Images removed.

Post Title - Increase Font Size

.excerpt-title,
.entry-title {
  font-size: 51px;
}

Increases the font size of Post titles on the Blog and on individual Post pages. Increase the "51px" value to further increase the size of the titles.

Post Body - Increase Font Size

.entry-content,
.excerpt-content {
  font-size: 18px;
}

Increases the font size of the Post and Page content. Increase the "18px" value to further increase the size of the titles.

Post Tags & Categories - Capitalize (Not Uppercase)

.entry-tags a,
.entry-categories a {
  text-transform: capitalize;
  letter-spacing: 0;
}

Converts Post tags and categories text to normal capitalization from all uppercase. Also, removes additional spacing between letters added for uppercase styling.

Post - Increase width of text on mobile devices

@media all and (max-width: 800px) {
  .entry,
  .excerpt {
    padding: 1.5em 4% 2.25em;
  }
  .featured-image {
    left: -4.25%;
    width: 108.5%
  }
}

Increases the width of the text on Posts, so it is closer to the edges of the screen (at mobile widths only).

Blog/Archives

Sticky Post - Remove Outline

.excerpt.sticky {
  outline: none;
}

Removes the orange outline around "sticky" blog posts (on the blog).

Post Tags - Hide

.excerpt .entry-tags {
  display: none;
}

Hides the Post tags on the blog, and leaves them visible on the individual Post pages.

Comments

Comment Count - Remove

.comments-number h3 {
  display: none;
}

Removes the "Be first to comment" phrase (or "# Comments") above the comments on Posts and Pages.

Sidebar - Widen

@media all and (min-width: 900px) {

  #sidebar-primary-container {
    width: 30%;
  }
  #main {
    width: 51.5%;
  }
}

Makes the primary sidebar wider at desktop/laptop screen widths.

Sidebar Widgets - Reduce Padding

@media all and (min-width: 800px) {

  #sidebar-primary .widget {
    padding-left: 8%;
    padding-right: 8%;
  }
}

Reduces the padding on the left and right sides of the primary sidebar widgets.

Widgets - Remove Top Border

.widget {
 border-top: none;
}

Removes the orange border from the top of the widgets.

Site Title & Tagline - Remove

.site-footer {
  padding-top: 0;
}
.site-footer h3,
.site-footer span {
  display: none;
}
.design-credit {
  margin-top: 0;
}
.design-credit span {
  display: block;
}

Removes the site title and tagline from the footer.

Footer - Remove

.site-footer {
  display: none;
}

Completely removes the footer.

To customize Ignite with the CSS snippets above, please refer to our Custom CSS tutorial.

If you can't find what you're looking for, stop by the Ignite support forum to ask for help.

If you need help with a more detailed customization, we recommend finding a reliable WordPress developer with Codeable.

Additional Resources

  • Ignite WordPress Theme

    Download a copy of the latest version of Ignite.

  • Support forum

    Ask questions and find existing solutions in the support forum.

  • Changelog

    Review recent and past updates to Ignite.

  • Ignite on Github

    Review Ignite's commit history and project files on Github.

  • WordPress Resources

    Check our recommended resources to find great plugins and solutions for your site.

  • Codeable.io

    We can help you with minor changes on your site, but if you need a highly customized version of Ignite, we recommend finding help through Codeable.