Saturday, May 30, 2009

Easiest way to build connection string

Hey friends.
Most of the time, when a connection string is required, developers write it either manually, or use visual studio wizard from somewhere take make visual studio slower. So here is a quick fast way to do it. Let's build it more faster and easier way.
  • Right click on desktop and create a new text document, say cn.txt
  • Open that document and save it with .udl extension, cn.udl.
  • save and close the file
  • you will notice the file icon is now changed
  • double click the icon.
  • that will open a connection string dialog, same as you see in visual studio.
  • choose provider, enter other details acoording to your provider and just test connection and click on ok
  • right click that file, and open it in notepad. The file will contain connection string.
  • Copy the connection string and use it anywhere you want.

Happy coding :)

Tuesday, May 19, 2009

skin updated - Nature 0.2 released

Nature skin updated
  • Nature 0.2 released
  • Submenu is fixed now
  • Header links are no top right aligned
  • link colors are fixed
  • container fonts for Head and SubHead are fixed
Enjoy the new version of this skin and tell me the issues with this.

Wednesday, May 13, 2009

Using JQuery to dynamically change dnn menu

Dotnetnuke released a new dotnetnuke menu provider some time back, and also released dotnetnuke 5.0 with inbuilt support of JQuery. When I started learning about new things in dotnetnuke 5.0, I wonder how we can use JQuery and new menu provider feature to dynamically change the menu. This leads me to a very basic simple implementation which I will share with all of you here.

So let's start building the sample right away:

  • Right click on Admin/Skins folder and add a new web control(C#), let's name it SwitchMenu.ascx

  • Go to code behind view and add this:

    protected void Page_Load(object sender, EventArgs e)
    {
    DotNetNuke.Framework.jQuery.RequestRegistration();
    }


  • Go to design view and add following:

    <a href="javascript:void(0)" id="lnkNavy">Navy</a> <a href="javascript:void(0)" id="lnkBlue" >Blue</a> <a href="javascript:void(0)" id="lnkOrange" >Orange</a>
    <script language="javascript" type="text/javascript">
    jQuery(document).ready(function() {

    jQuery('#lnkNavy').click(function(e) {

    if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
    jQuery('#menu').removeClass('menu_bg_blue');
    jQuery('#menu').addClass('menu_bg_navy');
    }
    else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
    jQuery('#menu').removeClass('menu_bg_orange');
    jQuery('#menu').addClass('menu_bg_navy');
    }
    });
    jQuery('#lnkBlue').click(function(e) {

    if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
    jQuery('#menu').addClass('menu_bg_blue');
    jQuery('#menu').removeClass('menu_bg_navy');
    }
    else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
    jQuery('#menu').addClass('menu_bg_blue');
    jQuery('#menu').removeClass('menu_bg_orange');
    }
    });
    jQuery('#lnkOrange').click(function(e) {

    if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
    jQuery('#menu').addClass('menu_bg_orange');
    jQuery('#menu').removeClass('menu_bg_navy');
    }
    else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
    {
    jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
    jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
    jQuery('#menu').addClass('menu_bg_orange');
    jQuery('#menu').removeClass('menu_bg_navy');
    }
    });
    });
    </script>


  • Go to your sample skin page and register the new skin object

    <%@ Register TagPrefix="PA" TagName="SWITCHMENU" Src="~/Portals/_default/Skins/Planet Aviator_0_1_0/SwitchMenu.ascx" %>


  • Now, let's add DNN Navigation control to the skin. Add this:

    <dnn:NAV runat="server" ID="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false"
    ControlOrientation="Horizontal" CSSControl="dnnBlueMenu">
    </dnn:NAV>


  • Let's add css for all the dynamic menu now:

    .menu_bg_blue {background-color:Blue;}
    .menu_bg_navy {background-color:Navy;}
    .menu_bg_orange {background-color:orange;}
    /*----------------------------------------------------------------------*/
    /* menu container css */
    .dnnBlueMenu {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
    .dnnBlueMenu_bg {margin: 0 10px 0 10px; height: 40px;}
    .dnnBlueMenu_left {}
    .dnnBlueMenu_right {}

    /* root menu css */
    .dnnBlueMenu .root {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Blue}

    /* general submenu css */
    .dnnBlueMenu .m {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
    .dnnBlueMenu .hov, .dnnBlueMenu .bc {}
    .dnnBlueMenu .m .mi {background-color: Blue;}
    .dnnBlueMenu .m .icn {padding-left: 5px; width: 20px;}
    .dnnBlueMenu .m .mi * {color: white; margin-right: 5px;} /* change * to .txt with latest webcontrols */
    .dnnBlueMenu .m .sel, .dnnBlueMenu .m .bc {}
    .dnnBlueMenu .m .hov {background-color:gray;}

    /* glossy rounded corners */
    .dnnBlueMenu .m .first {height: 30px;}
    .dnnBlueMenu .m .first .icn {} /*needed to hide TR/TD image tiling*/
    .dnnBlueMenu .m .first.hov {height: 30px;}
    .dnnBlueMenu .m .first.hov .icn {} /*needed to hide TR/TD image tiling*/

    .dnnBlueMenu .m .first.last {height: 32px;}
    .dnnBlueMenu .m .first.last .icn {} /*needed to hide TR/TD image tiling*/
    .dnnBlueMenu .m .first.last.hov {height: 32px;}
    .dnnBlueMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .dnnBlueMenu .m .last {height: 26px;}
    .dnnBlueMenu .m .last .icn {} /*needed to hide TR/TD image tiling*/
    .dnnBlueMenu .m .last.hov {height: 26px;}
    .dnnBlueMenu .m .last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .m .break .icn {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
    /*----------------------------------------------------------------------*/
    /* menu container css */
    .dnnOrangeMenu {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px;}
    .dnnOrangeMenu_bg {margin: 0 10px 0 10px; height: 40px;}
    .dnnOrangeMenu_left {}
    .dnnOrangeMenu_right {}

    /* root menu css */
    .dnnOrangeMenu .root {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: Black;background-color:orange}

    /* general submenu css */
    .dnnOrangeMenu .m {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
    .dnnOrangeMenu .hov, .dnnBlueMenu .bc {}
    .dnnOrangeMenu .m .mi {color: Black;background-color:orange}
    .dnnOrangeMenu .m .icn {padding-left: 5px; width: 20px;}
    .dnnOrangeMenu .m .mi * {color: white; margin-right: 5px;} /* change * to .txt with latest webcontrols */
    .dnnOrangeMenu .m .sel, .dnnBlueMenu .m .bc {}
    .dnnOrangeMenu .m .hov {background-color:gray;}

    /* glossy rounded corners */
    .dnnOrangeMenu .m .first {height: 30px;}
    .dnnOrangeMenu .m .first .icn {} /*needed to hide TR/TD image tiling*/
    .dnnOrangeMenu .m .first.hov {height: 30px;}
    .dnnOrangeMenu .m .first.hov .icn {} /*needed to hide TR/TD image tiling*/

    .dnnOrangeMenu .m .first.last {height: 32px;}
    .dnnOrangeMenu .m .first.last .icn {} /*needed to hide TR/TD image tiling*/
    .dnnOrangeMenu .m .first.last.hov {height: 32px;}
    .dnnOrangeMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .dnnOrangeMenu .m .last {height: 26px;}
    .dnnOrangeMenu .m .last .icn {} /*needed to hide TR/TD image tiling*/
    .dnnOrangeMenu .m .last.hov {height: 26px;}
    .dnnOrangeMenu .m .last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .m .break .icn {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
    /*----------------------------------------------------------------------*/
    /* menu container css */
    .mainMenu {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
    .mainMenu_bg {margin: 0 10px 0 10px; height: 40px;}
    .mainMenu_left {}
    .mainMenu_right {}

    /* root menu css */
    .mainMenu .root {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Navy}

    /* general submenu css */
    .mainMenu .m {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
    .mainMenu .hov, .dnnBlueMenu .bc {}
    .mainMenu .m .mi {background-color: Navy;}
    .mainMenu .m .icn {padding-left: 5px; width: 20px;}
    .mainMenu .m .mi * {color: white; margin-right: 5px;} /* change * to .txt with latest webcontrols */
    .mainMenu .m .sel, .dnnBlueMenu .m .bc {}
    .mainMenu .m .hov {background-color:gray;}

    /* glossy rounded corners */
    .mainMenu .m .first {height: 30px;}
    .mainMenu .m .first .icn {} /*needed to hide TR/TD image tiling*/
    .mainMenu .m .first.hov {height: 30px;}
    .mainMenu .m .first.hov .icn {} /*needed to hide TR/TD image tiling*/

    .mainMenu .m .first.last {height: 32px;}
    .mainMenu .m .first.last .icn {} /*needed to hide TR/TD image tiling*/
    .mainMenu .m .first.last.hov {height: 32px;}
    .mainMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .mainMenu .m .last {height: 26px;}
    .mainMenu .m .last .icn {} /*needed to hide TR/TD image tiling*/
    .mainMenu .m .last.hov {height: 26px;}
    .mainMenu .m .last.hov .icn {} /*needed to hide TR/TD image tiling*/

    .m .break .icn {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */


  • Okie, that's it, now we are ready for the test. As simple as that...


Further Improvements:

  • Add some personalization so that we can save this setting for all users seperately.


As I'm new to both JQuery and Dotnetnuke 5.0, I would like to know what more we can improve here

Thanks freednnskins.com for posting about my skin CASH

Thank you freednnskins.com
Thank you for appriciating the skin Cash and including it in your article about free dotnetnuke skins. Thanks very much.

Who is using skins of OSDNNSKIN?

hey All,
Thanks for evaluating all the free skins. I'm not quite getting any response or feedback from any of the users. Please get back to me with some suggessions, feedbacks and bugs so that I can countinue working with skin. Tell me which are the sites you are using these skins.
Also post suggessions about which xhtml template you like to see as free dotnetnuke skin?
Thanks for the greate help again.

Tuesday, May 12, 2009

All new Dotnetnuke Navigation Provide

Hey
Dotnetnuke navigation provider is also upgraded with many new releases of dotnetnuke. I come across some nice demo of all new features. Now you can create an entire menu css using a single attribut in dnnNav control with CSSControl attribute. There are some good tutorial video to learning this new feature at : http://www.codeendeavors.com/. MimimalExtropy skin in download section of this website is very usefull for learning the new provider.
Hope this also help you.

Dotnetnuke 5.0 skin packaging

Hey, Welcome back!
I'm learning Dotnetnuke 5.0 skinning, and I think I must share some of the beautiful things I like about dotnetnuke 5.0 skinning and packaging.
When I come to know that dotnetnuke 5.0 skinning introduces a new packaging for skin install and that includes xml file with .dnn extension. It contains license, release notes and version text. Another thing was, each file you want to include in package should have an entry in .dnn xml file. So that is really a boaring task. Creating node and adding and tags for each of the package file.
So I thought we can just write a console application that generates the .dnn file for us. And thinking about using System.IO and System.Xml namespaces of .net framework to do so. But you know, I then come across a feature. If you login to host and go to Host > Skin and if you are in edit mode, it will show you an option 'Create Skin package'. That will help you create a skin package for your existing skin.
So here is how I develop a new skin:
  • Create a folder for skin, copy version.txt, releasenotes.txt, license.txt and a single .ascx control with
  • Copy .dnn file from existing skin, and rename it by your skin name.
  • Remove all file entries in the skin section and add your 5 entries.
  • zip and install skin.
  • start developing skin, add images and css.
  • use create package wizard to regenerate the dnn file again with all your files.

Hope this helps

Recaptcha.net control in UpdatePanel

Hey,
If you are looking for good free advanced captcha tool, just use Recaptcha. Its a nice free to use pluging available as asp.net plugin dll. There are code plugins available for various programming languages, ajax and non-javascript environment. So i like it. I just find it from some place and started integrating it to my demo project.
Everything goest well with it, accept when I place the control between UpdatePanel control, it was causing problem. It was disapearing when the page postbacks. The work arround to fix this is to make the ChildrenAsTrigger=false. This will fix the problem.
Have fun with this ready made feature and use it without worry in your asp.net projects.

I'm back

Hey friends,
There is long time since we posting an entry to a blog, it was like a vacation mode for my blog. But don't worry, I'm back with more tips, tricks, free stuff and more, keep in touch.

Thanks

Popular Posts