Archives for CSS

SharePoint 2013: Generate dynamic content using XSLT and a comma-delimited string

In SharePoint, the Content Query Web Part uses XSLT templates to display the results of each query. This is normally a fairly straightforward process (for XSLT). For an example, see the “Promo boxes” demo I wrote a while back. There’s one area, though, where SharePoint lists and XSLT collide: Checkbox columns. If you have a column in SharePoint that allows multiple choices, when you grab that column data in XSLT, SharePoint sends the data in a string that looks like this: ;#Choice1;#Choice2;#Choice3;# Just to display that in a human-friendly way, you would have to run it through the translate function
Read More

Bootstrap radio buttons and checkboxes in columns, with contextual text fields

We recently did a project with the following requirements: Touch-friendly interface (translation: big touch targets); Bootstrap; Radio and checkboxes need to highlight when selected; When a radio button or checkbox is selected, sometimes a little additional information is required. See the demo to get a clear idea of what I’m talking about. To accomplish this, we did several things: Used Bootstrap “radio-inline” and “checkbox-inline” classes; Wrapped each radio/checkbox in a label, styled the label to look like a touch target, and set it so clicking on the label selected the radio/checkbox. Created a “column” class to make the labels form
Read More

Drag and drop sorting of table rows in priority order

A common design pattern is making choices from a list, and then adding those choices to a table of results. Often the table will use some sort of Javascript plugin — Footables, Datatables, etc. — to provide sorting and searching functionality. But what if you want the results in a table, and the only extra you need is a quick way to sort the table into a prioritized list? And you want to do it using a touch-friendly drag/drop interface? Here’s a simple way to do that, using jQuery and jQuery UI. Check out the demo to see it in
Read More

Clickable labels that highlight when selected

I’ve been designing a touch-friendly form for one of our clients. One thing we wanted to do was make checkboxes and radio buttons easier to tap, and clearly show what has been selected. A little bit of CSS and JavaScript did the trick. Check out the demo to see it in action. This example uses Bootstrap classes, so you can drop these snippets straight into your own Bootstrap-based site and it should work just fine. HTML     <form id="testForm" class="form-horizontal" method="post">     <div class="form-group">       <div class="col-md-4">         <label class="radio" for="option-0">           <input name="options" id="option-0" value="1" type="radio">           Option #1
Read More

Recreating tile view using Display Templates

A new feature of 2013 are the metro-style tiles. Every new team site has them as a banner on the homepage. To create your own tiles you are limited to the promoted links app or the Announcement Tiles feature. I wanted the ability to use the tiles in my search results and other areas as needed. I have create a display template that will allow you to just that, with any type of content within SharePoint. The solution consists of 3 parts: Display Template JavaScript file (Used for moving panel on mouse-over events) CSS file for rendering the tile correctly.
Read More

Custom promo boxes in SharePoint 2013

In SharePoint 2013, it’s fairly easy to set up a list/CQWP combination that gives users a surprising amount of control over the layout and presentation of promo boxes. For instance, the setup I’m about to describe produces these variations, among others: The user is able to upload the background image, write the headline and text, and specify some layout variations: Where the text appears in the box (top, left or right); What color the text is (light or dark); Whether there is a transparent background behind the text. What you need A list of promo items A custom XSLT template
Read More

Remove default text styles from SharePoint 2010 dropdowns

In my article on custom rich-text-editor (RTE) styles in SharePoint 2010, I noted that while it’s easy to add styles, or to wipe out all the default styles and replace them with your own, it’s not easy to modify the list of default styles — Remove a few but keep most of them. Indeed, the simplest way to do that is to copy all of the default styles into your custom RTE stylesheet, assign them a new prefix, and then delete the ones you don’t want. This is both time-consuming in development and code-heavy on the client side — nearly
Read More

CSS: Weird inline-block behavior

In CSS, inline-block is an odd animal — neither inline, nor block. Further, it comes with its own set of rendering rules that can sometimes lead to unexpected results. Take the following example: http://jsfiddle.net/aSzaE/ We have three nearly identical rows. Each consists of two inline-block divs sitting next to each other. Both have fixed widths and heights. One is 30 pixels deep; the other is 150 pixels deep. The only difference between the lines is the content of the bigger div: In the first row, it has no tag; In the second row, it’s wrapped in a <span> tag; In
Read More

Bug fix: putting a background image on a table row

I came across this bug today, and the solution was difficult enough to find that I thought I’d share. The problem If you put a background image on a table row, it works fine in Firefox and modern versions of IE. But in Chrome, the image ends up being applied to each child <td> of that row. The solution Add the following CSS to your tr: tr { float:left; width:100%; } The float fixes the bug, and the width setting makes sure the <tr> stretches the full width of the table.
Read More

An example of SharePoint responsive design

We recently went live with a responsive retrofit of a complex SharePoint site: the website of Tennant Company. Their site looks like this at desktop resolution (click the image for a larger view): It looks like this on a small screen: You can see the responsive styles in action by resizing the site in your desktop browser: As the browser window shrinks, the page changes. The conversion used a bunch of techniques I’ve discussed before. For instance, their service-plan grid uses faux tables in place of real tables. On their product category pages, category tiles collapse down to just their
Read More