40Fingers Blog Feed

DNN7 Styling issues: z-index of Module Actions

Timo Breumelhof — Tue, 30 Apr 2013 14:34:00 GMT

I am currently testing some client skins for the upgrade to DNN 7 as both default.css and the Module action icons have changed since DNN 6. I have some z-index issues and here's what I found out and how I fixed it.

DotNetNuke 6 and Internet Explorer 10

Stefan Kamphuis — Tue, 16 Apr 2013 14:57:00 GMT

Nota bene: er is ook een Nederlandstalige versie van deze blogpost. Update: the crossposted version of this post on DotNetNuke.com contains some interesting comments. Over the past few months I ran into the same issue with DotNetNuke 6 websites quite a few times: “I can’t login on my DotNetNuke 6 website with Internet Explorer 10!” And because Windows 8 ships with Internet Explorer 10 (IE10), and since DotNetNuke 6 websites will not all be upgraded to 7 anytime soon, chances are this issue will become increasingly annoying. Some users (and/or webmasters) will probably already have discovered that it’s not just the login that fails, but pretty much every postback action. They might even have figured out that the issue can be solved (“avoided” is probably a better word) by putting IE10 in compatibility mode. Compatibility mode button in IE10 But of course, that’s not really a solution. After all, you don’t want to put a message on your website saying something like: “Sorry, but our website is really outdated so please tell your browser to treat it in a very old fashioned way by clicking the torn page icon up there in the right corner.” Luckily, a website can tell IE10 itself, that it needs to be viewed in comaptibility mode. And by using the always amazing StyleHelper SkinObject (by my colleague Timo Breumelhof), you can do so, right in your skin file. How do I do that? 1. Download the latest verion of the StyleHelper SkinObject and install it on your website, the same way you would install any module. 2. Open your skins .ascx file in an editor and registrer the skinobject using the line: <%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %> 3. Now, use the skinobject to add the meta tage to your page that tells IE10 to use compatibility mode: <fortyfingers:STYLEHELPER ID="STYLEHELPER1" AddToHead='<meta http-equiv="x-ua-compatible" content="IE=9" />' AddAtEnd="False" runat="server" /> Note: AddAtEnd must be False, otherwise the meta tag will be injected after the javascripts in the page, and it won’t work. Done right, the site functions as it should, and the compatibility mode button will not be visible anymore.

Inline editing in a DotNetNuke Skin

Timo Breumelhof — Fri, 15 Feb 2013 10:13:00 GMT

When developing a custom skin for clients you sometime would like a fixed text to be editable by the administrator. Using a module is risky as you cannot make sure the editor does not accidentally remove the module or applies custom styling. We created a first Beta version of a skin object that allows you to edit texts inline in the skin.

Testing DotNetNuke emails in your development environment

Timo Breumelhof — Fri, 30 Nov 2012 13:58:00 GMT

DotNetNuke normally sends out email on numerous occasions. In your development environment you mostly don't have an email server set up so these emails are not really sent. In some cases I do need to view / check these emails. This might be to test the templates of an email module, to test localization of the emails DotNetNuke sends out on registration or as password reminders etc. The easiest way I have found is to allow me to check the emails DotNetNuke sends is by adding a section to web.config.

Style Helper Skin Object Documentation

Timo Breumelhof — Wed, 26 Sep 2012 21:55:00 GMT

This is the documentation for the of the new Style Helper skin object on Codeplex. This is a skin object I started in 2007, but never got to making it releasable. And now i decided I should finally finish it.. (I will add a some extra functionality later this year) I would appreciate it if you would test the skin object and give feedback / report issues (on Codeplex). Download: stylehelper.codeplex.com/

02.06.03 Release of Style Helper Skin Object for DNN

Timo Breumelhof — Tue, 18 Sep 2012 12:04:00 GMT

We just released version 02.06.03 of our StyleHelper skin object for DotNetNuke 5.3+ on codeplex. This is final release after some beta releases following version 02.05.00. This release includes some additions, changes and bug fixes: Added: Inject Content in your skin Changes: (Mobile) redirect logic, Query String filtering and BodyClass filtering

Using Datasprings Dynamic Forms to make iDeal payments

Peter Schotman — Fri, 29 Jun 2012 09:12:00 GMT

Introduction Recently, Datasprings added, upon the request of one of our clients, the possibility to use iDeal as payment provider in its module Dynamic Forms. Dynamic Forms already contained support for Authorize.Net, Paypal and a number of other payment providers. iDeal is the de facto standard for online payments in the Netherlands (about 10 million consumers use iDeal), every webshop uses it and it is accepted as a secure solution by Dutch consumers. iDeal is supported by all major banks in the Netherlands and many smaller banks. iDeal is not free, you will usually pay a subscription fee and transaction costs per transaction, this depends on your bank. With this addition the module can now be used to directly accept payments using iDeal. This gives the site owner full control over his payment process, furthermore, it is also a cost effective solution. Steps to use iDeal in Dynamic Forms Preparation You have to request approval from your bank to use iDeal. It will take a couple of days to process your request and setup your dashboard and provide you with your merchant information. Your bank will provide you with tools, certificates and documentation to setup iDeal. For our bank, ING, all the information is provided through the dashboard.. Installing iDeal SSL Dynamic forms integrates with the advanced version of iDeal. As a first step you need to generate a SSL certificate for your domain name. The iDeal implementation manual will guide you through the steps needed to generate this certificate. This certificate should be installed on the web server and one should make sure the app pool user of the website can access the certificate. Web config changes This version of dynamic forms requires you to set some variables in the appSettings section of the web.config file. Image 1. shows the required settings. After adding these items, you need to setup the form. Configuring the form The form needs the following required fields: PGateway, Ideal_Amount, Ideal_MerchantID, Ideal_Description, Ideal_PurchaseID, Ideal_EntranceCode, Ideal_List, Ideal_Status, Ideal_TransactionID. See the iDeal documentation for a detailed explanation on how to use these fields. Above image shows the form with textboxes with the required default values. Normally, you will not use textboxes but a combination of fixed and dynamic values. The dropdown “Ideal_List” with value “Issuer Simulation” simulates the list of banks. In a production situation a buyer will select his own bank from the list and then initiate the payment process. The field short names should be exact (titles can be changed of course), otherwise it will not work. Testing After setting up the form, you should now be able to run the required test transactions. Our bank (ING) has an elaborate dashboard in which you can track the status of every transaction.. More Information First and foremost you should follow the requirements of your bank. Although the iDeal payment process is identical for all banks, they do have different procedures and dashboards.. Other sources: Dutch: https://www.ideal-checkout.nl/ http://www.ing.nl/zakelijk/betalen/geld-ontvangen/ideal/index.aspx English: www.sslshopper.com/

DotNetNuke Style Helper Skin Object 02.05.00 Released

Timo Breumelhof — Tue, 05 Jun 2012 14:28:00 GMT

New in version 02.05.00 Mobile Redirect We added a way to redirect query string parameters. They can now be copied from the orignal URL to the Redirect URL. For that I extended the RedirectTo attribute by adding a Querystring Parameter Token: [QS:Parameter] This will look for a Query String Parameter and add it to the redirect URL. Example: RedirectTo="http://m.site.com[QS:ID]" Will look for a QueryString Parameter "ID" in the original URL and add it to the new URL The result will be this redirect url: http://m.site.com?ID=123 New in version 02.04.01 Loading CSS / JS files I got a request to allow loading CSS files from the Desktopmodules folder. This is usefull if you unload all stylesheets in DNN 6.1+ using UnloadCss="\", which really unloads all styelsheets. We added 2 path tokens to the LoadCssFile attribute: [R] = For the root folder ("/") [D] = For the DesktopModules Folder ('/DesktopModules/") You can download the new version of the DotNetNuke Skin Object here: http://stylehelper.codeplex.com/ Full documentation here: http://www.40fingers.net/WeblogsNews/Weblogs/tabid/58/ID/23/language/en-US/Style-Helper-Skin-Object-Documentation.aspx

Style Helper Skin object and DotNetNuke 6.1

Timo Breumelhof — Thu, 26 Jan 2012 09:27:00 GMT

As some of you might have noticed, removing style sheets with the StyleHelper Skin Object did not work anymore in DotNetNuke 6.1. (al other functionality still works just fine) This blog post is about my considerations on this issue.

Adding a Print stylesheet to your Dotnetnuke Skin

Timo Breumelhof — Thu, 19 Jan 2012 21:41:00 GMT

As you can read in my previous blog, there's an issue with the DotNetNuke core print skin object in DotNetNuke 6.1. I'm sure this will be solved in a future version, but there is a workaround for it as you can read in the blog post. Another solution is something that's part of the HTML recommendation. Include a print.css file, which allows you to style the printed page. The HTML for this would be: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> Because the Media attribute is set to "print" this stylesheet will only be loaded when printing the page. Using this print.css stylesheet you can hide certain parts of the page you don't want to print, or change font-szie, content width etc. Example CSS: #HorMenuDropDown{display:none;} #Skin{width:99%;} .Normal{font-size:12pt;} Including a Print.css is not difficult but some people are asking for a solution in the DotNetNuke Forums, which is why I decided to write this blog. How to include Print.css on you page for printing The easiest way to include this is to use our DotNetNuke Stylehelper Skin Object. You can download it here. Then add this to your skins ascx file: <%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %> <fortyfingers:STYLEHELPER ID="STYLEHELPER1" AddCssFile='Print.css' CssMedia="print" runat="server" /> And add a Print.css file to the root of your skin package and your done. Now you only have to create print styles and test. BTW, you can test the result by using the print preview option of your browser. On this page there are some good tips on how to create a good print.css file: http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/

Print and RSS action icons in DNN 6, a solution

Timo Breumelhof — Wed, 21 Dec 2011 23:33:00 GMT

Because of changes to the action menu in DNN 6, the Print and RSS feed icons don't work anymore. At first I didn't notice this as they do work if the user is logged in, but for an anonymous user they don't. I'm sure this will be solved in a future update of DNN, but there are people who upgraded to DNN 6 and only discovered this issue when it was to late to "downgrade". Here's one of the Forum threads: http://www.dotnetnuke.com/Resources/Forums/forumid/109/threadid/428780/scope/posts.aspx I found a (temporary) solution to for the issue. The following code blocks should be injected in place of the original Print or RSS action button in the Container's ascx file: For Print: <% 'Print action alternative for DNN 6 Timo Breumelhof - 40Fingers Dim sPrint As String = "<a href='http://{0}/tabid/{1}/mid/{2}/dnnprintmode/true/Default.aspx?SkinSrc=[G]Skins%2f_default%2fNo+Skin&ContainerSrc=[G]Containers%2f_default%2fNo+Container' target='_blank'><img src='/images/action_print.gif' alt ='Print' /></a>" If Me.ModuleControl.ModuleContext.Configuration.DisplayPrint = True Then Response.Write(String.Format(sPrint, PortalSettings.PortalAlias.HTTPAlias, PortalSettings.ActiveTab.TabID, Me.ModuleControl.ModuleContext.ModuleId)) Else Response.Write(String.Empty) End If %> For RSS: <% 'RSS action alternative for DNN 6 Timo Breumelhof - 40Fingers Dim sRSS As String = "<a href='http://{0}/tabid/{1}/moduleid/{2}/RSS.aspx' target='_blank'><img src='/images/action_rss.gif' alt ='RSS' /></a>" If Me.ModuleControl.ModuleContext.Configuration.DisplaySyndicate = True Then Response.Write(String.Format(sRSS, PortalSettings.PortalAlias.HTTPAlias, PortalSettings.ActiveTab.TabID, Me.ModuleControl.ModuleContext.ModuleId)) Else Response.Write(String.Empty) End If %> BTW, this has one advantage, as it does not use any Javascript, the new window is opened without a warning. I did not test this in a multi-language environment, I think it should work with the core localization, but I guess not with the other solutions. (although it should not be difficult to add the language parameter) Hope this helps, BTW, I might create a skin object from this if there's a demand for it. If you want to add a Print.css stylesheet for printing to your skin, read this blog post. Timo

Style Helper Skin Object 02.02.01 for DotNetNuke 5

Timo Breumelhof — Sun, 11 Sep 2011 17:43:00 GMT

New release of the 40Fingers DotNetNuke Stylehelper skin object. Version 02.02.00 Highlights: Improved Redirect Handling Get Backlink to the PAge that casued the redirect Add anything to the Head of the DotNetNuke page Remove Existing DotNetNuke MetaTags Links to Style sheets and Javascript files are now templatable You can download the new version here: http://dnnskinextensions.codeplex.com/releases/view/73344 Full documentation here: http://www.40fingers.net/WeblogsNews/Weblogs/tabid/58/ID/23/language/en-US/Style-Helper-Skin-Object-Documentation.aspx

40Fingers Style Helper Skin Object bug fix release: 02.00.01

Timo Breumelhof — Fri, 03 Jun 2011 19:09:00 GMT

Today I discoverd a bug in the DotNetNuke Style Helper Skin Object 02.00.00. The "IfMobil" attribute, used to detect if a bowser is a mobile browser or not, did not always detect the browser correctly. This issue has been fixed in this new release: 02.00.01 If you use the mobile detection capabilities, please update your installation with this new release. You can download the new version of this DotNetNuke skin object here: http://stylehelper.codeplex.com/ Full documentation here: http://www.40fingers.net/WeblogsNews/Weblogs/tabid/58/ID/23/language/en-US/Style-Helper-Skin-Object-Documentation.aspx

DotNetNuke Style Helper skin object 02.00.00 released

Timo Breumelhof — Thu, 19 May 2011 22:08:00 GMT

Today I released a new version of the 40Fingers DotNetNuke style helper skin object. The main enhancements are for mobile DotNetNuke skins / websites. I made detection of mobile browser much easier and you can now redirect the user to another DotNetNuke page or even website. Also added: - Set the doctype of the DNN skin. - Support to add custom attributes to the DNN HTML element as needed for Open Graph protocol.

Wat is Visual Studio LightSwitch

Stefan Kamphuis — Fri, 22 Apr 2011 11:16:00 GMT

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

Stefan Kamphuis On DevDays

Stefan Kamphuis — Fri, 22 Apr 2011 09:44:00 GMT

Only a few days left before DevDays11 will start in The Netherlands, and while a large part of my schedule is fixed already I decided to run through the agenda and pick a few sessions anyway. My main interest during DevDays will be Visual Studio LightSwitch, as you will be able to find me most of the time - at least in between sessions - in the Ask The Experts area at the VS LightSwitch boot. So naturally I highly recommend the sessions Beth Massi will be giving on the topic. She's doing 4 of them, one of which during geeknight, so I'm sure you'll be able to catch one. On april 28th DevDays my highlight will probably be: 9:15 The KeyNote. Keynotes are always a blast. 11:05 Not sure yet, but I might just try and catch the Windows Phone 7 Mango session by Ben Riga. 13:30 Going for the session on REST with WCF by Glenn Block, since I already know a bit about LightSwitch.This timeslot also features Beth's first session on LightSwitch. If you're new to LightSwitch, check it out. 15:05 That'll probably be Mark Miller on UI. It's been a while since I've seen him speak. 16:30 I'll probably try and learn something about Azure this timeslot. But then again I might also pick up on Beth's second appearance on LightSwitch, since we might get questions about that on the boot. Geek Night night is not something you should plan for, so we'll just see what happens. 9:15 No possible way of predicting how things will look during the first session after Geek Night. So I decided not to plan anything here. 10:50 Only one possible option: Beth Massi on Advanced LightSwitch Techniques. That'll be awesome! 13:15 This will be a hard one. Of course there's Mathijs on WP7 Push Notifications, but there's also Ingo Rammer on Advanced Debuggin in VS2010 which will probably be very useful too. For the remainder on the conference I actually expect to be busy on the ATE stand for LightSwitch. And I'm looking forward to it too! Hope to meet you there

Bug fix release Style Helper SKO v01.08.04 for DotNetNuke

Timo Breumelhof — Thu, 07 Apr 2011 13:18:00 GMT

We found a bug in the stylehelper skin object for DotNetNuke. In certain conditions you could get an "Object reference not set to an instance of an object error" error, if you use the BodyClass attribute...

Style Helper version 01.08.03 released

Timo Breumelhof — Tue, 15 Mar 2011 18:31:00 GMT

After a few minor internally used and tested versions, I released a new version of our DotNetNuke Stylehelper Skin Object on codeplex. The new version is 01.08.03 It contains A bug fix A correction to the AddMetas attribute A New template option for the AddBodyClass attribute. (you can add a class for the role a user is a member of)

DotNetNuke Upgrade Issue with 5.4.0 script

Timo Breumelhof — Sat, 27 Nov 2010 23:10:00 GMT

Today I tried to upgrade my DNN Skin Development installation from 5.3.1 to 5.6.0 I got a SQL provider error on the 5.4.0 script I did not understand at first. I got this error System.Data.SqlClient.SqlException: Violation of PRIMARY KEY constraint 'PK_TabModuleSettings'. Cannot insert duplicate key in object 'dbo.TabModuleSettings'. Violation of PRIMARY KEY constraint 'PK_TabModuleSettings'. Cannot insert duplicate key in object 'dbo.TabModuleSettings'. I took me a while but I found the reson for the failure and the solution.

Overview of DotNetNuke Stylesheets

Timo Breumelhof — Fri, 29 Oct 2010 18:01:00 GMT

There are several blog posts about Stylesheets in DotNetNuke, but they mostly cover only a part of the subject. I tried to wrap up all the information on what stylesheets DNN loads and how to manage them in one blog post. - What stylesheets are loaded and why - In what order they are loaded - Use of Ids / Classes for containers - How to limit the number of stylesheets DNN loads - Why you should not delete or edit Default.css

Presenting a list of events with the DotNetNuke reports module

Peter Schotman — Mon, 25 Oct 2010 20:44:00 GMT

The reports module is an excellent way to present data from your DNN installation in an ad hoc fashion. One can use it for any table in and outside the DNN installation. In this example we will present a list of events from the events module.

DotNetNuke background issues in FCK & Rad Editor

Timo Breumelhof — Mon, 18 Oct 2010 15:31:00 GMT

If your skin has a dark color or an image as the background, there are situations were this background is visible in the editor too. This can make it very difficult if not impossible to edit the content of your site. As this question keeps comming up in the DNN Forums and is an issue in the new RAD Editor too, here's how to solve these issues for your skin.

DotNetNuke very slow page loading issues with AVG 9

Timo Breumelhof — Sat, 09 Oct 2010 18:33:00 GMT

Since about a month I'm having issues on my development machine with my local DotNetNuke installations. Sometimes pages load so slow in the browser, I get a timeout or the page only loads only half. After checking all kinds of possible causes I finally found the solution...

Style helper 01.05.01 released

Timo Breumelhof — Thu, 30 Sep 2010 11:52:00 GMT

New release of the 40 Fingers Style Helper skin object (V01.05.00) The Style Helper skin object allows you to load css and javascript files in the head of the page from you DotNetNuke skin, directly or conditional, based on all kind of properties. New Feature: You can now inject a CSS class to the page Body tag. This allows styling of specific page in the same skin. Bug Fixes: - Javascript files are is now Injected after jQuery (the was not the case before) - You can now use spaces after the comma in you RemoveCssFile attribute.

YouTube Movies In Normal Content

Stefan Kamphuis — Thu, 09 Sep 2010 21:30:00 GMT

Quite often, DotNetNuke website administrators turn to specialized YouTube modules to include a YouTube movie on their website. The good news is, however, that YouTube movies can be embedded easy enough in pretty much every module that uses the rich text editor in DotNetNuke. Let’s just take it in a few steps. In this example I’ll just use a Text/HTML module, but it’ll work in any other place too where the rich text editor is used. First, log into your website, navigate to a page with a Text/HTML module on it and choose “Edit Text” on the module’s menu. Chances are, you are now looking at the Rich Text Editor in WYSIWYG view. You will need to switch it to Raw or HTML view. How this can be done, depends on the type of Editor Provider that your site is configured to use. When using the FCK Editor (default before DotNetNuke 5.4) you can click the “Source” button on the top right of the editor. With Telerik’s RADEditor (default from DotNetNuke 5.4 upwards) you can click the HTML tab in the lower left of the editor. Alternatively, you can switch the entire editor to “Basic Text Box” mode by using the radiobuttons right above the editor. You should now see something like this: For now, leave this page the way it is now, open up a new browser window or tab and find the YouTube Movie you want to include in the module. Notice the “Embed” button on the right, below the movie: Click it, and see what appears in the area below the button: You can use the options in this area to tweak the look of the movie a bit and when you’re done, click in the “html” area (blue text) to select the so-called embed code and copy the code to the clipboard. Now, switch back to the window where we just left your site open and paste the code into the HTML Area: Switching the editor back to Design view will prably look a bit odd: Never mind that though, and just click “Save” and watch the movie play in your site: