Custom rich text editor styles for Content editor web part

3. May 2012 03:51 by Rashid Aziz in   //  Tags: , ,   //   Comments
  I received a request from business to restrict site editor not to use OOTB fonts and styles while they edit the contents of “Content editor web part” in SharePoint 2010. This is nice to have if you want consistent look and feel across the site without much end end-user training.  They asked me to create custom styles; apart from those styles the editor should not be able to apply any font, colours or styles on CEWP contents. I have done these changes on “Page Layout”. If an editor creates any page using that page layout, he/she will only see custom styles while editing the “content editor web part” contents. Below are the detailed steps to achieve this kind of functionality 1. Create custom CSS file (In my case I will call it “CustomRTStyles.css”) with custom styles , also hides OOTB fonts and mark-up styles options and upload it to “/Style Library/en-us/Core Styles/ CustomRTStyles.css” (Change the below CustomRTStyles.css style sheet according to your requirement) /* Custom rich text editor Styles list */ .custom-rteStyle-Heading1 {-ms-name:"Heading 1";  color:#FF0000;  font-size:30px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading2 {-ms-name:"Heading 2";  color:#000000;  font-size:24px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading3 {-ms-name:"Heading 3";  color:#000000;  font-size:20px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading4 {-ms-name:"Heading 4";  color:#000000;  font-size:18px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Paragraph {-ms-name:"Paragraph";  color:#969393;  font-size:14px;  font-family:"Arial, Helvetica, sans-serif" } .custom-rteStyle-IntroParagraph {-ms-name:"Intro Paragraph";  color:#000000;  font-size:12px;  font-family:"Arial, Helvetica, sans-serif"} /* To hide fonts tab */ #Ribbon\.EditingTools\.CPEditTab\.Font {  display:none;}  /* To hide Markup styles tab */ #Ribbon\.EditingTools\.CPEditTab\.Markup {display:none;} 2. Open the default master page in SharePoint 2010 designer and add the reference to newly created CSS style-sheet.  // <link rel="stylesheet" type="text/css" href=" /Style%20Library/en-us/Core%20Styles/CustomRTStyles.css" /> Now save and publish the master page. 3. Open the page layout in SharePoint designer on which you what to apply custom editing styles. 4. Locate the RichHtmlField and add the following properties PrefixStyleSheet="custom-rte" AllowFonts="false" The < RichHtmlField > control with look like the following // <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent"  HasInitialFocus="True" PrefixStyleSheet="custom-rte" AllowFonts="false" MinimumEditHeight="400px" runat="server"/> Reference custom css inside page layout just before the <PublishingWebControls:EditModePanel> control  // <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/CustomRTStyles.css %>" runat="server"/> 5. Now add the jquery to force the “Content editor web part” to use custom styles while editing any contents.  Locate the <PublishingWebControls:EditModePanel runat="server"> and add the scripting inside it, the end result will look like following <PublishingWebControls:EditModePanel runat="server"> <!-- Styles for edit mode only--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> ExecuteOrDelayUntilScriptLoaded(function() {  // window.setTimeout(function() {  $("div[RteRedirect]").each(function() { var id = $(this).attr("RteRedirect"), editSettings = $("#" + id); if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom-rte') { editSettings[0]['PrefixStyleSheet'] = 'custom-rte'; editSettings[0]['StyleSheet'] = '\u002fStyle Library\u002fen-US \u002fCore Styles\u002fCustomRTStyles.css';  RTE.Canvas.fixRegion(id, false);  }  }); // }, 2000); }, "sp.ribbon.js"); </script> </PublishingWebControls:EditModePanel> 6. Save and publish the page layout. 7. Now create new page in SharePoint 2010 page library by using updated page layout and add “Content editor web part”. The rich text editing tool will look different. I have attached the before and after images to give you guys feelings how the end results would look like.   Before changes   After changes

Create reusable content in InfoPath 2010

11. April 2012 04:04 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
 I had a requirement in past where I need to create an InfoPath form which will be reusable for other custom solutions. I have decided to create a re-useable template in InfoPath 2010. I think it’s worth showing the steps. I have created employee info form which was going to be used again several times. So, I have created the form by drag and drop contents to the pane and the end result are look like this. Once the form is ready follow these steps Steps: Now go to file and click “Save as” link. Give new template a name and save it on local disk. Now from the controls section of the ribbon, click “Expand all controls” and then click “Add or Remove Custom Controls”. A new window will appear, now click on “Add” and follow the wizard by selecting template part and browse to the location where you saved the template earlier. Now your custom control is successfully added. Create now form using custom control Close the InfoPath 2010 tool and re open, create new solution and select blank form template. From the control menu select employee info control (control created in the first section) and the form will appear instantly. Now you can do the changes if want and save it. It is very important that you create re-useable contents to save development time and efforts. J

SharePoint 2010 rich text editing tool styles

I came across a scenario where my client wants SharePoint extranet site contents look and feel consistent. The site have many sub sites and which lot of publishing pages, editors can create pages, add content editor web part and add contents. The request routed to me about deleting some custom styles from content editing tool and adding some new ones. Solution Open the current “Master” page in SharePoint 2010 designer. Click “Style” tab from designer menu and select “Manage styles” Right click any CSS style from” Manager Style” list  and select “Go to code” The core CSS file has all styling references ; the style starts with name “.ms-rteStyle”. Create new styles as .ms-rteStyle-stylename {-ms-name:"Eblogin Style"; color:#00adee;} Save the Core.css file Note: YOU CAN ALSO DELETE THE EXISTING STYLES BEFORE SAVING THE CSS FILE Open the SharePoint site and go to a page which has content editor web part. Edit any content inside the content editor web part and try to select the style from editing tool. You will see new style as shown below

Customize the sharepoint 2010 site top menu

15. December 2011 08:17 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
How to hide SharePoint 2010 root node from menu, how to change TopNavigationDataSource setting on master page. To do this you need to do some changes in your site master page. Open you site master page in SharePoint designer Need to delete delegate wrapper code altogether from master page and set the values of your desired properties. Locate and delete the followings from site master page.  <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource"   Id="topNavigationDelegate">                     <Template_Controls>                     </Template_Controls> </SharePoint:DelegateControl> You need to leave the actual data source control definition with any properties you want, as shown below: <asp:SiteMapDataSource   ShowStartingNode="False"   SiteMapProvider="CombinedNavSiteMapProvider"   id="topSiteMap"   runat="server"/> All of your navigation property choices will be picked up by whatever navigation control you’re using, including out-of-the-box SharePoint:AspMenu control. You don’t see the Home link, only see the team site link.

Remove “View all site content” link in SharePoint 2007

11. November 2011 06:55 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
Follow these steps to remove “View All Site Content” link form SharePoint 2007 site 1. Open your site master page in SharePoint designer 2. Go to the code and you will see the following <Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="ViewFormPages"> <div> <SharePoint:SPLinkButton id="idNavLinkViewAll" runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" Text="<%$Resources:wss,quiklnch_allcontent%>" AccessKey="<%$Resources:wss,quiklnch_allcontent_AK%>"/> </div> </SharePoint:SPSecurityTrimmedControl> 3. You need to change the PermisisonString attribute value from “ViewFormPages” to “BrowseDirectories” 4. Now save the master page changes. 5. Go to the site, if you are authenticated user only then you will see the “view all site content” link,   it will be not visible for anonymous users. Note: The “BrowseDirectory” permissions are same for members and owner permission levels for SharePoint 2007. But it is not set for the “Limited access” permission levels.

Stay connected

SharePoint Links

Month List