You can change look and feel of sharepoint sites on your choice. For Web Designers and Developers writing CSS code for elements is so time consuming. That too make changes in SharePoint Stylesheets(CSS) needs more patience. First have to make change in CSS, reset IIS(or Application Pool Recycle), clear browser cache/temp files and check. Even for one small change or entire CSS change the mentioned steps has to be done. Sometimes the changes won't reflect and makes little irritating. Many of us faced and facing this issue. Alternatively you can make changes with SharePoint Designer and preview changes. Again than requires make changes in CSS with SharePoint Designer and open with browser or Designer's Design view. Still it's not sufficient for me to complete CSS coding faster.
How to change SharePoint site controls design?
- Assume we requested to change width of Quicklaunch bar in SharePoint 2010 Site.
- First we need to find the CSS class of Quicklaunch bar. Well for experts it's very easy because it's "ms-quickLaunch". But for newbie it's not so easy, It has to open the site in browser, click View -> Source, Search for text in Quicklaunch and determine the Div which has the exact text.
- On other side, we can do the same with SharePoint Designer. After that we have to find which CSS has this class style definition. That's no so easy unless you have SharePoint Designer.
- Quicklaunch is always visible and easy to edit/preview with SharePoint Designer. Take example of changing Title bar of Dialog window. Can you make changes with SharePoint Designer? As far as I know it's not possible.
How to change and preview CSS on the Fly?
- When we got the requirement to change Dialog window style, need not to be suprised because we know the power of IE 8 Developer Tools. Its very good tool, generally used by many developers in designing the sharepoint sites.
- Lets see how to change CSS Styles without touching CSS files. Wondering how to make CSS change without editing CSS file? we can see further on the same.
- First open the site with IE8 and open the dialog(Click "Add New Announcement" link in Home Page or Site Actions -> More Options).
- Once the dialog came up Press F12 to get Developer Tools window. It'll take few seconds to load the HTML and CSS. In the Developer tools window click Arrow button (or Ctrl + B) and select the Title bar of dialog. It'll show Blue outline to show the element on focus.
Once the element selected the window will show exact HTML Code and CSS styles applied to it + CSS file which has the definition.
In the CSS pane, double click on style (eg. Font-family:) and it'll become editable. Change it to "Arial" and enter.
Now you can see the Title bar in "Arial" font. like this you can change any element style and see how it looks.
Once you got the style what you want, click the CSS file name above top right in the CSS pane.
It'll open the next tab which is "CSS" and shows the CSS file contents. In the drop down you can see the path of the CSS. Login to server and open the CSS with Notepad then make same changes. Once done save and reset IIS. That's It! You are done now.
Like this you can change the look and feel of entire site - sharepoint 2010 sites easily.
