Today I am going to demonstrate one way to convert an inline navigation to a mobile navigation using media queries.

View an example here.

Or from this:

To this:

We start with a basic unordered list.

   <ul class="falafelConNav">  
    <li><a href="#"> About </a></li>  
    <li><a href="#"> Agenda </a></li>  
    <li><a href="#"> Sessions </a></li>  
    <li><a href="#"> Speakers</a></li>  
    <li><a href="#"> Sponsors</a></li>  
    <li><a href="#"> Venue</a></li>  
    <li><a href="#"> Register</a> </li>  
   </ul>  

The idea is to change the css when the screen reaches a certain size, in this case 480px. to do this we use a media query like ...

Here is a simple step by step tutorial on how to create and register a theme in Sitefinity. First go to: Administration > Settings



Then click on : Advanced



Next go to: Appearance > Frontend themes.



Then, name your new theme and enter the path.
If you don't know the path you can copy the path of another theme in your project and replace the last part:

Save Changes

Now you can create the theme, got to: Administration > File structure.
Next, navigate to your App_Themes folder:



Create a new folder, and name your theme.

Inside your new theme folder create ...

You can mix-match most with different color/background image, some are fixed.
I will be updating this file regularly, so check back soon!

You can Download the files here.

In a previous post, I showed how to create JavaScript widgets in Sitefinity using shared content blocks. This enabled you to create widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. It was so useful in production and we received a lot of good feedback from the community. This is why we felt it deserved to evolve more and began creating a full-fledged Widget Builder for Sitefinity!

The idea is simple… when writing a web-based widget or control for a website, you need a mixture of HTML, CSS, and JavaScript. A portion sometimes goes ...

Navigation is one of the most important functions in any CMS. It is the doors you scatter throughout your site so your visitors can get around. It is no wonder there is an entire eco-system of menus... drop downs, horizontals, verticals, responsive design, tabs, panelbar, tree-view, content slide-outs, and the list keeps growing. This is one the most common requests for any web designer or developer. Just search the Sitefinity forums and you will see :)

The problem with using the Sitefinity navigation widget is that you have little control over the HTML that is rendered for the menu. ...

When building a full-featured MVC web site (or any web site), it is likely that you will have lots of JavaScript and CSS resources.  In addition, when you are using 3rd-party libraries, you can often get "minified" versions of the files, but you may end up with a handful or even dozens of separate js files.  It is important to reduce the load times of these files as much as possible.  There are a few concepts that help speed up page loads:

1. Minify files: remove unnecessary spaces and line breaks so the file size is as small as possible.
2. Combine ...

In case you haven't heard.. JAVASCRIPT IS MAKING A COME BACK!! And it is not the same JavaScript you fiddled around with in the pre-AJAX era. It has become reborn with the help of HTML5, mobile, and even Windows 8 (see Create your first Metro style app using JavaScript). Understanding JavaScript is becoming essential and can no longer be dismissed as a "weakly-typed, toy language with no compilation checks," but instead as a versatile, dynamic, cross-platform language.

Before jumping into code and learning JavaScript, I want to give some background of its purpose. It is important to know ...

Stretching a RadGrid to 100% of the browser height can show as "squashed" when the grid is AJAX-enabled. Even without AJAX involved, stretching RadGrid requires setting the grid Height to "100%" and the Height style of all parent controls to "100%".  Setting RadGrid Height alone outputs this disappointing view where the data is squashed to a single text line.

You'll see this same "compact" view of the data in IE, FireFox ,Chrome and Safari. Add the style below to set HTML, Body and Form tags height to 100% and hide margin, padding and scrollbars.

<style  type="text/css">
    ...

Firefox closely follows Javascript and CSS standards better than any other browser. For this reason, I code against Firefox as my primary browser, then apply necessary changes to other browsers. This is in spite of Internet Explorer being the most popular browser (this may change one day) and my love for Chrome.

Another compelling reason to use Firefox for your web development is because of the unmatched add-ons. I am not just talking about any add-ons, but add-ons that makes you a more productive developer. Those are the kinds of add-ons I would like to cover in this ...