SharePoint 2010 Quick Launch Customization using jQuery accordion, SharePoint 2010 UI Customization Tips, SharePoint 2010 Services, Tomact Installation Tips

SharePoint Tips

As I'm a Designer and working on SharePoint from 2yrs like to share my experience & tips with the world.

SharePoint 2010 UI Customization is not so easy for designers as the css class & id are per-defined basing on these over-right the existing css with our styles. So best practice is create a new style sheet and copy the change required css from corev4.css and add "!important" to over-right with our styles.

Attach the css file from the "Site settings > look and feel > Master Page > Alternate CSS URL " and Check the box "Reset all sub sites to inherit this alternate CSS URL" Instead of linking css file inside the master page. like this "../Style%20Library/style/styles.css"

The Style sheet can be uploaded to the "Style Library " instead of the folder "14/Template/Layouts/Styles/ "

similar to the images and coming to the Scripts files add them in the content web-part and make it invisible for the user the script files runs form there.

Quick launch or Left Navigation in SharePoint 2010 make it as accordion I found a site which give the accordion effect using jQuery. Working solution SharePoint Quick Launch with Accordion active state.

script src="/_layouts/Scripts/jquery.easing.js"

script src="/_layouts/Scripts/jquery.dimensions.js"

script src="/_layouts/Scripts/jquery.accordion.js"

Method One

jQuery().ready(function(){ // second simple accordion with special markup jQuery('.root ').accordion({ header: '.menu-item', navigation: true, event: 'click', animated: 'easeslide', active: '.tab4', selectedClass: 'active' }); // bind to change event of select to control first and seconds accordion // similar to tab's plugin triggerTab(), without an extra method var accordions = jQuery('.root'); jQuery('#switch select').change(function() { accordions.accordion("activate", this.selectedIndex-1 ); }); jQuery('#close').click(function() { accordions.accordion("activate", -1); }); jQuery('#switch2').change(function() { accordions.accordion("activate", this.value); }); jQuery('#enable').click(function() { accordions.accordion("enable"); }); jQuery('#disable').click(function() { accordions.accordion("disable"); }); jQuery('#remove').click(function() { accordions.accordion("destroy"); wizardButtons.unbind("click"); }); }); $(function () { $("ul>li>ul>li>a").removeClass("menu-item"); $("ul>li>ul").css({'display':'none', 'height':''}); }); The left navigation will act as Accordion,

Method Two

$(document).ready(function () {

// do stuff when DOM is ready

var pathname = window.location.pathname;

if (pathname.indexOf("_layouts") >= 0) {

LayoutmakeLNCollapsible();

}

else {

makeLNCollapsible();

}

$(".selected").parent().show();

$(".selected").parent().parent().parent().show();

});

function LayoutmakeLNCollapsible() {

$("div.menu-vertical>ul.root>li.static>a span.menu-item-text").prepend(

");

if ($("div.menu-vertical>ul.root>li.static>ul.static>li.static").children("ul")) {

$("div.menu-vertical>ul.root>li.static>ul.static>li.static>a span.menu-item-text").prepend(

");

}

$("img.collapser").toggle(

function () {

var a = $(">ul", $(this).parent().parent().parent().parent()).show("fast");

$(this).attr('src', 'images/oratimages/navarrow-on.png');

function () {

$(">ul", $(this).parent().parent().parent().parent()).hide("fast");

$(this).attr('src', 'images/oratimages/navarrow.png');

}

);

$("div.menu-vertical>ul.root>li.static>ul.static").css("display", "none");

$("div.menu-vertical>ul.root>li.static>ul.static>li.static>ul.static").css("display", "none");

}

function makeLNCollapsible() {

if ($("div.menu-vertical>ul.root>li.static").children("ul")) {

$("div.menu-vertical>ul.root>li.static>a span.menu-item-text").prepend(

");

}

if ($("div.menu-vertical>ul.root>li.static>ul.static>li.static").children("ul")) {

$("div.menu-vertical>ul.root>li.static>ul.static>li.static>a span.menu-item-text").prepend(

");

}

$("img.collapser").toggle(

function () {

var a = $(">ul", $(this).parent().parent().parent().parent()).show("fast");

$(this).attr('src', '~/_layouts/images/oratimages/navarrow-on.png');

function () {

$(">ul", $(this).parent().parent().parent().parent()).hide("fast");

$(this).attr('src', '~/_layouts/images/oratimages/navarrow.png');

}

);

$("div.menu-vertical>ul.root>li.static>ul.static").css("display", "none");

$("div.menu-vertical>ul.root>li.static>ul.static>li.static>ul.static").css("display", "none");

}

SharePoint - Service Unavailable

One fine day i got this error when i tried to access my SharePoint site locally "Service Unavailable". This happens when u change your system password which you created SharePoint sites.

The Issue can resolve from IIS, The application Pool was stopped/disabled I found this through "Event viewer" report.

What i have done. "Properties" of the "SharePoint Central Administration" and goto "Identity" and change the Password.

My SharePoint sites runs as usual.

Adding New User to Existing SharePoint Site and Change Database user credentials.

If you have administrator privileges.

First add user in Farm Administrator group

add user in General > Configure manage account

to change the user for site collection

Goto Central Administration > Security > Configure service accounts

select web application and select users

Apache Tomcat zip package installation on Windows

Installing tomcat.exe on windows machine an error prompt with "Failed to install tomcat service. Check your settings and permissions. Ignore and continue anyway(not recommended" so i download the zip version of tomcat and start setup here is configuration screen shot.