CSS Snippets

3 min read Updated

These CSS snippets change parts of the Origami header, menu, posts and layout that the settings do not reach. Add a snippet in one of these places:

  • AppearanceCustom CSS, if you use SiteOrigin CSS.
  • AppearanceCustomizeAdditional CSS.
  • The style.css file of a child theme. Origami loads only the stylesheet of the active theme, so the child theme must load the Origami style.css before its own.

Before you add a snippet, check that a setting does not already do the job. Fonts and the colors of the page container, menu and footer are in Theme Design, and the link color is in AppearanceCustomizeColors. Where a snippet sets a color or a size, the value shown is the Origami default unless the text says otherwise. Change it as you need.

Adjust the Site Title and Tagline Colors

The site title and tagline show when your site has no logo or header image.

#logo h1 {
	color: #555;
}
#logo h3 {
	color: #666;
}

Adjust the Site Title and Tagline Size on Mobile

The default sizes are 52px for the site title and 13px for the tagline. This snippet makes them smaller on screens up to 480px wide. Origami uses the same width for its other mobile changes, such as moving the header search below the logo.

@media (max-width: 480px) {
	#logo h1 {
		font-size: 36px;
	}
	#logo h3 {
		font-size: 12px;
	}
}

Adjust the Menu and Drop-Down Font Sizes

The first rule sets the top level menu links and the second sets the drop-down links. To change the menu link, border and background colors, use the Menu section of Theme Design.

#menu ul li a {
	font-size: 1em;
}
#menu ul li ul li a {
	font-size: 0.9em;
}

Posts

Adjust the Post Details Colors

The post details line below each post title shows the date, author, comment count and categories. The first rule sets the text and the second sets the links and the comment count.

.post .post-info {
	color: #A6A6A6;
}
.post .post-info strong,
.post .post-info a {
	color: #808080;
}

Hide the Post Details Line

To hide only the author or the comment count, turn off Display Post Author or Display Comment Count in Theme Settings. This snippet hides the whole line, including the date and categories.

.post .post-info {
	display: none;
}

Adjust the Content Font Color and Size

.post .content {
	color: #606060;
	font-size: 13px;
}

Left Align the Titles

Origami centers post titles, page titles, archive titles and the post details line. This snippet aligns them to the left.

h1.entry-title,
h1.archive-title,
.post .post-info {
	text-align: left;
}

This snippet hides the image captions in the gallery slider.

.flexslider .flex-caption {
	display: none;
}

Layout

Adjust the Site Width

The default maximum width of the site is 1024px. Change 1200px to the width you want. Featured images stay at their size of 904px wide, so they do not fill a wider page.

.container {
	max-width: 1200px;
}

Remove the Page Container Shadow and Border

This snippet removes the light shadow and the border around the box that holds the header, content and footer widgets. To change only the border color, use Border Color in the Page Container section of Theme Design.

#page-container {
	border: 0;
	box-shadow: none;
}