Enlightenment Documentation: General Theme Customizations

In addition to Enlightenment Framework’s powerful features, the Enlightenment Theme offers some basic visual customization options that you can apply to your website. Read further to find out how you can master the visual appearance of your website using some simple and intuitive options…

In addition to Enlightenment Framework’s powerful features, the Enlightenment Theme offers some basic visual customization options that you can apply to your website. Read further to find out how you can master the visual appearance of your website using some simple and intuitive options:

This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.

Unless otherwise specified, the options covered in this tutorial can be found in the WordPress admin under “Appearance > Theme Options > General”.

Personalize the Blog Tagline

Every blog archive displays a corresponding title and supported archives (like categories and tags) also display a description if specified. For the blog’s home page the title tagline can be personalized using the option “Blog Pages Header Text”:

Enlightenment Blog Tagline

The tagline is displayed on the blog’s front page before the list of posts:

Enlightenment Blog Title

Display Featured Images as Header Images

Featured images are not displayed by default in single posts, unless they are manually inserted in the post content. Instead, you can opt to replace the custom header image with the post’s featured images by checking the “Display post thumbnail as header image on single posts” option:

Enlightenment Featured Image Header

The page’s title will display over a darkened version of the post’s featured image:

Enlightenment Single Featured Image

Featured Images Crop Flag

By default featured images are resized maintaining scaled proportions. This results in an uneven grid where both landscape and portrait images can be displayed:

Enlightenment Masonry Grid

Checking the option “Hard crop post thumbnails” will crop post thumbnails to 4:3 dimensions, regardless of initial proportions:

Enlightenment Hard Crop Thumbnails

Afterwards featured images will be displayed with fixed proportions resulting in a more even grid:

Enlightenment Even Grid

The option alone will not affect featured images uploaded before it was activated. To make earlier images comply to the new setting you need to regenerate their thumbnails using the AJAX Thumbnail Rebuild plugin:

AJAX Thumbnail Rebuild

You only need to regenerate featured images with the handle “enlightenment-blog-thumb” and “enlightenment-teaser-thumb” as shown in the screenshot above.

Blog Featured Images Size

Featured images can be displayed as either a large, full width image or a small, floated to the left thumbnail that can be changed using the “Thumbnails Size” option:

Enlightenment Thumbnails Size

The “Small” option displays featured images as smaller thumbnails floated to the left:

Enlightenment Small Thumbnails

Customizing Post Byline

By default the post byline displays the post author, publish date, category, number of comments and an edit link for authors. You can remove any of these items from the “Entry Meta” checkboxes:

Enlightenment Entry Meta Options

If you are using Jetpack’s Portfolio custom post type, an additional option for “Project Type” will appear for this post type.

Customizing the Lightbox Script

The theme offers the option to display image links in a lightbox. This option is enabled by default and can be disabled by unchecking the “Open image links in a lightbox” checkbox and the option “Lightbox Script” allows you to choose between Colorbox, Fluidbox and ImageLightbox.js:

Enlightenment Lightbox Options

Here’s an example of an image displayed in a lightbox using the Colorbox script:

Enlightenment Image Lightbox

Customizing the Posts Navigation

The theme offers several options to navigate through archive pages. From the option “Posts Navigation Style” you can select to display the posts navigation with either Infinite Scroll, AJAX Links or the traditional static links:

Enlightenment Posts Navigation Style

Infinite scroll is the default option and automatically loads the next set of posts when the bottom of the page has been reached. The “AJAX Links” option displays a link at the end of the posts that when clicked loads the next set of posts without leaving the page:

Enlightenment AJAX Links

Static links can be configured to display as “Next/Previous” links or as numbered pagination. The labels of “Next/Previous” links can also be configured from the “Static Links Labels” option:

Enlightenment Static Links Labels

Here’s an example of static links navigation with numbered pagination:

Enlightenment Numbered Pagination

Customizing the Footer Text

By default the footer displays the copyright information with current year and website title. This text can be customized from the “Copyright Notice” option:

Enlightenment Footer Options

One the front-end the text %year% will be replaced with the current year and %sitename% with the website name specified under Settings > General:

Enlightenment Footer Text

Credit links for theme, author and WordPress can also be enabled or disabled individually.

Customizing the Page Design

The theme has 2 page designs that can be used to display content: A “Boxed Design” that displays borders around the page’s content and a “Full Screen Design” that overlays the content on a white background. The global option for the page design can be changed from “Appearance > Theme Options > Design” under the “Page Design” section:

Enlightenment Page Design

The Page Design can be changed individually for each post or page from the post editor, from the “Page Design” meta box in the right column:

Enlightenment Page Design Meta Box

Adding custom CSS Rules

Some visual customizations that are not covered by the built-in options may still be simple enough that they only require just a few lines of CSS. In this case it’s more convenient to add these rules to the “Custom CSS” option rather than creating a child theme.

The CSS Editor can be found in “Appearance > Theme Options > Design” under the “Custom CSS” section:

Enlightenment Custom CSS

Conclusion

While we have given extra care to cover what we considered to be the most useful visual customization options, we’ve surely missed on some great ones. Please let us know in the comments section what other customization features you would like to see included in this theme.

Remember to read our other tutorials that cover the documentation for Enlightenment Theme.

Leave a Reply

Your email address will not be published. Required fields are marked *