Hi. Im trying to get tabs above the record (or below) isstead of a list of records. See image please. . . Can anyone assist here. I have version 7.4.1
If you go into studio then edit the relevant layout for that module at the top of each panel there should be a dropdown to display it as either a tab or a panel. If you change this option to tab for each panel then click save and deploy that should do it. Can’t remember for certain but you may have to repair and rebuild as well.
Thanks for that information. . . however just to clarify. I would like in the “accounts” module all the below records (quotes, invoices, etc) to be displayed as a tab rather then having to scroll all the way down.
For example see the image below. Thanks!
sorry I misunderstood you, didn’t realise it was sub panels you were trying to display as tabs. I’m afraid there is no easy way to do this that I’m aware of, you would probably have to do a lot of editing to templates to get it to work.
I understand. No problem. While I have your ear could you help me on the follow error:
You must specify a valid username and password.
I have added a new user and set password manually and it will not let me login. I know for sure the password and username is correct. I see others had this issue at one time also. Any idea on whats causing it?
the only time that I’ve had issues with logging in is when I’ve had multiple tabs open with different instances of Suite. Not sure if that would be relevant to you?
Have you tried using forgot password to reset the password, in case you had caps on or made a typo without realising?
Yes. It gives the same error message.
Hi DODOM2,
I have been looking for a solution just like yours, and I couldn’t find any other way to accomplish this in SuiteCRM than to make it myself. I’ve only been messing around with SuiteCRM for a month and a half, and I’m not yet familiar with the templates, as ewanmcrobert suggests. However, I made a solution to this in javascript, using a jQuery-plugin called EasyTabs.
I’m aware that this is not the best way to do it, but it works pretty good. The only troublesome thing about using EasyTabs is that it’s not compatible with the AJAX-interface in SuiteCRM, so it has to be disabled (Admin>System Settings>Configure AJAX UI>Drag the modules you want tabbed from enabled to disabled).
It looks like this:
I did this by making a new theme, based on the included theme called Suite7.
In /themes//js/style.js, i have added this:
var tabbedModules = new Array('Contacts', 'Sharp_Bedrift'),
activeTabs = new Array('li:first-child', 'li:last-child'),
tabbedActions = new Array('DetailView'),
activeTab = 0,
qs = window.location.href.split('?');
if (qs.length > 1) {
qs = qs[1].split('&');
var qso = {};
for (query in qs) {
var tmp = qs[query].split('=');
qso[tmp[0]] = tmp[1];
}
var tabThisModule = false;
for (module in tabbedModules) {
for (action in tabbedActions) {
if (qso.module === tabbedModules[module]) {
if (qso.action === tabbedActions[action]) {
activeTab = module;
tabThisModule = true;
}
}
}
}
}
$(document).ready(function() {
$("ul.clickMenu").each(function(index, node) {
$(node).sugarActionMenu();
});
if (tabThisModule) {
tabbedInterface();
}
});
function tabbedInterface(){
if ($('#tabbedInterface').length) {
$('#tabbedInterface').remove();
}
var tabbedInterface = document.createElement('div');
tabbedInterface.id = 'tabbedInterface';
var tabHeadList = document.createElement('ul');
tabHeadList.id = "easyTabs_theTabs";
$('#subpanel_list>li').each(function(index, node) {
node.lastChild.style.display = 'inline-block'; // chromium-browser fucks it up if this is not set
var tabHeadText = node.firstChild.innerText || node.firstChild.textContent;
tabHeadTextNode = document.createTextNode(tabHeadText.trim());
var tabHead = document.createElement('a');
var tabHeadListElement = document.createElement('li');
tabHead.appendChild(tabHeadTextNode);
var tabName = node.lastChild.id;
tabHead.href = '#' + tabName;
tabHeadListElement.appendChild(tabHead)
tabHeadList.appendChild(tabHeadListElement);
tabbedInterface.appendChild(node.lastChild);
});
tabbedInterface.insertBefore(tabHeadList, tabbedInterface.firstChild);
$('main')[0].appendChild(tabbedInterface);
$('#tabbedInterface').easytabs({
animate : false,
tabsClass : "activeTab",
defaultTab: activeTabs[activeTab]
});
$('#subpanel_list').remove();
}In /themes//tpls/_head.tpl, i have added this:
<script type="text/javascript" src='{sugar_getjspath file="themes/SuiteNOR/js/jquery.easytabs.min.js" type="text/javascript"></script> "}'></script>In /themes//css/style.css, i have added this:
#easyTabs_theTabs {
margin-left: 0;
margin-bottom: 3px;
}
#easyTabs_theTabs li {
display: inline;
padding: 6px;
padding-bottom: 3px;
margin: 0 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius: 5px;
border-top-right-radius:5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
color: #999;
background-color: #333;
border: 1px solid #333;
border-bottom: 1px solid #333;
}
#easyTabs_theTabs li:hover {
background-color: #565656;
color: #fff;
}
#easyTabs_theTabs li.active {
color: #333;
border: 1px solid #999;
background-color: #fff;
border-bottom: 1px solid #fff;
position: relative;
}
#easyTabs_theTabs a {
color: inherit;
font-weight: bold;
}
#tabbedInterface>div {
display: inline-block;
}
#tabbedInterface>div {
width: 100%;
border: 1px solid #999;
display: inline-block;
}
#subPanel {
border: 1px 0;
-webkit-box-shadow: unset;
-moz-box-shadow: unset;
box-shadow: unset;
}It would, probably, be more efficient to move some of this code into a template, as there is some DOM-manipulation being done here. At least it’s some code you can look at and see if it can help you accomplish what you want to do.
If you have found any other and better solutions, please say so! It would be a delight to see if somebody has found any other ways to do this. 
Thanks for that! I really appreciate all the effort there however I went ahead and had a developer build it into the templates a few weeks ago. Still working on making it responsive tho.