User Tools

Site Tools


ce4_typography_template

CE4 Typography Template

To customize typography in CE4, you should begin with an understanding of how typography is already defined within the framework. Equipped with this knowledge, you may override the existing properties, or inspect your pages to expand the defined typography.

Global Typography Selectors and Properties

These are the foundation typography selectors for all CE4 plugins.

/* *************************
 * BASIC TYPOGRAPHY IN CE4
 * ************************* */
 
/* Paragraphs, lists, form elements, etc. */
body,
input[type="email"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="url"], 
select, 
textarea {
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}
 
/* Headings */
h1, .h1,
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 {
	font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif;
	font-weight: bold;
	}
 
/* Blockquoted text */
blockquote {
	font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif;
	}
 
/* Code, plain text, etc. */
pre,
code,
kbd,
samp {
	font-family: 'Courier New', Courier, 'Droid Sans Mono', Roboto, monospace;
	}
 
/* Site Masthead / Identity */
.masthead h1, 
.masthead h2 {
	font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif;
	font-weight: bold;
	}
 
/* Site Navigation Menu */
p#nav a, 
#r2d2-menu ul li a, 
#r2d2-menu ul#nav li span {
    font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}

for Auto Index pages (CE4 Auto Index, CE4 Pages)

Should you like to define fonts for the Album Title and Album Description displayed on auto index pages, you may define properties as below.

/* *************************
 * Album Titles & Descriptions in the auto index
 * ************************* */
 
.album-title {
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}
 
.album-description {
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}

In CE4 Gallery, you might like to redefine grid cell numbers, metadata, or image titles and captions.

/* *************************
 * CE4 Gallery
 * ************************* */
 
/* Grid Cell Numbers */
.ce4-standard .cellnumber {
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}
 
/* Grid Metadata Display */
.ce4-standard ul.image-metadata li {
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}
 
/* Image Titles */
.highslide-heading p, /* Highslide */
.mfp-gallery .image-title, /* Magnific */
.caption-title /* Touch */
	{
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	font-weight: bold;
	}
 
/* Image Captions */
.highslide-caption p, /* Highslide */
.mfp-gallery .mfp-title, /* Magnific */
.caption /* Touch */
	{
	font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}

for CE4 Theme for WordPress

There are a lot of things you could potentially redefine for CE4 Theme for WordPress, and I won't try to tackle them all. I'll give you a few items to get started with, and you can find others by inspecting the source code on your blog pages.

/* *************************
 * CE4 Theme for WordPress
 * ************************* */
 
/* Post Titles / Headlines */
h2.post-title {
	font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif;
	font-weight: bold;
	}
 
/* Sidebar Titles */
h2.widget-title {
	font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif;
	font-weight: bold;
	}
 
/* Sidebar Text */
.widget p,
.widget ol,
.widget ul,
.widget dl,
.widget address,
.widget ins,
.widget mark {
	font-size: 1em;
	}

ce4_typography_template.txt · Last modified: 2014/08/16 06:40 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.