Koodinpätkiä / Code Bits: August 2014

Friday, August 22, 2014

Clear SharePoint Designer cache

Sometimes SharePoint Designer loses touch with reality - it demands to check out files that are not checked in, refuses to check in other files and generally misbehaves. This demeanor is sometimes accompanied by this error message:

    "Cannot perform this operation. The file is no longer checked out or has been deleted."

Simply put, SharePoint Designer is out of sync with SharePoint and you have to delete its cache in order to rebuild it. The cache is composed of these 2 folders:

    %APPDATA%\Microsoft\Web Server Extensions\Cache
    %USERPROFILE%\AppData\Local\Microsoft\WebsiteCache

Just delete their contents and you are done.
I found the solution here.

Wednesday, August 20, 2014

Set the best DOCTYPE for Sharepoint 2010, Sharepoint doctype declarations for HTML5 & CSS3

When working with advanced Sharepoint designs, one usually wants to change the document type to allow for more relaxed syntax and opportunities.

On the top of your Master page, add this:
<!DOCTYPE html>
It changes the document type to a HTML5-compliant mode.
Remember to change the meta tag "X-UA-Compatible" to a newer version, or delete it completely:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Otherwise Internet Explorer will render the page in IE8 compatibility mode, so CSS3 & HTML5 won't work.

When using an older environment, this DOCTYPE declaration seems to be the best and also the most relaxed: HTML 4.0 Transitional in Standards Mode

So, type the following line to the top of your Master page, where the previous setting is, overwriting it:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Remember, don't change the DOCTYPE in your regular pages, only in the Master page! Because it doesn't work that way, it has to be on top of the rendered(master) page.

EDIT: Sometimes it might be best NOT to include any doctype definition, that might break old IE. See more info in this link:
Lots of more info & experience here.

Friday, August 8, 2014

Free web fonts

https://www.theleagueofmoveabletype.com/

@font-face definition for multiple browsers and devices using FontSquirrel

1) Download fonts to your server from FontSquirrel
2) Add these CSS definitions, change the path and font filenames if needed:

/*-- Font Definitions, free Roboto font from FontSquirrel - works with all major browsers--*/
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Done! It was so easy!

Here I have used 3 different weights of the same Roboto font. You can manage with only one and use the font-weight property, but I heard it's sometimes uglier method. This method ensures the best quality.

Btw I compared the same Roboto font from Google fonts and FontSquirrel:
Google Roboto is ~125kB
FontSquirrel Roboto is ~25kB

Wednesday, August 6, 2014

Centered fixed width design in SharePoint 2010 with CSS - The best way

Most of the tutorials available on the 'net don't respect the ribbon and stuff it into a design that has a fixed width. This is the fastest way to get a fixed width design and needs only the following CSS code and is flexible to be changed to any desired width.

div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
width: 960px;
margin: auto;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}

To get the fixed width design working with the v4.master some classes needs to be added.

<div id="s4-workspace">

Needs to be changed to:

<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This needs to be changed to:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Original post here

Tuesday, August 5, 2014

Add custom CSS file to a Sharepoint 2010 site

Open up your current masterpage. This is usually v4.master by default, and always located in the “_catalogs/masterpage” directory. Remember to make a copy of it and edit the copy! Then set it as your default Master page.
Right before the

<asp:contentplaceholder id="PlaceHolderAdditionalPageHead" runat="server">
</asp:contentplaceholder>

tag, put the following line of code to include a reference to your custom CSS file.

<sharepoint:cssregistration after="corev4.css" name="&lt;% $SPUrl:~SiteCollection/Style Library/Custom/styles.css %&gt;" runat="server">
</sharepoint:cssregistration>

Done!

Pages