All About SharePoint 2010/2013

  Home  |   Contact  |   Syndication    |   Login
  23 Posts | 0 Stories | 0 Trackbacks


Exploring SharePoint 2013 Online

Developing Nintex Workflows

Exploring SharePoint 2013

Acquired MCPD : SharePoint 2010 Developer

Share on Facebook


Post Categories

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, He has to open the site in browser, click View -> Source, Search for text in Quicklaunch and determince the Div which has the exact text. Alternatively 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 I got the requirement to change Dialog window style, I haven't suprised because I know the power of IE 8 Developer Tools. :-)
Lets see how to change CSS Styles without touching CSS files. Wondering how to make CSS change without editing CSS file? Let's see.. 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.

Internet Explorer Developer Toolbar

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!

Like this you can change the look and feel of entire site easily.
posted on Wednesday, November 24, 2010 10:46 AM


# re: How to change Look and Feel of SharePoint 2010 sites? 12/2/2010 8:25 PM Neel
Thanks for the nice articles, I just stumbled upon your blog, great work.
I have question for you , I have created few pagelayouts, now there are few common css to be applied to all layouts, what do you prefer from your point of view, put that in all layout pages and not to worry, or put that in a one common css and call it as external reference in pagelayout file.
My blog:

# Re: How to change Look and Feel of SharePoint 2010 sites? 12/7/2010 9:58 AM Venkatesh
@Neel: I prefer to create a Sub Folder in Layouts Folder(in SharePoint Root) then place your CSS. It's because it won't be overwritten/deleted when service pack/patch installed on Server.
You can then refer the css in Layout or Master Page.

# re: How to change Look and Feel of SharePoint 2010 sites? 2/13/2014 9:07 AM roger
At first, I have a hard time figuring things out, but thanks to this detail, it just went well on my end. - Roger Stanton

comments powered by Disqus