Indigo theme is another advanced BlogEngine theme with lots of features, which will give your blog a better look and some optimization to your contents for the search engines. It's only $19.

Demo

Features

  • Fully Responsive on any devices
  • Customizable slideshow
  • Menu and sub-menu for pages
  • Featured image posts
  • Share post on social networks
  • Social accounts links
  • Support syntax highlighter
  • Multiple widget zones
  • Google structured data
Indigo BlogEngine Theme

Get Started

After I sent you the theme, you'll receive a zip file. First, you have to upload it to your BlogEngine, in the /Custom/Themes/ folder.

Activation

After you uploaded the theme, Go to your BlogEngine administration, in the Themes tab, you'll see indigo theme. Click on the Active button.

active indigo theme

Widgets

After you activated the theme, Go to Widgets tab and add your favorites widgets from available widgets to Widget Zones, Indigo Theme has 3 Widget Zones:

widgets configuration indigo theme

  1. Widget Zone (Slider)

    This Widget Zone is only available at the homepage and designed to accept "PostList" widget as a slideshow. So by adding "PostList" widget to this Widget Zone, you'll be able to see the slideshow on the homepage. But remember you have to config that PostList widget to show images and date.

  2. Widget Zone (Sidebar)

    This Widget Zone is only available on the homepage as a sidebar.

  3. Widget Zone (Sidebar-Post)

    This Widget Zone is available on all Posts and Pages as a sidebar.

Configuration

In order to access theme configuration (Custom Fields) go to Themes tab and click on the customize icon.

theme configuration indigo theme

Then, a small window with configuration fields will show up:

theme configuration indigo theme

List of configurations, click to learn more:

In this field, you can set how many items show at the same time on the slideshow. It should be a number between 1 and 4. Yeah, It's limited, it doesn't look good with more than 4.

As you saw, the background of the header is a color gradient. So you can add any color to the left side and to the right side. If you want a solid color, you can set the same value for both. and here is a website that you can find lots of beautiful color gradients.

On this field, you can set your Logo address. That it will show up in the header and footer of your theme. You can don't touch it and just replace your logo image on that location.

In the mobile version, you'll see the menu will become like a Hamburger icon. which when you click on it, the menu will slide down. and the icon with animation changes to X icon. like this:

responsive indigo theme

You can change the animation to something else. Thanks to the Jonathan that made this awesome collection.

responsive indigo theme

So choose any style from the top and find it from below list and copy and paste it to the "Hamburger button style" field.

  • hamburger--3dx
  • hamburger--3dx-r
  • hamburger--3dy
  • hamburger--3dy-r
  • hamburger--3dxy
  • hamburger--3dxy-r
  • hamburger--arrow
  • hamburger--arrow-r
  • hamburger--arrowalt
  • hamburger--arrowalt-r
  • hamburger--arrowturn
  • hamburger--arrowturn-r
  • hamburger--boring
  • hamburger--collapse
  • hamburger--collapse-r
  • hamburger--elastic
  • hamburger--elastic-r
  • hamburger--emphatic
  • hamburger--emphatic-r
  • hamburger--minus
  • hamburger--slider
  • hamburger--slider-r
  • hamburger--spin
  • hamburger--spin-r
  • hamburger--spring
  • hamburger--spring-r
  • hamburger--stand
  • hamburger--stand-r
  • hamburger--squeeze
  • hamburger--vortex
  • hamburger--vortex-r

You can set your Facebook, Twitter, Google, Linkedin, Instagram, Youtube, Github and Pinterest accounts links. And it will show up the footer of the theme. If you leave it empty, It will not show up.

This field is related to Google Structured Data, which in this theme every post has a JSON-LD markup that you have to provide a Publisher logo. So you can add your logo URL or you can add your profile photo URL. But remember it should be an absolute address like http://exampleblog.com/logo.png and not /logo.png