Ippoby Themes Kingdom

sup-screen

Theme Options

To access Ippo‘s theme settings, go to Customize → Theme Options.

Header Settings

  • Hide header menu behind a button will place the standard horizontal navigation menu behind a « Menu » button on large screens. This is also the default behavior for small screens.
  • Sticky header will « stick » the navigation menu to the top of the screen, so it’s readily available as your readers scroll down.
  • Text for blog header displays a bold headline on the blog page, under the slider (if enabled) or on the top of the page (if no slider). This field supports HTML, so you can add links or other text formatting with HTML.

Featured Content Slider

Choose how your Featured Content slider will appear: either at the full width of the screen, or in a carousel with next/previous posts on either side. You can also choose to align the slider text to the left, center, or right.

Setting up the Featured Content Slider

To set up the Featured Content slider:

  1. Create some posts with optional Featured Images and give them all the same Tag (hint: try « featured » or « slider » so it’s memorable).
  2. Go to Customize Featured Content, and enter the tag you selected in step 1.
  3. Press Save & Publish, and your slider will appear on the blog!

Layout Settings

Posts are displayed in three or four columns on the blog and archives. If there are active widgets in the Sidebar, posts will be displayed in two or three columns instead, with the sidebar taking up the last column.

To add a list of post categories to the top of your blog for quick searching and filtering, select « Enable posts category filter on blog. »

Checking « Display author box under single post content » will display more information about the author underneath single posts.

Portfolio Settings

These are the same as Layout settings, but for Portfolio projects. Read more about creating a Portfolio here.

As with Posts, you can choose to display your Projects in three or four columns. You can also choose to display available Portfolio Types at the top of the Portfolio archive, or display the Project’s author at the bottom of single projects.

Portfolio Page Template

Ippo includes a special template for Portfolio projects. To set this up:

  1. Go to Pages → Add New and create a new page.
  2. Select the Portfolio page template under Page Options.
  3. Press Publish when you are done.

 Sticky Posts

stiky

Example of a sticky post

Sticky posts are displayed larger than other posts, and are always displayed at the top of the blog, regardless of their chronological order.

Custom Menus

Custom Menus can be created under Appearance → Menus. The Primary menu is located in the header area. This menu can contain items including custom links, pages, categories, tags, or posts.

Widgets

Ippo has a right-hand sidebar, a full-width widget area just above the footer, and three widget areas arranged in columns in the footer. Widgets are configured under Customize → Widgets.

Quote Post Format

An example of quote post format

To create a quote:

  1. Add a new Post and choose Quote from the Post Format module.
  2. Select your desired text in the Visual Editor and click the Blockquote button.
  3. To cite the quote author, write their name below the quote text, then switch to the HTML Editor and add <cite></cite> around the author’s name.

Link Post Format

An example of link post format

To create a link post:

  1. Add a new Post and select the Link post format under Post Format.
  2. After adding your link text, link it to the desired URL.

Extra Styles

Two-Column Content

An example of two-column content.

You can display content in two columns by wrapping a div element with class « twocolumn », and then a paragraph element with the class « half-width » around your content in the HTML Editor:

<div class="twocolumn">
<p class="half-width">Your text goes here.</p>
<p class="half-width">Your text goes here.</p>
</div>

Dropcaps

An example of a drop cap.

Dropcaps allow you to stylize the first letter in a post or page. To do so, switch to the HTML Editor and wrap the first letter in a span with “dropcap” as the class.

<span class="dropcap">T</span>he first letter of this paragraph will have a dropcap.

Blockquotes

Blockquotes are usually used to display important sentences, or parts of longer sentence. In Visual Editor select desired text, and click on Blockquote button. Update changes when done.
To cite the quote author, write their name below the quote text. Switch to the Text Editor and add <cite></cite> around the author’s name.

q-center

An example of a blockquote with cite reference.

You can also change Blockquote alignment, making them outstand the content.

An example of a right-aligned blockquote.

<blockquote class="pull-right">This is a right-aligned blockquote.</blockquote>

An example of a left-aligned blockquote.

<blockquote class="pull-left">This is a right-aligned blockquote.</blockquote>

Highlighted Text

An example of a emphasis text

To highlight text, switch to the HTML Editor and wrap it with the “emphasis” class:

<p class="emphasis">Your highlighted text goes here.</p>

You can see a complete style guide in action here.