Tag Archives: Style sheet

How W3C link checker Works

W3C link checker is a highly recommended link checker. It checks the website and its component such as hypertext links for both HTML and XHTML format; if it is working properly. It is important that a website contains high technical quality. W3C link checker will generate the following reports:

CSS style sheet and extracts a list of anchors and links
It checks that no anchor is defined twice.
All the links are dereferenceable
Warns about HTTP redirects

You can check your URL at W3C Link Checker and you will have to check through this form.

Image

When it is in summary mode, it may take time for loading process. When the checking is done, it will show you “List of broken links and redirects” if broken links were found. You have to go through the pages, fix the broken link or if unresolvable it would be better to delete it. However, the link checker considers robots exclusion rules. When the robots.txt files of the website disallow link checks, there will be no single information from the website that will be seen.

Also view “Markup Validation Service” This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

Ref : W3C link checker in SEO

Sharepoint 2010 Fixed width Master Page Styling, no scrollbar issues

Recently I have created a custom master page for our new SharePoint server, First I have noticed that when the page loads, SharePoint  runs a java script function and sets the width of the page.

It is searching for the div tag  with Id  #s4-workspace  and if it finds one with this id, sets its width to fit the content. So I have added a class  s4-nosetwidth. If we add this class to s4-workspace,SharePoint wont set its width.

But very first time when I tried to create fixed width master page, I have faced so many issues with scroll bars and SharePoint modal dialog windows are not opening correctly. They are opening either with in  small height  and added scroll bars or  opening in fixed width and height with out scroll bars.

Mainly IE7 adding its own scroll bar to body  , as the page is fixed width so the scroll bar that is showing in the middle of the page is looking pretty ugly. I have fixed all these issues and below is the styling.

html{
background-color:#55A0A7;
overflow/**/:auto;
}

body.v4master {
width:1024px;
margin:0px auto;
overflow:visible;
background-color: transparent !important;
}

.ms-dialog body.v4master {
height: 100%;
overflow: hidden;
width: 100%;
}
body #s4-workspace {
left: 0;
overflow: auto !important;
overflow/**/: visible !important;
position: relative;
width: 100% !important;
display:table;
border-spacing:0px;
}

.ms-dialog body #s4-workspace{
display:block !important;
overflow/**/: auto !important;
}

Custom Sharepoint 2010 Ribbon Markup Styles

If you’re doing any sort of custom theming for Sharepoint 2010, and have been wondering how to modify the out-of-the-box styles provided by the “Markup Styles” button in the ribbon, take a look at the following:

H1.ms-rteElement-H1B
{
-ms-name:”Colored Heading 1″;
/* [ReplaceColor(themeColor:”Accent1″)] */ color:#0072bc;
font-size:2em;
font-weight:normal;
}

If you Firebug / View Source HTML’d the content, you would probably have worked out how it kind of worked – basically, you just need to overwrite a few css classes to replace the existing ones and add new css classes in the following format:

Note the proprietary -ms-name property, and the use of the ReplaceColor goodness to integrate SP2010 themes into the stylesheet.

Unfortunately though, it looks like the only way to get rid of the out-of-the-box options is to remove the v4.css import (<sharepoint:CssLink runat=”server” Version=”4″ >) from the master page, and make a custom copy that excludes the styles.

Note : an alternative to replacing the v4.css if you’re only interested in modifying one or two of your Publishing HTML controls, you can specify the PrefixStyleSheet property which will replace the default set with the css style sheet you specify.

Reference : Managing the Rich Text Editor CSS and the RTE Menus for the Wiki Pages of a SharePoint 2010 Team Site

Creating flat site collection breadcrumb for SharePoint sites

SharePoint has several ways to navigate through site hierarchy and many users are used to breadcrumb to see where they are etc. Some consider collapse breadcrumb “folder” control not too intuitive and you may be asked to define your breadcrumb more explicitly or as a “flat” set of links.

To save yourself some time from custom development of the breadcrumb you can take the breadcrumb “folder” content and render it in a flat format. To do that we will take the SharePoint:ListSiteMapPath control which lives on each masterpage and place it right inside s4-titletext in your main masterpage:

Here is the code:

<sharepoint:ListSiteMapPath ID="ListSiteMapPath11" runat="server" 
SiteMapProviders="SPSiteMapProvider" 
RenderCurrentNodeAsLink="false" 
PathSeparator="" CssClass="s4-breadcrumb" 
NodeStyle-CssClass="s4-breadcrumbNode" 
CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" 
RootNodeStyle-CssClass="s4-breadcrumbRootNode" 
NodeImageOffsetX=0 
NodeImageOffsetY=582 
NodeImageWidth=16 
NodeImageHeight=16 
NodeImageUrl="/_layouts/images/fgimg.png" 
RTLNodeImageOffsetX=0 
RTLNodeImageOffsetY=582 
RTLNodeImageWidth=16 
RTLNodeImageHeight=16 
RTLNodeImageUrl="/_layouts/images/fgimg.png" 
HideInteriorRootNodes="true" 
SkipLinkText=""/>

Now you just need to adjust the CSS to flatten the structure; in here I’ll add the following CSS into the masterpage

.s4-title-inner .s4-titletext

{ margin-bottom: 3px; }

.s4-title-inner .s4-titletext ul, .s4-title-inner .s4-titletext ul li

{ display: inline; }

.s4-title-inner .s4-titletext ul.s4-breadcrumbRootNode, .s4-title-inner .s4-titletext ul.s4-breadcrumbNode

{ margin-left: 5px; }

This CSS is specific to the breadcrumb in s4-titletext and will not affect other elements on the masterpage.

Reference : Creating flat site collection breadcrumb for SharePoint sites

The Best Way to Add Custom CSS to SharePoint

To thoroughly customize your SharePoint site, you’ll need to use a custom CSS. SharePoint offers a way to specify a single CSS file to use via the “Master page” settings for the site. However, using this approach still limits you to customizing only those IDs and classes that are included on the pages by SharePoint. Moreover, using this setting applies to both site and system pages, which may not be desirable.

With these downsides in mind, the best approach is to create a custom master page and include references to one or more custom CSS files. Follow the steps below to include a custom CSS file in your master page.

    1. Open SharePoint Designer (SPD) and connect to the root level of your site’s site collection.
    2. In SPD, open the “Style Library” folder.
    3. Create a new CSS file and name it (e.g. “customstyles.css”).
    4. Open your master page file in SPD.
    5. In the tag add a link to your custom CSS just above the content place holder named “PlaceHolderAdditonalPageHead” as follows:
<link href=”/Style%20Library/customstyles.css” rel=”stylesheet” type=”text/css” />
Your custom master page is now using your new CSS file in addition to all of the CSS files SharePoint uses out-of-the-box. The idea is that you are taking advantage of the “cascading” property of cascading style sheets by layering your custom styles on top of what SharePoint creates in order to alter the SharePoint look-and-feel as desired—like a skin.

SharePoint 2007 and 2010 CSS Reference Chart

Just came across these good SharePoint CSS Reference Charts, its worth reading.

SharePoint 2007 CSS Reference Chart

SharePoint 2010 CSS Reference Chart

Custom Styles for SharePoint 2010 Rich Html Field

A typical requirement from a client is to be able to incorporate their own custom styles for the Rich Html Field. Allowing their public relations department to apply nice text formating for paragraphs with some Comic Sans Hotness might not be the best practice in here, so let’s be careful out there. The best scenario is only to allow custom formatting for headings, paragraphs and maybe a few different table styles but let’s go!

First, open up the page layout containing the HTML editor and add PrefixStyleSheet property for the RichHtmlField:

<PublishingWebControls:RichHtmlField id=”Content” FieldName=”PublishingPageContent” PrefixStyleSheet=”my-rte” runat=”server” />

Now, the default value for the property is ms-rte. We are going to redefine this to my-rte. Do not use any uppercase characters in the property value as apparently those wont work. Deploy the page and open it in edit mode to see the desired effect. The styles collections are now empty in the Ribbon.

We now have to define our own styles prefixed with the string my-rte. I’d suggest that you put these style declarations in a separate stylesheet to avoid javascript errors caused by complicated and hard-to-parse stylesheets. Let’s name our new stylesheet rte.css and add a few declarations there.

The Markup Collection

Let’s say I want to have an option to add a level 1 heading or an H1 tag for the given page via the Markup Styles dropdown list:

Step 1 – introduce the tag:

H1.my-rteElement-H1 { -ms-name:”my level 1 heading”; }

Step 2 – add the styles to the tag:

.my-rteElement-H1 { font-size: 150%; }

Save the rte.css and make a reference for it in your master page, page layout or even use an alernative css. If you want your clients to be able to edit the styles themself, you could upload the rte.css in the Style Library and reference it there.

I have saved the file directly in the 14-hive /_layouts/my/ -folder and use a quick reference in the master page:

<SharePoint:CssRegistration ID=”CssRegistration1″ runat=”server” Name=”/_layouts/my/rte.css” />

Deploy and reload the page, fire up the edit mode and navigate to the ribbon where you can see your new style in action.

Adding new elements is easy once you get to know the logic. Here’s an example of a parapgraph with nice rounded corners and superb font on modern browsers (note that I have combined the introduction and style values in one declaration):

P.my-rteElement-P { -ms-name:”My CSS Rounded Paragraph”; background: #808; color: #fff; border: 3px solid #f0f; text-transform: uppercase; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; padding: 10px; font: bold 2em Comic Sans MS; }

The Styles Collection

The Styles collection can be populated with the same way by changing the Element-suffix into Style ie.:

.my-rteStyle-MePinky { -ms-name:”I am pink”; color: #f0f; }

Other Items

I’d suggest that you check out the default HTML editor styles in /Style Library/en-us/Themable/Core Styles/htmleditorstyles for quick reference how to style the other elements, including table styles on the Ribbon.

Ref : Custom Style by Tuukka Uskali