How to

How to customize Bootstrap

Bootstrap can be customized via .css - the strategy would be to find or write those styles and put them in your portal .css file or even in default .css file. in order not to change the Boostrap styles directly - you don't want to mess with the library because you'll loose your changes on upgrades. Instead, you just have to overwrite the styles in your own .css file portal which is build into the DNN and loaded automatically by DNN on the page.

How to add and style other Modules 

We have a short video clip posted here which will guide you through the process of adding and styling other modules which will be fit for use in Tabs Pro.  

How to manually build your own theme

Click here to see a video where we've made a step by step presentation in which you'll learn to use jQuery UI in order to build your own theme and upload it to Tabs Pro. 

How to add your own icon

In order to upload a .png or a .jpg file which contains an image you want to have it as option displayed on the list:

Access the DNN platform with admin account then go to Admin menu option, click on File Management, when the page loads, select on the left sidebar the location where you want to upload the file (we usually recommend in Root in Images folder), once you get there, click on the "Upload Files" button which is displayed on the right corner under the Search term box, and upload .png or .jpg files only.  

Then you will find it on the tab you want to add the icon to by selecting Icon (from portal files) option, following the path where you uploaded the file.

How to update Tabs Pro to Font Awesome 4.1.0

Tabs Pro 2.0 is updated and supports Font Awesome 4.1 library but in case you struggle with the question of how you can update Tabs Pro to Font Awesome 4.1 here are the steps that you'd need to take:

Open \DesktopModules\TabsPro\ManageTabs.ascx and locate the list of icons. It's a simple UL list (http://screencast.com/t/YhNiteeZjrd7). Redo all icons with classes from new version. Then, overwrite the files under \DesktopModules\TabsPro\static\font-awesome\.

How to add the same module to multiple tabs

Tabs Pro works client side - meaning it adjusts the DOM so the modules fit into tabs according to settings. To be able to add the same module to multiple tabs we can't really clone the module multiple time because that would probably break functionality since each module has its own IDs. So perhaps the solution is to integrate the module via iframe, so each instance is isolated, or do some kind of dynamic DOM manipulation where module is moved around as the tab changes.

How does the export work

The Export does not export the other modules from the page. Only Tabs Pro settings are exported. Normally, people use the Export / Import to deploy changes from their UAT site to live. This is also useed implicitly when a page is copied into DNN. This will work, as long as there are modules on the page with the same name as on the original page.


How to use anchor tags inside tabs:

If you want to access a specific tab and scroll the page to a div from that tab you have to associate the div id with ‘goto’ variable in query strings and add this script in page header:
<script>
$(document).ready(function(){
 if (document.location.search) {
  var queries = {};
  $.each(document.location.search.substr(1).split('&'),function(c,q){
   var i = q.split('=');
   queries[i[0].toString()] = i[1].toString();
  });
  if (queries) {
   $(window).scrollTop($("#" + queries.goto).offset().top);
  }
 }
})
</script>

Comments