The Method to achieve the Minty style layout A Word Not In Title

Set the template and theme in the protostar template manager

  • Select template wideformat.php
  • Select theme minty.css

Logo bar

  • Create a new custom module and insert the logo image and set the module new self named position logobar
  • Set the module class suffix to pull-left
  • Create a module for the right and add module class suffix pull-right headthumbs
  • Set a new custom module to position-0 and add
    Add module class suffix logobar

Search bar

  • Set the menu module to an unlisted position as headgroup
    Add the standard nav-pills class to the menu class suffix
    Add module class suffix topnav pull-left
  • Set the search module to the same position headgroup
    Add module class suffix pull-right header-search
  • Set a new custom module to position-0 and add the shortcode
    Add module class suffix stickhead headnav
    Set Options > Prepare content to yes

Nav Bar

  • Create a new menu group in the menu manager and name it subnav
  • Set a new menu module to position-0
    Select the new menu group
    Add standard menu class suffix nav-pills
    Add module class suffix topnav subnav stick2
  • Go to the protostar template manager and click the advanced tab and add the following javascript code to the field labeled Inline Javascript

    jQuery(function($) {
      $(".stick2").sticky({ topSpacing: 38 });

Wide View Area

  • Set a new custom module to position-1
    Add module class suffix tvscreen
  • Upload a fat-ass image to your host
  • Go to the protostar template manager and go to the advanced tab
  • In the field labeled Inline CSS
    Add .tvscreen {background: url(/images/bgimages/cruiseship.jpg);}


Though the steps may seem like a lot, the process is very quick once you get used to doing it.

If modules in the same position are not ordered properly to output as displayed, simply enable sorting and drag to order correctly.