Bridger

Bridger shows the site’s header on all pages except full-width pages. The site header displays a logo, site title, description, and a widget area.

By default, Bridger will display the site owner’s Gravatar in the header. If you want to display something other than your Gravatar, you can upload a Custom Header Image in Appearance > Header, or you can remove it completely by selecting Remove Header Image.

Site Title

You can edit the site title, subtitle, and tagline via Appearance > Customize > Site Title; the subtitle setting is unique to Bridger. In this settings area, you can also disable the site title altogether.

Site Widgets

The content shown in the main sidebar area, just below the site title, is a widget area. The theme demo uses two widgets in the Main Sidebar; the Text and Custom Menu widgets. The Custom Menu widget is used to display the social icons. Learn more on how to create a menu with social icons here.


Home Setup

Bridger‘s home page can be as simple as just a background image and navigation or it could include a feature post slider, videos, latest posts, and more.

First things first, though: set up your front page.

Special posts deserve a special place. With Bridger, every post or page assigned a certain tag will be shown in the Featured Content area on the home page of your site. The featured content are can be displayed as a slider, grid, or list view.

Here is how to enable Featured Content:

  1. Go to Appearance > Customize.
  2. Open the “Featured Content” section.
  3. Set a tag name e.g., “featured.”

All posts and pages that have the tag you’ve chosen will be displayed on your home page. Bridger has a custom setting to display the featured content in either a slider, grid, or list view.

Front Page Posts Layout

If the option to show “Your latest posts” is set for your front page, you’ll see just that. Bridger has a custom setting to display the posts on this page in a unique view.

  1. Go to Appearance > Customize.
  2. Open the “Theme Options” section.
  3. Set the “Front Page Layout” option.

Widgets

Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your site. Widgets make it easy to customize the content of your sidebar(s). To set up widgets, go to Appearance > Widgets.

Main Sidebar Widget Area

The Main Sidebar widget area shows just below the site title on all pages. This widget area is meant to act as an intro, with very little content. Adding too many widgets to this area will results in the widgets being cut off from the page in some cases. This happens because the widget area is fixed to the top left of the page and does not scroll.

The theme demo uses two widgets in this widget area:

Want to know how the social icons were done? Learn how →

Overflowing widgets?

Nowell’s Main sidebar area was designed to contain a small bit of
additional content as shown in the theme demo. However, in some cases, when too many widgets are added to the sidebar area, the content can overflow it’s container, cutting off the widgets. In this case, the following CSS snippet could be added to make the sidebar area scrollable; requires the Custom Design upgrade:

@media (min-width: 992px) {
  .site-header {
    height: 100%;
    overflow-y: scroll;
  }
}

Widget Page Template

The Widgets Page Template widget area will only show on the page using the Widgets page template. Widgets will show below the page content. See the example in the theme demo.


Display Settings

Bridger: Display Settings Sometimes, you just want to be different, and Bridger can help with that. Every post or page on your site can look unique using Bridger’s built-in Display Settings. The Display Settings options box is visible when creating or editing a Post or Page.

Full Width Content

By checking the “Full-width content” option in the Display Settings meta box, the pages content will display full-width, removing the main sidebar and header area. Full-width pages are great for showcasing large videos, image galleries, or columned content.

Custom Backgrounds

By default, a site-wide custom background image or color can be set via Appearance > Customize > Colors. These settings will be used when the Background option is set to Use custom background.

With Bridger, you also have the option to set a custom background for individual posts and pages, too. This can be done by choosing the “Use featured image as background” option. As the option suggests, this requires that a featured image be set.

Custom Colors / Tonesque

Bridger: Custom Colors

Out of the box, there are three custom color options available for Bridger: green, light, and dark. For more control and unlimited color options, check out the Custom Design upgrade. But wait, there’s more…

Tonesque Custom Colors

Bridger has a custom color feature built-in, called Tonesque. Tonesque lets us grab the average color of an image and use it as an instrument to automatically change the site’s colors. This feature can be enabled for each post or page that has the “Use featured image as color” option checked. As the option suggests, the page must have a Featured Image set.

Background Blur

Enabling the background blur will make any page stand out and give it a look of its own. Often, adding an image blur can make the text on top of your background image easier to read. If you have the Custom Design upgrade, you can adjust the blur amount or even apply other image filters; CSS knowledge is required.


Social Icons

Bridger allows you display links to your various social media profiles, like Twitter and Facebook, as icons in custom menus. These social icons can be display one of two ways, each outlined below.

Option #1: Social Links Menu

bridger-social-icons-menuIf you’re looking to display a menu of just social icon links, as shown in the main sidebar of the theme demo, this first option is for you.

To automatically apply icons to your links, simply create a new custom menu and give it a name of “Social Links”; this specific name is important and must match exactly. Next, add each of your social links to this menu. Each menu item should be added as a custom link.

Once your menu is created and social links added, Bridger will automatically apply an icon if it’s available. See a list of available icons below.

Option #2: Menu Item Classes

Bridger: Social Icons ClassThe second option requires a special CSS class name added to the menu item. CSS classes are an advanced menu property that allow you to apply a CSS class to individual menu items. First, be sure to enable the CSS class capability for your menu items.

Each menu item should be added as a custom link. By default, the title of the link will be displayed; however, by adding an “icon” CSS class name to the item, the link will display as an icon for that site (if available).

Available Icons

Below is a list of sites with bundled icons you can include in your menus.

  • Codepen
  • Dribbble
  • Facebook
  • Feed (urls with /feed/)
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Displaying Social Icons

After creating a menu with social icons, you’ll want to display them somehow. There are two ways to do this:

  1. Assign the menu to the Primary Menu location.
  2. Add a Custom Menu widget to a widget area.

The theme uses the second approach, adding a Custom Menu widget to the Main Sidebar area.


CSS Classes

Bridger includes a few class names that can be applied to various elements in your content to change the appearance or display of that content. Applying CSS class names is an advanced topic and requires some basic CSS knowledge, however, we thought it’d be beneficial to mention them here for those who are interested.

Learn CSS

Advanced Element Styles

The theme demo showcases some advanced styles for buttons, pull quotes, and drop caps. The examples in the demo also have a description of the class names.

View Advanced Styles

Content Columns

In somecases, it’s nice to split your content into columns. By wrapping content in a an element, like a <div>, you can apply a column class to the element. We’ve provided class names (listed below) for up to four columns in Bridger.

.one-half, .one-third, .one-fourth, .two-thirds, .two-fourths, .three-fourths

View Columns Example

This entry was posted in . Bookmark the permalink.