Tuesday, June 24, 2008

SharePoint customization - applying a theme programmatically

SharePoint sites can be customized through MasterPages and/or Themes. There are 2 main differences between these two methods:
1. masterpages allow you to rebuild the design from scratch - as in move the elements around on the page as you like - but do not affect system pages
2. themes are made up of css files only, allowing you just to skin a SharePoint site, but are also applied on the system pages.

Customizing a site generally means skinning all its pages. So that the user doesn't get confused as of why some pages look different than others, or at least to give the system pages almost the same look and feel as the rest of the pages.
Automating the masterpage install is easy -you create a feature and write code in the FeatureActivated event, code that sets your masterpage as the default and custom master(details on that feature are to come in a future post).
But what about applying a theme? The general procedure would be to have the administrator go on the server and copy some files on the Windows drive and then modify an XML file so that SharePoint can read the theme and display it on the Site Settings > Site Theme page. One of the many posts that explains this method is this one.

But what if you want to do this programmatically? With a feature, like you would do when you deploy a masterpage.

Well, simple enough, this is possible. As long as the theme exists in the THEMES directory, SharePoint can retrieve it. The only reason you modify the spthemes.xml is for SharePoint to display the theme in the Themes list. So if you place the theme in the Themes directory (just by copying it there in a bat file for example) you can use code to apply it:

web.ApplyTheme("MyTHEME");

Since we are here, the way to revert a SharePoint site to the default theme isn't web.ApplyTheme("Default"), but web.ApplyTheme("none").

And there you go - you can programmatically apply a theme to a site. And the way to make the theme "visible" to the user is to have it as a feature instead of having it in the Themes list.

Posted by Madalina at 15:56:17 | Permanent Link | Comments (0) |

Wednesday, March 12, 2008

Munca este intr-adevar amuzanta :)

Din capitolul "Toleranta este un cuvant pe care nu-l cunosc"... Subtitlul "wtf was your teacher?"
 
Am pus mana zile trecute pe un css facut de altcineva. Un css pentru un masterpage de SharePoint. Uitandu-ma prin el sa vad daca pot "fura" vreo idee, am vazut ca unele dintre imaginile folosite in clase aveau calea de forma "../../../../../../imagine.jpg". Ok... Am instalat masterpage-ul (printr feature-ul in care a venit) ca sa inteleg si eu ce imi scapa... Bineinteles ca imaginile nu se incarcau. Am inceput sa ma intreb de unde atatea directoare imbricate.
Singurul raspuns pe care l-am gasit pana acum a fost - le cauta cumva in Google?  =)) 
Posted by Madalina at 14:37:56 | Permanent Link | Comments (0) |

Friday, February 15, 2008

SharePoint Web Part Rounded Corners - CSS and no inheritance :)

Yes, just as the title reads:
- no custom webparts
- only css styles and images
- any webpart

Lately I have been searching the web for solutions regarding rounded corner webparts. I want to be able to use this solution on any site - so JPEG images as corners are out of question, since I need the webpart displayed on any background. PNG only work in IE7 and above, so first drawback is at the corner.

If you tried working on this much desired skin, you know that the tag layout of the webpart header is not very complex, so you need to play around with CSS selectors and margins and tricks, but none of these combined really does it.

Well here is my trick: the next image is the left corner of the webpart.




If you set this image as background for a TD, the image will stretch as far as the cell goes, so it won't overlap the right corner of the webpart header. You have to make it wide enough for (almost) any resolution/page width/webpart width to display correctly. One the other hand though, many sites today have a fixed width of the main area content, so there you go - you can anticipate how wide the webpart can get.

You also need the right corner image:


Of course, you can use an image that has rounded corners both at the top and the bottom.

And here are the classes:

.ms-WPHeader
{
 background-color:transparent;

}

tr.ms-WPHeader TD /* right corner */
{
 background-color:transparent;
 background-image:url('wpright2.png');
 background-repeat:no-repeat;
 background-position:right top;
 text-align:left;
 vertical-align:top;
 width:35px;
 height:26px;
 margin-top:-1px;
 overflow:visible;
 margin-right:10px;
}

.ms-standardheader.ms-WPTitle /* left corner */
{
 background-color:transparent;
 background-image:url('wpleftlarge.png');
 background-repeat:no-repeat;
 text-align:left;
 padding-left:25px;
 height:25px;
 }

.ms-standardheader.ms-WPTitle A:link, .ms-standardheader.ms-WPTitle A:visited /* title area */
{
 background-color:transparent;
 background-image:none;
 }

.ms-WPHeader DIV /* right corner action arrow */
{
 background-color:transparent;
 background-image:none;
 
 text-align:left;
 width:14px;
 
 overflow:hidden;
 vertical-align:bottom;
 margin-right:10px;
 margin-top:-1px;
 border:0px;
}

.ms-WPHeader TD /* gets rid of the blue bottom border (present in default style)
      under the web part header*/
{
 border: 0px;
}



The IE result:


The Mozilla result:

In Mozilla there is one issue: the webpart actions arrow on the right doesn't recognize the right margin value, so it's right on the edge.


And there you have it. Unfortunately with the drawback of a wide image load, fortunately a solution.

Posted by Madalina at 12:03:04 | Permanent Link | Comments (11) |