Knowledgebase

Joomlabamboo template and extension documentation

Compatible with Joomla 2.5 /Joomla 3+ .

Installing from a fresh start

Profilr is implemented in differently to our other Joomla templates and so if you are using this template in an existing installation or a fresh installation of Joomla then please read over the folliwing steps for information on how to get started using this theme.

Install the template and other required extensions

  • Install the Profilr Joomla template. If unfamiliar with how to install a Joomla template please read the How to install a Joomla template documentation.
  • Install Zen Compiler Plugin and ensure it is published- Used to compile less to css via the template admin.
  • Install JB Type (optional) - Used to display additional typographic styling in the template. Please note that this plugin is not required to display icons in the collapsed sidebar.
  • Install Zentools (optional) - required if you want to show grid based galleries in a panel area.
  • SP Quick contact (optional) - this is the contact form used on the demo of this theme.

Add a background image

In the appearance panel scroll to the background image option and select an image to use as the background image.

Add profile details

Please note that if the address field is empty then you will not be able to use the map content type.

Create your first panel

After following the steps above you will have the very basics of this template setup. The next step is to start adding content for your panels. In this example we are going to create a map panel for the first panel in the profile.

  • 1. The first step is to ensure that you have entered an address in the profile area.
  • 2. Under the panel1 settings set the Enable Panel 1 option to yes.
  • 3. Set the panel type to Map
  • 4. Set the collapse sidebar option depending on your needs. Eg set collapse sidebar to yes if you wish to collapse the sidebar on this panel.
  • 5. Display background image does not apply to the map type of content.
  • 6. Set the panel title.
  • 7. Assign an appropriate icon for this panel when sidebar is collapsed.
  • 8. Click save

After following the steps above you will now have a full screen and height google map as the content for the first panel.

Add more panel content

The steps above should give you a good idea of how to go about adding content to this template. To add more content and panels simply follow the steps above adding the required information for that panel and that content type.

Add content overlays

It is also possible to place html blocks on top of each panel type by using the extra content functionality for the specific panel you want to apply this effect to.

To do this on the map panel we have just created go to the panel 1 panel in the template admin and follow these steps.

  • 1. Enable the extra content option
  • 2. Enter the custom html required in the textbox. By default textboxes in Joomla are somewhat small however in good browsers it is possible to resize them. If your browser does not allow this try using Chrome or Safari which provide this functionality. You can enter any html content in this area.
  • 3. Apply a style to use.
  • 4. Apply the position you would like to display the overlay in.
  • 5. Click save

Once you have followed these steps your custom content will now be visible in the panel you specified.

A close button will automatically appear in the top right hand corner of the panel which allows the user to close the panel. In order to restore this content the user needs to refresh the page.

Adding custom css to the Profilr template

As with most Joomlabamboo templates you can add your own custom css to the template by adding a file called custom.css to the template css folder.

When a css file is added here, the template loads this file after all other template assets have been loaded and so any rule added here will take precedence over the styling applied to the core template.

Available module positions

Frontpage Overview

 

Description

Frontpage setup for Profilr

Profilr is a dedicated one page Joomla template and is implemented differently to most of our other Joomla templates. It is closely related to our Profile template released in August 2013.

Most of the functionality in the template is controlled via the template itself. In order to add content to your site using the Profilr template it is controlled in the template administrator.

How to locate the template settings.

Like most Joomla templates the settings for the Profilr template can be found by navigating in your Joomla Administrator to extensions > template manager and then by clicking on the template name.

Understanding the Profilr content types

Profilr is a series of 7 panels that overlay each other with a prominent collapsible sidebar. The content for each panel is determined via the template settings and you can choose from the following content types:

  • Map - displays a google map based on the address added in the profile panel.
  • Slideshow - displays images from a folder in your Joomla site in a slideshow layout.
  • Photoset - displays images from a folder in a flexible grid layout.
  • Gallery - displays images from a folder in a full width layout.
  • Video - displays a video from either Youtube or Vimeo in the background of the site.
  • Module - displays a module position in the panel area

Controlling the sidebar

The sidebar in the Profilr template responds dynamically / responsively according to your viewers browser width and also settings based on the template.

The global collapse width.

The global collapse width is defined in the appearance panel in the template settings.

This setting determines the browser width in pixels that the sidebar will go from the wide layout to the collapsed layout for all panels.

Collapsing the sidebar on a panel by panel basis

Some types of content display better if the sidebar is always collapsed.

In the case of using a fullscreen video, slideshow or gallery you may want to collapse the sidebar even on desktop and wider screens.

In order to do this go to the panel you want to collapse the sidebar on and then set the collapse sidebar setting to be enabled as per the screenshot below.

When the collapse sidebar is enabled on a specific panel it will override the global collapse width and always display the sidebar for that panel in it's collapsed state.

Menu titles / Panel trigger titles

The menu items that trigger the display of specific panels is determined by the panel name set in the panel settings.

The name for the panel is automatically placed in it's corresponding position in the sidebar menu.

Collapsed sidebar menu items

In it's collapsed state the sidebar displays menu titles as simple icons. Each icon can be set for the specific menu item via the panel settings for the respective panel. There are 75+ font icons to choose from.

Since the icons displayed are font-icons it makes it super easy to control the appearance. In a custom.css file you can add the css below to change the appearance of the font icons.

 .collapse .nav-icon {
	font-size:30px;
 }
 

Appearance Settings

The template's appearance settings control the general appearance of the template. In this panel you can control the width of the sidebar, the global collapse width, link color, background image and color as well as the font settings.

Sidebar Width

This setting controls the width of the sidebar in it's non-collapsed state. This settings needs to be set as a specific px width. In it's collapsed state the sidebar reduces to 58px wide which works well across all mobile devices.

Sidebar collapse width

This is the global collapse width for the sidebar. This value needs to be a specific px width (with or without the 'px'). This setting can be overridden by the collapse sidebar setting found in each panel.

Developer note: Due to the fact that much of the functionality is specified via javascript the collapse width is attached to the body class and then extracted via the js/template.js file.

Link Color

This is the global colour used in the highlights across the template. This colour refers to the colour of all links as well as the background colour of the sidebar active menu items, the background for the navigation in the slideshow layout type and the background of html overlays that use the primary layout.

Background image

This image is used as the home background image (if the home panel type is set to image - see below). This image is also used across any other panel that you specify to display the background image for.

Background color

This color is used to determine the default colour of the background across all panels. This colour will mainly appear while video panel;s are loading and beneath the gallery layouts that do not cover the entire width of the page - eg photosets.

Base font size

This is base font size used to determine the font size of all body copy and headings in the template. This setting can be specified as either a px or a % value. px values can be set with or without the px suffix.

Body font weight

This is the font weight assigned to all body, p, li,a etc tags on the site.

Heading font weight

This is the font weight assigned to all heading tags on the site.

Sidebar font weight

This is the font weight assigned to links on the sidebar on the site.

Profile settings

The profile panel controls the sidebar avatar image, style, site title, tagline and address.

Profile Image

This setting determines the source of the images used for the profile. Selecting image means that the image uploaded via the media element in the setting below is used as the profile image in the sidebar. If this setting is set to use your facebook avatar then you need to set your facebook id in the facebook id parameter.

If you have set your facebook ID correctly the image should show below the area where you specified the id. Your facebook ID is located in the url on your facebook profile page. Please note that the facebook image will only display once the input is no longer active so you need to click outside of the input area once you have added your profile id.

Finding your facebook id

  • Navigate to the page of the facebook profile you want to use the avatar from.
  • In the browser address bar select the last part of the url eg int he following url https://www.facebook.com/anthony.olsen.988 the facebook id is anthony.olsen.988
  • Paste the id in the facebook ID in the parameter in the template.
  • Wait while the template downloads the image and displays it in the admin.
  • Click save

If you do not wish to display a profile image on your site then you can set this setting to none.

Site Title

The site title appears under the profile image in an h1 tag.

Tagline

The tagline appears in an h2 tag underneath the site title .

Address

The address appears in an address tag underneath the tagline in the sidebar. The information specified in this parameter is used as the location for the map used on your profile. The correct format for the address is Street number Street, Suburb, State, Country, Zip / Postcode.

Home panel settings

The home panel settings determine the display of the site when your site first loads.

Panel type

There are two types of panels allowed for the home panel.

Fullscreen Video

The fullscreen video option is behaves slightly differently to the video option available across the other panels. The fullscreen video option is a full integrated "ambient" video that serves as a full screen background video. Videos added to the home panel do not have any controls available and behave in much the same way as the background image except for the fact that it is a video.

As with other video panels the user simply needs to specify either the id or url of a Youtube or Vimeo video and the script will automatically convert the video to a fullscreen background video.

If this setting is set to video then this video will be used across all panels as the global background to panels. For instance if you are using a panel type that displays part of the page backgroujnd eg photoset or module type then the video will be shown through underneath that panels content.

Image

If an image is set as the background for the home panel then the image set in the appearance panel (see above) will be used on the home panel as well as any other panel which is set to display the background image.

Start sidebar collapsed

When enabled the sidebar will automatically be collapsed on page load.

Enable extra content

When enabled the user is able to specify an html overlay that sits above either the image or background video used on this panel.

Html

The actual content used for the overlay. You can use any valid html in this text area.

Style

The class applied to the html panel. Options primary, dark, light, none.

This setting attaches a class to the html overlay which can be directly controlled in a custom css file. The less for this feature can be found in less/panels.less

The less applied to the primary overlay looks liek this.

 .primary {
	background: @primary;
	color:#fff;
	border:4px solid rgba(0,0,0,0.1);
	background-clip:padding-box;    
	
	h1,h2,h4,h4,h5,h6,p.blockquote {
		color:#fff;
		margin:0
	}
 }
 

position

The position parameter gives you the option of positioning the html overlay at various positions in the panel. The positioning is also applied as a class which gets attached to the panel html. Options include sidebar offset, top center, top right, bottom right, bottom center.

Panel1 to Panel6 settings

The settings available for panel 1 to panel 6 are identical. The template displays the appropriate settings for the specified panel type according to panel type set across each panel.

 

Enable panel

Used to determine whether the panel is displayed or not.

Panel type

Used to determine the type of content used for each panel. Panel types include Map, Slideshow, Gallery, photoset, Video or module. See information below regarding settings specific to each panel type.

Collapse Sidebar

Used to determine whether the sidebar is always collapsed for that specific panel. Setting this option to no means that it willbe displayed at the width assigned in the appearance panel when the browser width is wider than the global collapse width which is also specified in the appearance panel.

Display bg image

This setting is only relevant for panels that are not full height or full width. The background image will not show on panels that are using a slideshow, gallery or map layout. If using the photoset layout the bg image will show through in between the photoset grid. If using the module type of panel then the bg image or video will show beneath the module content.

Panel title

Used to determine the title that triggers the display of the panel when the sidebar is not collapsed.

Collapse Icon

Used to determine the icon used to trigger the display of the panel when the sidebar is collapsed.

Enable extra content

When enabled an html overlay is displayed above the panel content.

Html

The actual content used for the overlay. You can use any valid html in this text area.

Style

The class applied to the html panel. Options primary, dark, light, none.

This setting attaches a class to the html overlay which can be directly controlled in a custom css file. The less for this feature can be found in less/panels.less

The less applied to the primary overlay looks liek this.

.primary {
	background: @primary;
	color:#fff;
	border:4px solid rgba(0,0,0,0.1);
	background-clip:padding-box;    
	
	h1,h2,h4,h4,h5,h6,p.blockquote {
		color:#fff;
		margin:0
	}
}

Position

The position parameter gives you the option of positioning the html overlay at various positions in the panel. The positioning is also applied as a class which gets attached to the panel html. Options include sidebar offset, top center, top right, bottom right, bottom center.

Settings for panel types

Map panel type

The map is displayed in the panel based on the address et in the profile panel.

The map is set to display full width and full height of the browser window.

Module

The module type is used to display a module in the panel area. The position used for the panel can be set in the Module position parameter which is displayed underneath the panel type setting when this option is selected.

Use the module class "fullwidth" to specify that the module stretches to the full width of the srceen. When the fullwidth class is applied the content of the module will sit underneath the sidebar. By default the module is positioned to the right of the sidebar and will respond to whether the sidebar is in its collapsed or non-collapsed state.

Slideshow

The slideshow panel type displays a full width and full height slideshow in the panel content. Two settings appear in the panel settings when this option is selected:

  • Image folder - determines the folder to source the images from. This folder is located in the images folder of your Joomla site.
  • Slide Duration - This option determines the time in milliseconds for a slide to stay visible in the panel. To dispalble the auto play of the slideshow simply set this option to 0.

Navigation for the slideshow is automatically generated and position in the top right of the panel.

Gallery

The gallery panel type displays a full width image gallery where all images are stacked vertically down the page.

The user simply scrolls down the page to view more images.

  • Image folder - determines the folder to source the images from. This folder is located in the images folder of your Joomla site.

Photoset

The photoset gallery type displays images in a flexible grid layout similar to the Tumblr photoset layout.

  • The photoset layout option determines the structure of the grid. In this parameter simply add numbers to correspond to the number of images to show per row. For example in order to display a grid that has 4 images in the first row, 3 images in the second row, one image in the third row and two images in the fourth row you would specify 4312 in the Photoset layout parameter.

    A key consideration for this layout is to ensure that you have enough images in the folder that you are displaying images from in order to create the grid specified in this setting.

    However it is possible to under specify the number of items used in the layout. As an example if you wanted to create a layout that displayed three images in the first row and then all other images to fill the page width you would just enter the number 3 for this setting.

  • The photoset layout also has a built in lightbox so that when images are clicked they are viewable in a lightbox that sits above the page.

Video

The video layout enables the display of full width and height videos from either Youtube or Vimeo. To display a video in a panel simply add the url of the video you want to display on the page. eg http://vimeo.com/87701971. The template automatically parses the url and creates the markup required to embed a video.

As described above this content type is different to the fullscreen video option available for the home panel. The video mode available for panels 1 to 6 allows the user to control the video playback and volume. The video itself behaves in the same way as if you have embedded it in a page using the providers standard embed code.

Please note that the video may not always appear to be full height in the browser window due to the letterbox effect when using the embed technique. At some screen resolutions the video will have the appearance of being full height and full width while at other screen resolutions the video will only be full width.

Adding site analytics

Under the analytics tab it is possible to add your analytics code. This is an open parameter which means you can add analytics from any provider in this area. This option can also be used to add any css or javascript files manually.

Advanced settings - compression

Profilr has the ability to load all of the required javascript for the template in a single javascript file. It is advised that you turn this setting on when your site goes into production and to leave this setting disabled while in development. If this setting is off then each javascript file is loaded individually so it is easier to troubleshoot any javascript conflicts that may occur if you bring 3rd party scripts into your site.

Image naming conventions for galleries

The various slideshows built into the template use the image title as the name for each slide. The template automatically parses the file name and creates the required title text. If you want to give your images titles that include spaces then you need to follow this naming convention.

All + signs used in the image name will be converted to a space. So therefore if your image name has the title Walking+in+sunshine.jpg. Then the slide title will become Walking in sunshine.

Extensions used on the demo site