Porting an HTMLTemplate in to Kentico

Back in March I published a post entitled 'My Kentico Design Workflow". I did this just to show an example of one designer's workflow with Kentico and the thinking behind it. I have decided to go into a little more detail on this, and actually show how some of the features in Kentico work in a design workflow. I also decided that screencasts would be the best way of doing this.
So I have started a series of screencasts that go over porting an HTML design into Kentico CMS. So far I have three of these screencasts done. I recorded these using Tech Smith's  program Jing. I uploaded them to screencast.com. I like their format better than YouTube or Google Video. You can also find these on YouTube.

Part One of the series covers taking a complete HTML design with page code and CSS and creating a Master template while preparing for creation of page templates, navigation ,web part containers and transformations.

Part Two covers preparing the CSS and placing it in Kentico and getting it assigned to your site.

Part Three covers creating the page layout for the inner page templates and adding pages to the site using the layout.

There are three so far and I will have more coming soon. For now I am keeping them brief, under five minutes. I would love to hear what everyone thinks of these as this is a new sort of endeavor for me.

If you like these, stay tuned  - there will be more.....

"Hybriding" in Kentico

In this article I will introduce a new approach I have been using in Kentico configurations. This particular case involves a slider I configured for the LiveAir Networks site. The task seemed pretty straightforward in the web 2.0 world. I wanted to create a billboard banner for a home page that rotated through slides that included photos, graphics text and an action button. Of course, the site is in Kentico CMS and best practices would dictate that the slides be editable and configurable and html text would be nice for SEO. The first option that came to mind was data driven flash. I have done a similar thing with xml datadriven flash - http://tinyurl.com/ycvnpw6 . My problem in this case is that the client wanted to avoid Flash for a variety of reasons. The next option I looked at was one of the really nice sliders available in the MooTools or JQuery library. The problem with this approach would be making it easily editable by the user. After some serious brainstorming I came up with an approach which I will dub"Hybriding". In this approach I used native Kentico Webparts, CSS and Graphics to produce the results. What I am about to explain is how I ended up with the banner that went on the site's home page - http://tinyurl.com/liveair.

[screenshot of page]

The Web part I chose for this task was the Scrolling Text Web part. That may sound confusing, since there are graphics in this configuration. The reason I chose this over the image slider was to have easily editable text. It is possible to configure this control to any size you want, so all I had to work out was getting the photo image and the action button in.  I configured the Web part to show the Document type CMSArticle, the reasons for that will become apparent. I knew what size the container had to be so I wrote a Custom Transformation which I named CMS.Article.ScrollingPreview and a Web part container which I named Banner
Slider.

I took a look at the code for the default Article transformation:

 <h1>
<%# Eval("ArticleName") %> </h1>


<%# IfEmpty(Eval("ArticleTeaserImage"), "", "") %>
<%# Eval("ArticleText") %>

Then in the CMS Site Manager I built the new one:

<div style="background: #fff url(<%# GetFileUrl("ArticleTeaserImage") %>) top left no-repeat; height:250px; width:565px;">
<div class="scrollingpreviewtxt">
<h2>
<%# Eval("ArticleName") %></h2>
<p class="content"><%# Eval("ArticleTeaserText") %></p>
</div>
<div class="buttonimg">
<%# Eval("ArticleText") %>
</div>
</div>

As you can see to get the photo graphic in I use an outer div with a background image which I pulled as the Article Teaser Image. I used inline style for this so that I could put the macro in the style - I wasn't sure this would work, but it did. Now the user can edit the image. Of course I had to build special images with white space for the text to fall on to with a nice fade effect.  Next comes an inner div to hold the title and text, all of which get their styling from the CSS already in place. The CSS for the transformation is:

/*#Transformations/Scrolling Preview#*/

.scrollingpreviewtxt /*inner div to hold the text*/
{
width:240px; 
height: 220px; 
padding-left: 20px;
}

.buttonimg /*the button*/
{
position:relative;
bottom:10px;
left: 435px;
width: 85px;
height: 30px;
background:transparent url(/App_Themes/liveair/images/reg_button.png) top left no-repeat;
padding-top: 7px;
margin:0;
float:left; 
text-align:center;
font-size: 12px;
font-weight: bold;
}

.buttonimg a, .buttonimg a:hover /*needed to add this to the button hover - it inherited the rest*/
{
font-weight: bold;
}

One sneaky thing I did was using the Teaser text of the Article for the text in the body of the slide and the
Article text for the text in the button, wrapping it in the buttonimg div to make it an action button. Now the
client has a slider that they can edit the text, image and button text on from an easy form interface and easily
add slides from the CMS desk. How cool is that!

To hold it in place and give it a border a simple Web part container containing this div id:

#photobox
{
position:relative;
top: 0;
left: 20px;
width: 565px;
height:250px;
margin: 0;
background:#eeeeee;
border: 2px #cccccc outset;
padding: 0;
float: left;
clear:both;
} 

All set!
Later I will do a post on a "hybrid" control using the native Kentico repeater wrapped in some Mootools javascript to create a slider with navigation buttons and text with links, then on to configuring JQuery UI for CMS desk editable tabs populated with articles. Stay tuned!