What's New
0

Branding SharePoint 2013 Tricks – 1 – Inline Styles in Design Manager Page Layout

When you begin working with Page Layouts in SharePoint 2013 Design Manager available in Publishing site, you may want to start adding inline styles like you used to do in SharePoint 2010 to hide the left quick launch among many other reasons. Easy enough, you create a custom Page Layout in Design Manager, say named “Inline Page Layout”, and SharePoint creates two files for you, inline-page-layout.html and inline-page-layout.aspx. As we know, we are not supposed to touch the aspx file, only the html file. No problem.

Open the html file and in the section we find a content placeholder,

1
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->

Within this content placeholder, we wish to add our inline style to hide the quicklaunch menu.

1
2
3
4
5
<style type="text/css">
#sideNavBox {
display: none;
}
</style>

But when you save the page layout, then load a page that uses this page layout in a browser you find that the left quick launch is still visible. Why?

Well, if you open the aspx file, in our case inline-page-layout.aspx in SPD (or Dreamweaver) you will see that within the PlaceHolderAdditionalPageHead Content Place Holder our inline style was converted to valid XML by SharePoint Design Manager and changed to:

1
2
3
4
5
6
7
<style type="text/css">
//<![CDATA[
#sideNavBox {
display: none;
}
//]]>
</style>

Wow, that won’t work. Most browsers will see the CDATA block and ignore what is there, meaning that browsers will not process the included css. Well this one stumped me for a while, but I found a solution I like. Replace the entire original <style> tag in the HTML file with the following:

1
2
3
4
5
6
<!--MS:<style type="text/css">-->
<!--
#sideNavBox {
display: none;
-->
<!--ME: </style>-->

Save the HTML page layout and open the associated .aspx page. You should see:

1
2
3
4
5
6
7
<style type="text/css">
<!--
#sideNavBox {
display: none;
}
-->
</style>

Perfect, that browsers can interpret. Nifty huh?

Explanation:

What we are doing is replacing the simple <style> tag with the new Design Manager Markup comment tagging. These Markup Start (MS) and Markup End (ME) tags allow us to pass any HTML/asp.net tag directly to Design Manager without being converted to XML first. This allows us to send the inline styles to the associated .aspx untouched. I add the <!—and –> tags before and after the actual style properties only because in a HTML editor such as Dreamweaver, they will not see the <style> tag because it is in a Design Manager comment tag, so I want the editor to also ignore my inline style content. You actually do not need the <!—and –> if you plan to only work in a code view environment.

Have you found another solution to this problem? Please tell me.

See of all of my SharePoint 2013 Branding Tricks and Discoveries.

0

Branding SharePoint 2013 Tricks and Discoveries

Much has changed in branding SharePoint 2013 when compared to SharePoint 2010. The Design Manager opens many doors yet new problems, complications and headaches come with it. How about Device Channels, pretty cool huh? There are also some great developments with SharePoint and Mobile. There have already been an outstanding number of community contributions explaining these improvements but in my dealings with Branding SharePoint 2013 I have come to learn a few tricks and found some interesting discoveries. Throughout scattered blog posting I intend to provide my list of introduction and basic tricks and discoveries I have learned that may help you Brand your SharePoint 2013 sites. I will update this blog post as new tricks are posted so as to provide a central index of these specific Tricks and Discoveries for Branding SharePoint 2013.

Trick 1: Inline Styles in Page Layouts in Design Manager

2

Responsive Web Design for SharePoint 2013 and SharePoint 2010

Recently I was interviewed by David Rubinstein of BZ Media regarding Responsive Web Design and SharePoint. If you do not know David, he is a great guy who you should meet at the next SPTechCon as he is the Event Organizer for SPTechCon held annually in San Francisco and Boston. Side note: PixelMill and I will be at SPTechCon this March 3rd-6th in San Francisco. Sign up before January 18th and save $400 and use the code “pixelmill” to save an additional $200.

Anyhow, back to the interview. David wanted to know more about Responsive Web Design and SharePoint. The conclusion he came to in his article, Going Mobile with SharePoint – Not so Fast was that SharePoint is not quite ready for mobile. I cannot disagree with David’s position and SharePoint 2010 and mobile had some major issues and although SharePoint 2013 includes Devices Channels, there are still holes that can be filled. In that regard, I and a few others are trying to help shore up certain aspects of SharePoint 2010 and SharePoint 2013 in regards to mobile.

Over the last few quarters I have been a big proponent of Responsive Web Design, and its parent theory Adaptive Design, to help provide an interface to SharePoint that is mobile friendly. With the release of the SharePoint 2013 Preview back in the middle of 2012 and then the subsequent release of SharePoint 2013 RTM a few months later we had the opportunity to see a new feature added to SharePoint 2013 to help with mobile interfaces, Device Channels. Device Channels look very promising for many users of SharePoint but with the need to create and maintain multiple interfaces for Device Channels to work well, and the fact that there are new mobile devices every month with different screen resolutions, Responsive Design still leads the pack in my opinion.

When I talked to David, I mentioned that Responsive Design and SharePoint (2010 and 2013) do not mix very well. There have been a few excellent examples of Responsive Design and SharePoint 2010 though including www.its.ms.gov, ariensco.com and www.gse.it/en/, but in general I see that Responsive Design principles will be difficult for many developers to implement in SharePoint.

I am happy to announce my latest CodePlex project that I started with D’arce Hess (@DarceHess and Gilda Spencer (@gildaspencer) to help solve this problem of Responsive Design and SharePoint! We just launched Responsive SharePoint (responsivesharepoint.codeplex.com) which has the aim of converting popular responsive frameworks such as Twitter Bootstrap and Zurp Foundation 3 to SharePoint 2010 and SharePoint 2013. By converting I do not mean just adding links to the frameworks within SharePoint, rather as complete an integration as we can so that SharePoint components such as the ribbon, navigation (metadata driven navigation in SharePoint 2013), page layouts, etc work in a Responsive manner. We also provide sample page layouts that already include responsive containers and web part zones as well. The documentation we have provided is pretty intensive as well. The idea is that any developer could take one of these converted frameworks and begin building a Responsive site in SharePoint 2013 or SharePoint 2010 today. Not bad huh?

As of now we have released Twitter Bootstrap with SharePoint 2013 and we are about to release Bootstrap for SharePoint 2010. We are halfway through Foundation 3 and SharePoint 2013 as well, you can expect that in a few weeks. We are also looking for more developers that want to help us out. I know there are pluses and minuses to each framework so if you have another framework that you want to convert to SharePoint, we would like to work with you so as to increase the CodePlex offering.

Download the CodePlex package and tell me what you think!

4

My Good Girls

Yesterday I lost two treasured companions of many years. The first, my closest companions of over 12 years was known to many of you as Nila. For those of you that did not know her, she was a beautiful, loyal, friendly, energetic, perfect German Sheppard. I was introduced to Nila by German Sheppard Rescue of the Bay Area, now a part of the German Sheppard Rescue of Northern California. Nila was looking for a home and I was looking for her. We met when she was about 1 ½ years old in June of 2000 and were rarely apart since then. We went on hikes together, over 4000 walks, she joined me for any number of my snow skiing trips and other outdoor adventures. Whenever I went into the water, be in a pool, off my boat when water skiing, or taking a swim at a lake, she was sure to let everyone know. She would even join me in the water sometimes. She joined me at the office every day for the last ten years too.

She traveled across the country with me multiple times while I lived in Indiana, we traveled the state of California a few times and she would always join me on two to four trips to Los Angeles every year as well. We got to know the rest stops very well. She loved car rides.

Nila seemed most happy when she was around other dogs. She loved to chase the dogs that were chasing a tennis ball. Nila always enjoyed it when we watched our friends’ dogs because she would have a playmate for the next few days.

Nila’s age started to catch up with her when she was around nine or ten. We still went on two walks a day and she still loved the dog park, she just slowed down a little. Around February of this year, just as she was turning thirteen, we started to notice that she wasn’t as sure on her feet as she used to be. We started to take slightly shorter walks and she ran less. In August I took her in for a senior checkup and she was diagnosed with Degenerative Myelopathy, a progressive disease of the spinal cord in dogs. Ok, fine, there isn’t anything we can do to stop this, but she and I will fight it together. I got her a doggie wheelchair so we could still go out on walks, I helped her go outside a few times a day, I moved her bed downstairs because she could not navigation the steps any longer.

A few weeks ago things took a turn for the worst. Although she still enjoyed eating, she had lost over 30 pounds. She no longer enjoyed walks, so at her request we stopped trying. She kept fighting though, she didn’t want to leave me, so I stayed by her side, carrying her outside a few times a day so she could do her business, carrying her to her food, doing the best I could to keep her comfortable.

Yesterday, the day that every pet owner dreads was upon us. Our battle came to an end. It was time. I had to make the hardest decision that I have ever had to make. She had given me so much throughout her life, so many experiences, so many memories, a faithful companion through the ups and downs of my life. The least I could do was let her pain and suffering come to an end, the pain and suffering she endured for me. It was time to let her go. I could no longer watch her suffer on my accord. I knew she didn’t want to leave, but I had to make the decision that she could not make herself. Friday night she got the meal of her life, all dog treats. She knew what was happening though. Although she couldn’t move herself, she had to visit all of her favorite resting spots. If I left the room she would drag herself to the one step she couldn’t climb and whine until I came back. She hadn’t done that before to that extent. She was telling me what had to be done. Saturday morning Robin and I took her on her last car ride. Nila and I walked gracefully into her final room and we laid her down.

I was having a real hard time holding myself together. Luckily Robin was beside Nila and I the whole time and I do not think I could have done this without Robin. Unfortunately Nila noticed my anxiety and she knew what was going on. She made sure that I knew that she did not want to leave me, and that was hard. But I couldn’t let my selflessness let her suffer for me any longer. Robin and I stayed by her side, her head in my lap while she passed. The most difficult experience of my life was being there watching my Nila end but there was no way I was not going to be there for her when she was always there for me. Her whining slowed then stopped. Her last visions where of Robin and I, her last smells were of my hands on her head.

I miss my good girl, my Nila. I have never shed so many tears. There is a hole in my heart, my soul and house that will never be replaced. I know that you are in a better place now, a place with no leashes, endless lawns, countless friends for you to play with and all of the dog bones, cheese and other treats you can eat. I will always love you and will miss you forever. Your ashes will be spread over your most favorite place, the dog park that I took you to so often when you were young. Good bye for now my sweet Nila.

My other companion I knew slightly longer less, but was important to me just the same. She was Amei, my fourteen year old-ish American Short Hair (you would not have guess it though), black and grey cat. I was fortunate enough to have been able to share time with Amei with my brother and sister-in-law. She was the friendliest cat I have known. She would purr whenever anyone was holding her, which she loved. Even when she wasn’t exactly happy, as in when she was getting a bath, she would still purr. When not sitting in the sun, she would want to sit on the nearest lap, getting petted and loved. She and Nila got along great although it took Amei a few weeks to get used to this large furry thing that wanted to stick its nose in her face.

A few years ago Amei was diagnosed with feline diabetes. She took her insulin like a champ and never complained. She still enjoyed sitting in the sun and would often go outside and roam her territory. The last few months have been rough on her though. She started eating much less and didn’t want to leave her little bed behind the kitchen. I had to move her food, water and litter box so that they were close by as she didn’t have the energy to move. She stopped coming out each morning to sit on my lap when I ate breakfast or joining us in the living room when we would watch TV in the evening. I did everything I could to keep her comfortable and happy but she too was telling me it was time.

Robin and I drove her to the Cat Clinic of Davis, Amei on my lap the whole time. She never left my embrace; she did not stop purring until the end. We laid her on the table, Robin and I holding and petting her, her purring nonstop. Then it was over. Her purring stopped and her head drooped. Her last vision was of Robin and I looking at her, helping her on to her next journey.

Amei was buried in her favorite corner in my backyard, a place she used to like to sit, soak up some sun and lord over her domain. Robin and I left with her a power cord and she favorite toy she used to like to chase, as she never met a power cord she didn’t want to chew, nor a little feather on a string she didn’t want to pounce.

I do not think I will find a cat as friendly and as cuddly as Amei. I am honored to have known her and been able to care for her.

I can’t believe they are gone.

I can still see Nila lying in her favorite spot at the bottom of the stairs and when I look outside I see her playing in the back yard. When I look at the couch I see Amei sitting there looking up ready for me to join her so she can jump on my lap. My breakfast feels less filling without Amei purring away. They each had long, and I like to think, very enjoyable lives. Both went so peacefully and quickly. I am fortunate to have known them both and will always miss them.

0

SharePoint Saturday Honolulu 2012

I just got back from SharePoint Saturday Friday #SPSHNL and must say it was an excellent SPS event. I want to thank the organizers, sponsors and most importantly the attendees for another excellent day fill will all things SharePoint. Once again PixelMill was proud to be a sponsor for this SPS, and we look forward to seeing you all again next year, or sooner maybe?

Thank you also to everyone who attended either or both of my sessions, “Beyond Branding SharePoint – SharePoint and Today’s Web” and its followup, “Enhancing SharePoint with Responsive Web Design”. A special thanks to those of you that had to sit on the ground or stand through my second talk. It was a pleasure to have the opportunity to share my knowledge of SharePoint and Responsive Design to packed rooms. I hope you found both to be educational as well as entertaining. As promised I have posted my slidedeck to slideshare.net, you can view them from SlideShare.net at your leisure.