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.
In the appearance panel scroll to the background image option and select an image to use as the background image.
Please note that if the address field is empty then you will not be able to use the map content type.
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.
After following the steps above you will now have a full screen and height google map as the content for the first panel.
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.
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.
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.
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.
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.
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.
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:
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 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.
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.
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.
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;
}
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.
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.
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.
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.
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.
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.
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.
This is the font weight assigned to all body, p, li,a etc tags on the site.
This is the font weight assigned to all heading tags on the site.
This is the font weight assigned to links on the sidebar on the site.
The profile panel controls the sidebar avatar image, style, site title, tagline and address.
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
If you do not wish to display a profile image on your site then you can set this setting to none.
The site title appears under the profile image in an h1 tag.
The tagline appears in an h2 tag underneath the site title .
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.
The home panel settings determine the display of the site when your site first loads.
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.
When enabled the sidebar will automatically be collapsed on page load.
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.
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.
Used to determine whether the panel is displayed or not.
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.
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.
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.
Used to determine the title that triggers the display of the panel when the sidebar is not collapsed.
Used to determine the icon used to trigger the display of the panel when the sidebar is collapsed.
When enabled an html overlay is displayed above the panel content.
The actual content used for the overlay. You can use any valid html in this text area.
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
}
}
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.
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.
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.
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:
Navigation for the slideshow is automatically generated and position in the top right of the panel.
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.
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.
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.
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.
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.
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.