Hiveby PixelGrade

Header Area

The header area of Hive is comprised of several areas: the title and tagline, the main navigation menu, and the side toolbar.

Site Title and Tagline

To change your site title and tagline, go to Appearance → Customize→ Site Identity and set them both to your liking.

Custom Logo

Hive supports the Site Logo feature. Go to Appearance → Customize → Site Identity and upload your image file. We recommend a graphic around 300px high to avoid over-stretching the header area and losing valuable screen space. The width is only limited by the general site width, so you can go with a very wide logo if you choose.

Menu

After you have created your menu, assign it to the Primary Menu location either from the same page — the Menu Settings section below your menu items — or by going to the Appearance → Customize → Menu tab and selecting your main menu from the dropdown list called Primary Menu.

The header menu supports sub-menus, allowing you to better categorize your navigation links.

Social Icons

In the side floating toolbar, Hive features an area for showing off your social media presence with a social links menu:

  1. Create the a Custom Menu by going to Appearance → Menus (let’s call it Social Menu).
  2. Add menu items that link to your social profiles by using the “Custom Links” option (from the left side panel).
  3. Assign the new menu to the Social Menu theme location.


Hive supports the following social services: Email, RSS Feeds (links with “feed” or “rss”), Behance, Delicious, DeviantArt, Digg, Dribbble, Facebook, Flickr, FourSquare, GitHub, Google+, Instagram, LinkedIn, Pinterest, Reddit, Skype, SoundCloud, Spotify, StumbleUpon, Tumblr, Twitter, Vimeo, Vine, VKontakte, Sina Weibo, Xing, Yahoo, AngelList, Yelp, LastFM, SlideShare, and Twitch.

The Search Button

The side toolbar features an optional search button. You can hide it by going to the Appearance → Customize → Hive Options tab and checking the Hide search button in toolbar checkbox.

Post Titles Styling

hive-titles-1

With Hive, we’ve added a special feature to your titles, allowing for an extra layer of typography. This feature is available both in archives — including the homepage — and in single-post views. This feature will not modify your titles, it will only affect their visual style.

You can deactivate this feature by going to the Appearance → Customize → Hive Options tab, and checking the Disable auto-style post titles checkbox.

Titles Styling Rules

The Auto-style post titles feature uses a series of rules based on your title’s punctuation marks and letter case. At the moment these include:

  • Uppercase words and words followed by an exclamation mark are made «bold»;
  • Everything in quotes or parentheses  are made «italic»;
  • Everything between : and ? or ! is made «italic»;
  • Everything before : is made «bold»;
  • In a title with only a ? in it, everything at the left of the question mark is «bold», and everything at the right «italic».

Typography Styles

Hive offers a series of custom styles, which you can view on the style guide page of the demo.

Intro Text

Add an introductory larger-size text by wrapping a paragraph in a p tag with the “intro” CSS class:

<p class="intro">Larger text will usually be read before.</p>

Highlight Text

To highlight text, wrap it in a span tag with the “highlight” class:

An example of <span class="highlight">highlighted</span> text.

Drop caps

Add drop caps by wrapping the first letter of the first word in a span tag with the “dropcap” CSS class:

<span class="dropcap">F</span>irst letter.

Two Columns

To split the text into a two-column layout, wrap it in a p tag with the “twocolumn” CSS class:

<p class="twocolumn">Small columns of text are easier to read.</p>

Post Formats

Since we all know not all content is created equal, Hive takes full advantage of the Post Formats feature.

hive-post-formats

Hive includes the following post formats:

Standard Post

On the blog and archives, standard posts will display the title, featured image, excerpt, date, and categories.

Quote Post

If you assign a featured image to your post we will display it behind your quote; if not, a grey background will be used instead.

To add an author to the quote, wrap it in a <cite>Author Name</cite> tag and place it inside the <blockquote> using the Text editor mode.

Gallery Post

The Gallery post format features the same elements as standard posts, except that the featured image is replaced with the first gallery image found in the post content. Learn more about working with Galleries and Slideshows.

Image Post

By assigning this post format to your post, you are telling us to treat it as if it only holds a single image. If it has a featured image, we will display that, if not, we will search for the first image in your post’s content and use that.

Featured Images

featured-image-hover

Hive makes heavy use of Featured Images on your homepage, throughout the grid layout, and in single post views, enriching the visual appeal of you stories.  Your featured image is displayed below the post title, with a beautiful hover effect on the homepage and archives, using the first letter of your site’s title as the hover letter.

Smart Layout Adjustments

In single post view, if the featured image has a portrait aspect ratio — taller than it is wide — its placement will automatically switch to the right side of content. Check out a live demo example.

Widgets & Sidebars

Hive features one widget area displayed in single post view and on static pages. You can leave the sidebar empty if you are after a cleaner, bolder look for your single post view. In this case we will center your post content and make it wider, for a more content–focused reading experience.

You can also make use of the Widget Visibility feature to show the sidebar only on specific pages.

Infinite Scroll

Hive supports Infinite Scroll to load more posts on archives and the homepage as the reader scrolls down, creating a seamless transition from newer to older posts. Hive adds an entry animation to make sure the older posts come into focus in style.

Custom Colors

By default Hive has a bold black and yellow color scheme. If you would like to use your own custom color palette you will need Custom Design.

Custom Fonts

Hive uses the Playfair Display font family for headings and the Droid Serif font family as body font. If you would like to use your own custom web fonts you will need Custom Design to access a wide variety of font choices, personalizing Hive even more.