Kategoriarkiv: css

Automatic minifying of CSS (and LESS) and javascript using Web Essentials 2013 in Visual Studio 2013

We just recently started upgrading to Visual Studio 2013 in the project I’m currently working on, and with VS 2013 comes Web Essentials 2013, an extension that’s truly essential for web development.

Now, I like to use the LESS framework when writing CSS, and have been using Web Essentials 2012 for some time. One of the nice things about LESS and Web Essentials 2012 was that it automatically generates a minified version of the CSS file for you, and that’s pretty sweet.

Now, one of the first thing we noticed in VS 2013, was that modifying and saving our LESS files no longer generated a minified version of that file.

No mini

At first we thought it might be a bug, but when exploring the toolbar menu for Web Essentials (new to 2013), we found an interresting button:

Toolbar menu

Pressing this created a settings file and added it to the solution. In this file we found a number of awesome stuff. For example, you could turn the automatic generation of CSS files on and off. And even better, there was even an option to do the same for our javascript files!

Settings

Now we were getting our minified CSS files just like before, and also having the same behavior for our javascripts!

Yes mini

Before, we used another VS plugin for generating our minified javascripts, but now we no longer need to. Everything is taken care of using Web Essentials 2013, and modifying the settings file.

Perhaps the best thing about the created settings file is that it is automatically added as a solution file, and picked up by the source controller. So once configurated, we can just check in the file and let everyone in the team get the correct behaviour automatically.

Now, I may be ignorant of what was possible in 2012. Perhaps this settings file was available, and perhaps they had support for minifying javascripts. But since Web Essentials are now more visible than before (having its own toolbar menu), finding these features was easier, and took only a few minutes to figure out, without googling for help or reading any Product Updates info. And to me that’s pretty sweet! =)

nav

How to build a WordPress collapsible subpages menu with Bootstrap

I like Bootstrap and I like WordPress, so it’s a really good day for me when I get to combine the two. Which I’ve had the opportunity to do on a recent project we’re doing. I could go on and on about the possibilities of this awesome CSS framework and I probably will at some point, but right now I thought I’d share how I used the collapsible accordion in Bootstrap to display a particular page’s sub-pages including one level of hierarchy. A picture of the end result:

nav

Requirements

Bootstrap’s collapsible requires its own JavaScript, which in turn requires jQuery, so make sure you enqueue both of those in your functions.php . Here’s how I added bootstrap.js :

Of course the  bootstrap.css  is also necessary.

Function for creating the Bootstrapified subpage list

The markup for the accordion differs a lot from what you get when wp_list_pages is called, so I had to do a custom function to list all the pages hierarchically. What I wanted in the end was to list children and grandchildren of the root page. This meant I had to find the oldest parent and then create the markup to list its children. I also had to find all the children of each of the previous children and create the correct markup for those. But in this case that was it, only two levels of navigation was needed.

Here’s the function I ended up with in my functions.php :

I build the resulting markup step by step by first creating the surrounding elements. Next step is to fetch the correct pages, and I only wanted the first level of pages that was children to the root page, no grandchildren were wanted.

It’s the argument 'parent'=>$oldest_parent that determines that only direct descendants are retrieved.

In the two nestled foreach-loops the different pages’ HTML is rendered. Different markup is created depending on if there are granchildren or not. The counter is to make sure that there are unique IDs on the panels.

 Displaying the result

Short and easy:

Making it look pretty

Arguably the most important part. I wrote it in LESS syntax, but the resulting CSS can be found here. This adds all-CSS triangles to act as arrows and makes them fancy and rotatey.

And that’s it. Hope it’s of use for all y’all internetz people. Give a shout if something is odd, to praise me or correct me, or if you have questions =)

Want to create a navigation menu using Bootstrap’s navigation? I recommend the wp-bootstrap-navwalker, it’s worked out great for us!

 

Complete walkthrough on Composed Looks in SharePoint 2013

In SharePoint 2013 the creation and application of themes has been revamped with the intent of making it easier to use, as well as more powerful (now including optional fonts and images). The new concept added is the Composed Look, a combination of a master page, color scheme and optional fonts, as well as an image. Using the design manager even a non-technical end user could create a complete design package, ready to deploy. What’s even better, you can mix and match parts, taking color scheme from one theme and the font from another, all from a web based wizard.

Although there is some material written already, much of it on Elio Struyf’s blog, I still struggled to make the various code snippets I found work together. With this article on SharePoint theming I hope to add to the available documentation and examples, as well as giving a light tutorial on creating a composed look to be used with a custom master page which includes custom elements and CSS.

To use the examples I give in this article you need to have the SharePoint Server Publishing Infrastructure (this in turn requires SharePoint Server, not Foundation) Site Collection feature activated, as well as the SharePoint Server Publishing Site feature.

SPColor

SharePoint 2013 color schemes are defined in the .spcolor file type. The easiest way to get started is grabbing an existing palette from the hive, in my case found at

Alternatively you can grab one from /_catalogs/theme/15/ on a running site. Rename it to your wishes and take a look inside. It’s a pretty straight forward XML file, where each color is defined using hexadecimal. It does not handle RGB, and has an uncommon format for defining transparency. To create an 80% transparent black background (black is #000000) you would use CC000000. The two first characters define the transparency, the rest is a regular hexadecimal color.

Once you have your .spcolor edited to your liking, you’ll want to check out its effects on a live page. The fastest way would be to upload the .spcolor file to /_catalogs/theme/15 library. After this, it should be available as a color scheme in the Design Manager.

SPFont

Just like with the SPColor file, we can define our own fonts using the .spfont file type. It can be found in the same place as the .spcolor files on both hive and live sites. The XML is slightly more involved than the color scheme one, but far from complicated.

Looking at the existing font scheme files, you’ll see that it contains a list of fontSlots, where each fontSlot is given a name. The fontSlots in turn contain s:latin, s:ea and s:cs elements. These correspond to western, east asian and complex script languages. All three are required.

If your typeface is standard, you can simply stick it in there, but if you have your own font it requires a few extra steps. First of all, the s:latin element requires a few more attributes, namely svgsrc, eotsrc, woffsrc, ttfsrc, largeimgsrc and smallimgsrc. You have to set all of them if you set one. Just give them empty strings if you don’t want them. Each src attribute corresponds to the URL where the font will be hosted. The standard location will be /_layouts/15/fonts/ and maps to:

Note that the eot-file is required to display the font in Internet Explorer 8 and earlier. A second issue is that Chrome will not handle anti-aliasing correctly for woff/ttf files. It only shows svg fonts well. But sadly, it will use the first one given to it and SharePoint wont let you choose the order. If you have a working fix for this, please email me!

Custom Master Page

Just like the .spcolor file, creating the custom master page simply involves copying an existing one. I went with the Seattle file, but Oslo should work fine. You can grab it from the hive at

or on a live site at /_catalogs/masterpage/Forms/AllItems.aspx. Once copied and renamed, you can upload it  to the library at that URL. In order for this master page to be available as a Composed Look in the Design Manager, we also need a preview page. I will go into this a bit more later, but for now, make a copy of the corresponding preview file, rename it as you did the master page, and upload it appropriately.

If you want to make sure you are seeing your custom master page in the next step, add an element or just some text somewhere.

One simple way to set the master page is to open up the design manager (remember that you need to have activated the Publishing Server Site Collection feature, as well as the Publishing Site feature, for this to be available), choosing any Composed Look from the pre-installed looks, then selecting your custom master page in the Site Layout select menu. Apply this Composed Look and check it out, you should see your custom elements/text. You can also pick your color scheme from the color scheme select menu, but since they don’t have names, it may be hard to make out exactly which one is yours! Use the preview window to the right of the menu to determine what theme is correct.

Composed Look

In order not to have to generate this composed look by selecting the appropriate color scheme every time you change the theme, you can save a specific composed look. To do this, in Site Settings, under the Web Designer Galleries header, you should find the Composed Looks link. Clicking on it will take you to a list containing all the saved themes. Click new item and fill in the information to store your specific combination. Give it a useful name, as this will show up in the gallery.

Custom CSS

In order to accommodate all these different color themes SharePoint actually “compiles” all CSS files it has access to and replaces colors where the appropriate comments exist. For this to work, your CSS file must be registered on the custom master page using a directive like this:

As an example, in order to replace a color in a CSS file with the color defined by the theme’s color scheme, you use the special “ReplaceColor” directive to the SharePoint theming engine. It looks something like this:

If properly run through the SharePoint theming engine, the background color will not be black, but rather whatever color is set in the color scheme (.spcolor file). In the same way, “ReplaceFont” handles fonts defined in the .spfont file:

Master Page Preview File

Now, a small gotcha. If you look at your master page preview file, you see it has a very custom format. The one thing that stands out is on the first line, the default color scheme. What caused me three days of headaches is my assumption that for a certain master page, the intended default .spcolor file should be here. This however causes a slightly surprising thing. The CSS files included in the master page will not be compiled when this .spcolor file is chosen in the composed look. Any replacecolor directives will be ignored. This is only for the .spcolor defined in the preview file. Any other color scheme chosen in the design manager will trigger the appropriate process. This of course works for the built-in master pages as the default color scheme is already defined in the CSS files. No replacements are required.

For example, the Seattle master page preview file defines Palette001.spcolor on its first line. If this combination is chosen, it will still render correctly, because all CSS files associated with this master page have these colors as default. The ReplaceColor directives are ignored.

If you, like me, have added custom elements and custom CSS on the master page however, your own files will also not be compiled. Even worse, if you’ve set your custom .spcolor in the preview file, you will be tearing your hair out trying to figure out why all other themes work but yours.

A simple solution is to define no .spcolor file on top of the master page preview. SharePoint handles this perfectly fine and all color schemes will trigger the replacement process in the SharePoint theming engine.

Putting it all together

Finally, let’s build an example project. We’ll create a color scheme, a custom master page with preview, a custom CSS file with ReplaceColor and tie it all together in a composed look.

Using the files we’ve found so far, we can put together a project that looks something like this:

Composed Looks Example Project

Composed Looks Example Project

The color scheme and master page are provisioned through the feature:

Declarative Feature

Declarative Feature

We create our composed look and apply it using an EventReciever.

Sources:

http://tommdaly.wordpress.com/2012/12/19/deploying-a-custom-composed-look-in-sharepoint-2013/
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://www.estruyf.be/blog/how-to-create-a-master-page-that-is-available-for-the-composed-looks/
http://www.estruyf.be/blog/creating-a-new-color-palette-for-a-sharepoint-2013-composed-look/
http://spitems.wordpress.com/2011/01/17/using-theme-settings-in-style-sheets/

Documenting the SPColor file, making composed looks easier to use

Recently a coworker and I started working with the Sharepoint 2013 spcolor file, part of Sharepoint composed looks, and I thought I could share our findings in hopes of helping someone else in the same situation.

Using Sharepoint’s ”Change look and feel” you can, as a user, change the colors on your site. You can select an existing color scheme which turns the banner pink and font yellow, even though it’s unclear why you would want that. But how does it work, where do the colors come from? It all starts with a file type called spcolor. It is an XML file where a name and a hexcode are combined, like this:

These values can then be used in a CSS file. You declare that an element should use the color from the spcolorfile instead of writing the hexcode directly in the CSS file. For syntax reasons you need to specify a default color and it all looks like this:

This means that all elements with the class ‘some-class’ will be assigned the font color #262626 and not #000000. The ReplaceColor comment replaces the specified value with the corresponding value from the spcolor-file.
This can be used when creating your own themes, or in another word: composed looks. A custom made CSS file, as well as Sharepoint’s own CSS files, can use ReplaceColor .

And this is where we hit our firt road block, the lack of documentation. Although the names in the pcolor file are somewhat descriptive, it is impossible to tell exactly which elements they affect. There are, so to speak, some gaps.

We searched the spcolor file, looking for the selectors that used ReplaceColor and then we added those selectors as comments to the spcolor file in order to make it easier to use. It isn’t great bedtime reading, but I hope it can help to somewhat ease the process for future development of composed looks.

And here’s the result:

The spcolor file