Posts

1920X1200_0001_Developer

SharePoint Online / SharePoint 2013 Balsamiq Mock Up Template

If you are anything like us, when we are planning your branding in SharePoint you tend to use Wireframes and more to the point, our favourite piece of software Balsamiq.

With SharePoint 2010 there was a great little SharePoint 2010 Balsamiq Mockup Template created by James Sturges.

However, there was nothing for SharePoint 2013 so of course we set to work to create one.

Flucidity-0215-116

This is not the end of course, we will add a Publishing Site Template and more for some of the other templates.

This is a free download all we ask is if you like it or download it please comment and let us know what you think.

More updates to the template will by posted via our twitter account @Flucidity (opens in a new window).

If you want to download the file, Click here to view the original post.

Hater

Survey: Why do you hate SharePoint?

There are so many blogs out there dedicated to the bliss that is SharePoint. I personally love them and write my own as well. My goal of this post, however, is to discuss the dark side of SharePoint.

What about SharePoint makes you mad, sad, frustrated, want to quit, pull hair out, scream at your monitor and wish SharePoint never existed?

Take 5 minutes and let me know.

Why do you hate SharePoint? The Survey

More than a bashing session, my goal is to collect the biggest pain points about SharePoint, and see if something can’t be done about them.

UPDATE

The survey is now closed and I’ve started the series on my blog, check it out here: http://davidlozzi.com/2012/10/17/my-users-dont-like-sharepoint-new-series/

Disabling mobile view in SharePoint

In most cases, when I design and build a custom branded solution for a SharePoint site, the customer wants the site to render the same for mobile devices. Instead, SharePoint redirects the user to a different layout.

This request is quite common across the world wide web. Most sites you visit on your computer will render the same on your mobile device, whether Android, iPhone, iPad, etc. The few sites which do have different layouts for mobile sites do so either to limit functionality or simplify a really busy site.

Out of the box, SharePoint will redirect your mobile users to the mobile version of the site, which is boring and doesn’t contain web parts. It is basically a list of lists, libraries and sites which have been configured for mobile access.

Mobile view of SharePoint

Blah. This site’s home page has 3 web parts which are pertinent to my users, and they can’t get to them here. Not an ideal setup. So instead, I’d like them to get to my full SharePoint site.

To disable SharePoint from redirecting users to the mobile version, there is a hidden feature you can disable using PowerShell. It’s quite simple, and is below.

disable-spfeature -identity MobilityRedirect -url http://addressofsite

The mobile site remains available at http://addressofsite/m, but your mobile users will have the same full experience (less browser limitations) as your desktop users.

DEVELOPER__reasonably_small

Video – SharePoint Branding with CSS Customisations

Cross Post – original article available at: http://e-junkie-chronicles.blogspot.com/2011/10/video-sharepoint-branding-with-css.html

Here’s a short video and screencast demo where I show a technique for loading CSS in a SharePoint site from a Visual Studio 2010 solution, using Delegate Controls.
Enjoy!

SharePoint Branding with CSS Customisations from James Love on Vimeo.

Talking through what to do and what not to do when customising SharePoint sites with CSS changes.

SharePoint 2010 Branding – Part Nine

This entry is part 9 of 9 in the series SharePoint 2010 Branding Series

Hello again, the last post for the blog this week is the ninth part of the branding series and as we are getting somewhere closer to the final look and feel we should think about the overall design and there is a few things we have yet to make space for or even move to the correct location.

Current Design

As you can see we need to make some space for the search bar, add in a traditional breadcrumb, hide or move the social icons if we are not using them, we could do with moving the top navigation bar to the top of the page and this will of course shift all the content up a little and lastly we need to remove or move the quick launch.

However, first things first, yesterday I said I would show you how to fix the main content area from being “transparent” and adopting our new background colour. If you were a little brave you may have opened up IE Developer Tools (F12) and found the ID we need to apply a change to, this is done as follows

[sourcecode language=”css”]
#s4-bodyContainer
{
background-color:white;
}
[/sourcecode]

Isn’t that nice and easy? well of course.

Now let’s take a look at those social icons, the code which takes care of these icons is as follows;

[sourcecode language=”csharp”]
<div class="s4-notdlg">
<!– links for I like it and Tags and Notes –>
<!– use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons –>
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
</div>
[/sourcecode]

This code contains the Delegate Control “GlobalSiteLink3-mini” as the comments state, removing the -mini will show you the larger icons and deleting the code altogether will remove the icons, however, I don’t want be so brutal and instead I would liketo keep the code incase I want to use it at a later date.
How is this possible? If you locate the following code;

[sourcecode language=”css”]
<!– =====  Hidden Placeholders ============================================================ –>
[/sourcecode]

You will see that there is an asp:Panel which hides content and it would be a good idea to stick the content in here and we can then make use of it when we want.

Cutting and pasting the above code into the asp:panel will provide you with the following end result;

Excellent, let’s get that navigation menu moved so that it sits at the top alongside the logo.

If you remember from Part Five we created an div block called #sp365-navbar and given that this is home to our logo image, it might be a good idea to add the code for the navigation somewhere in there.

Firstly, we need to find the code for the top navigation, once again we can search for;

[sourcecode language=”csharp”]
<!– top navigation area –>
[/sourcecode]

Which will give us the right section of code and we then need to move this entire section of code;

[sourcecode language=”css”]
<!– top navigation area –>
<div class="s4-notdlg">
<!– top navigation publishing data source –>
<PublishingNavigation:PortalSiteMapDataSource
ID="topSiteMap"
runat="server"
EnableViewState="false"
SiteMapProvider="GlobalNavigation"
StartFromCurrentNode="true"
StartingNodeOffset="0"
ShowStartingNode="false"
TrimNonCurrentTypes="Heading"/>

<!– top navigation menu (set to use the new Simple Rendering) –>
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
EncodeTitle="false"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn">
</SharePoint:AspMenu>
</div>
[/sourcecode]

Paste that code into here

[sourcecode language=”csharp”]
<div id="sp365-navbar" class="s4-notdlg"><!– NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows –>
<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
<SharePoint:SiteLogoImage LogoImageUrl="/Style Library/sp365/websitelogo2.jpg" runat="server"/>
</SharePoint:SPLinkButton>
</div>
[/sourcecode]

So that the final result is

[sourcecode language=”csharp”]
<!– link back to homepage, SiteLogoImage gets replaced by the Site Icon, you can hard code this so that its not overridden by the Site Icon or even remove –>
<div id="sp365-navbar" class="s4-notdlg"><!– NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows –>
<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
<SharePoint:SiteLogoImage LogoImageUrl="/Style Library/sp365/websitelogo2.jpg" runat="server"/>
</SharePoint:SPLinkButton>

<!– top navigation area –>
<div class="s4-notdlg">
<!– top navigation publishing data source –>
<PublishingNavigation:PortalSiteMapDataSource
ID="topSiteMap"
runat="server"
EnableViewState="false"
SiteMapProvider="GlobalNavigation"
StartFromCurrentNode="true"
StartingNodeOffset="0"
ShowStartingNode="false"
TrimNonCurrentTypes="Heading"/>

<!– top navigation menu (set to use the new Simple Rendering) –>
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
EncodeTitle="false"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn">
</SharePoint:AspMenu>
</div>
</div>
[/sourcecode]

So to summarise what we have done, we have moved the Top Navigation control into the navbar code block we created in block five, this gives us the following end result;

Impressed? You should be, we are now moving major controls that make up the SharePoint design and if you managed to move these things successfully then you are learning how easy it is to manipulate the layout.

On Monday the series will reach part 10 and I will be creating an e-Book with all the posts in it so that you can download all 10 parts for your offline viewing pleasure, I will also be including a download with all the code we have changed to date.

Thanks

Matthew Hughes

SharePoint 2010 Branding – Part Eight

This entry is part 8 of 9 in the series SharePoint 2010 Branding Series

In the last post we looked at centreing the content area including the ribbon and now we will look at how to change the scrolling back to the old method of scrolling.

In our current site we have the main content area, scrolling leaving the ribbon at the top this is fine if that’s how we want it but in our site it is meant to be a public facing site and so we would like to jump back to the traditional method of scrolling i.e. the whole page scrolls together.

To achieve this we need to take a look at the master page and find the following piece of code

[sourcecode language=”css”]
body {
height:100%;
overflow:hidden;
width:100%;
}
[/sourcecode]

Which will sit in the Master Page in between the <head> and </head> tags.

Remove the overflow attribute completely and then add the following code to the CSS file

[sourcecode language=”css”]
body #s4-workspace {
overflow:visible;
}
[/sourcecode]

How does this all work? By hiding the main overflow scrolling effect from the page the workspace or our content area is effectively allowed to steal the overflow and make use of it itself if you play around with the overflow settings you can see this happen, with that said by using the code we have above this reinstates the standard scrolling and everything is good in the world.

Before

After

Exciting isn’t it? Well I don’t want this post to be uber short so let’s take a look at adding a background to the site, there’s quite a lot of white space going on in the site at the moment and the final design included a green gradient.

So where do we start, well we want the background colour to apply to the whole site so a good place try try first would be the Body as this is a standard tag and applies to the whole site.

Something like this would make sense;

[sourcecode language=”css”]
body
{
background-image:url(‘/SiteAssets/samworthbg.gif’);
background-color:#325e13;
background-repeat:repeat-x;
height:100%;
}
[/sourcecode]

Here we specify a background image as well as a background colour, we tell the image to repeat across the x-axis (left to right) and give it a height of 100%, how does this translate to the page?

Seemingly fine right? Well if we scroll down a little we can see that there is still a few problems, however, never fear we will deal with this tomorrow.

If anyone out there is following along, please do have a go and see if you can figure out what is wrong.

I’ll tell you tomorrow but for now good day to you

Thanks

Matthew Hughes

SharePoint 2010 Branding – Part Seven

This entry is part 7 of 9 in the series SharePoint 2010 Branding Series

Well hello again, it is fair to say that not only are we starting to make some progress but we now understand some core concepts when it comes to how styles are applied and more importantly why they may not be applied.

In todays post we will be looking at centering the main content area and whilst we have been creating our own styles we will now be making use of Microsoft’s out of the box styling and overriding these styles. This will make it clear why we talked about Specificity and style preference in the last post.

So we have the site looking like this;

We want to centre the content, we can use the IE Developer Tools and we will soon see that the main content area is #s4-workspace and then I go ahead and add the following code;

#s4-workspace
{
	max-width:960px;
	margin:0 auto;
	padding:0px;
	background-color:white;
}

And voila, right?

OK Houston we are in problem central, actually it’s not so bad, we can see that the content area is centred but the ribbon hasn’t quite centred. If we stoke up the IE Developer Tools (F12) once again we will come across #s4-ribbonrow which is the container for the Ribbon. Now there is two ways in which we can centre that content, we can add the following code;

#s4-ribbonrow
{
	max-width:960px;
	margin:0 auto;
	padding:0px;
	background-color:white;
}

But hold on one second, isn’t that the same code as the code for #s4-workspace, well hot damn of course it is and in the usually CSS way, we can save duplicating content by changing the first block of code to look like this

#s4-ribbonrow, #s4-workspace
{
	max-width:960px;
	margin:0 auto;
	padding:0px;
	background-color:white;
}

Of course if we want an attribute to change for one of the two selectors we would either have to break out of this code or add another section for whichever ID we are referring to.

Now we can say voilà! for now at least.

Thanks

Matthew Hughes

SharePoint 2010 Branding – Part Six

This entry is part 6 of 9 in the series SharePoint 2010 Branding Series

In the last post we took a look at moving the home link and adding our own header image to the Master Page and in this post we will be adding our nice banner image as well as talking CSS for a little.

Now the banner image is actually a background image and as such only requires a div block with some creative CSS to allow it to be visible.
Therefore if you find the area where the ribbon starts (were you paying attention in the last post?) then you can add this simple piece of code

<div id="headerimage" class="s4-notdlg">
</div>

This will create the area for you to style but without any additional CSS it will not change anything visually on the screen.

The next step would then be to add a little CSS as follows

#headerimage
{
	background:url('/SiteAssets/header0.jpg');
	margin:0 auto;
	height:175px;
	width:960px;
}

Here we are selecting the #headerimage code block and applying the image to the background, centering the content and adding a width and height to the code block. The header0.jpg image must exist otherwise you will get a code block which has the right height and width but you will have nothing inside it.

Getting somewhere right?

Specificity and Style Preference

At this point it is worth talking about Specificity as it directly applies to what we are doing in our branding, Specificity relates to the way in which a browser applies your styles and we should think about the preference the browser puts on styles in general as it helps when trying to think of why my styles are not applying, there are many good posts which go into more detail including Smashing Magazine and HTML Dog.

External Style Sheets

These take the least preference and will usually be linked to in the head section using a bit of code like;

<link rel='stylesheet' id='thickbox-css' href='thickbox.css' type='text/css' media='all' />

Page Styles

Page styles will take a higher preference to the external style sheets and can be anywhere in the page using a code block like this;

<style type="text/css">
.someclass {
  attribute:value;
}
</style>

Inline Styles

Inline styles will generally take preference given that they are the last style to be applied like this;

<div style="color:blue;"></div>

If you can’t think of how this might relate to SharePoint you may have heard of a situation where someone wants to remove the quick launch bar for one page, the answer you will find in forums is to add a Content Editor Web Part and add the following code (there’s more to it than this but for a simple example this works)

<style type="text/css">
.s4-ql
{ display:none; }
</style>

Now if we added this to our external style sheet it would then apply to all pages but by adding it as a page style we can then assure that it only applies to the page we are on as well as knowing that it will override anything in the external style sheet due to the preference the browser places on the code.

How Specificity adds even more to this is what you might call conflict resolution, what happens if we have,

.s4-ql
{ display:none; }

in the external style sheet and,

<style type="text/css">
.s4-ql
{ display:block; }
</style>

in a page style, well we know preference would kick in and so the latter would be applied but then what happens if we have

<style type="text/css">
.s4-ql
{ display:none; }
.s4-ql
{ display:block } 
</style>

well now it gets complicated, or does it? Style sheets work top down and so the last style referenced would take effect and one last example,

<style type="text/css">
#s4-leftpanel .s4-ql
{ display:none; }
.s4-ql
{ display:block } 
</style>

Which of the styles would take preference, well the top style would take preference as it is more specific than the last one, this is so important to know and I definitely recommend checking out the two posts I referred to above as they go into lots more detail but even armed with the above information you should be able to figure out why some styles take preference over others.

Lastly, Smashing Magazine makes the point about the use of !important, using this at the end of a style will force this to take preference and should never be used in a production environment, don’t get me wrong I will admit to having used it however, it is usually just a lazy way of creating your style sheets and figuring out the right selector is much more developer friendly especially when working in a team.

I hope I have not lost you in this post and you should see the value in learning about things like specificity and style preference as it will make your branding experience much more enjoyable and yes it should be enjoyable as there is nothing like taking a standard site and making it look beautiful.

Thanks

Matthew Hughes