Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

Creating gadget-like blocks for Windows Home Server 2011 web add-in user interface

To keep user interface of your Windows Home Server 2011 (WHS) web add-in similar to other parts of UI you may need styled blocks like shown on WHS web interface home page. In this post I will show you HTML mark-up and CSS you need to create your own gadget block.

Example of gadget-like block

WHS YouTube help blockHere is the example of custom gadget-like block from the UI of my WHS YouTube Downloader. There is no out-of-box control or some other UI component you can use on different pages that renders you simple area to show some custom content.

I extracted mark-up and styles of gadget and made my own fixes to make block look nice. Although I’m not very happy because of massive use of tables my solution still works and it is simple to use.

Mark-up for gadget-like block

Here is the HTML mark-up for gadget-like block.


<div class="Homepage-GadgetBoxBase Homepage-GadgetBox My-Sidebar">
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetTopRow">
                <td class="Homepage-GadgetTLCell"/>
                <td class="Homepage-GadgetTMCell single-line">
                    <a title="Title link description">Title</a>
                </td>
                <td class="Homepage-GadgetTRCell"/>
            </tr>
        </tbody>
    </table>
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetMiddleRow">
                <td class="Homepage-GadgetMLCell"/>
                <td class="Homepage-GadgetMCell">
                    <div class="My-Gadget-Content">
                        Content here
                    </div>
               
</td>
                <td class="Homepage-GadgetMRCell"/>
            </tr>
        </tbody>
    </table>
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetBottomRow">
                <td class="Homepage-GadgetBLCell"/>
                <td class="Homepage-GadgetBMCell"/>
                <td class="Homepage-GadgetBRCell"/>
            </tr>
        </tbody>
    </table>
</div
>

You can wrap this box to some base user control and output all container mark-up around inherited controls when render method is called.

Fixing styles

To get the gadget-like block to be rendered correctly we need some additional styles. Looking at source of WHS home page we can see that all gadgets organize their own content containers styling. Here are styles I use for gadget-like block shown above.


<style type="text/css">
.youTubeDownloaderButton
{
   
background-color:rgb(220,227,168)
;
   
border: 1px solid green
;
   
color: black
;
}    
.My-Gadget-Content
{
   
margin-top: 12px
;  
   
margin-right: 12px

   
margin-bottom: 0px

   
margin-left: 12px
;  
}
.My-Gadget-Content li
{
   
margin-left: -20px
;
}
tr.Homepage-GadgetTopRow
{
   
cursor:default
;  
}
.My-Sidebar
{
   
float:right
;
   
width:300px
;    
}
</style
>

You can create your own CSS file for style fixes like this and provide with your add-in installer.

Comments

Alexander said:

Great article , I am so glad that I have visited your site.I was looking  for this  information.

# February 29, 2012 2:29 PM