The Method to achieve the !Joomla styled layout
Set the template and theme in the protostar template manager
- Select template wideformat.php
- Select theme joomla-styled.css
Upper menu and search
- 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 {loadposition headgroup,raw}
Add module class suffix stickhead headnav
Set Options > Prepare content to yes
Logo bar
- Set a new custom module to position-0 and add your logo image
Add module class suffix logobar
Sub 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.