ZolMedia Web Design Blog

 

Category: Tips & Tricks

Tips & Tricks

Change Bike Icons in Default DNN 6 Dark Knight Skin

Especially with "big change" versions of DotNetNuke, I always like to fiddle with and get acquainted with the default skin before launching out with massive customization.

I had to post this right away, because I spent about 45 minutes trying to find where in the heck to change some of the icons in the sample Awesome Cycles theme for the latest & greatest DNN 6.0.1.

I checked the skin.css first of course, then the default.css & portal.css. Didn't see it in the obvious places so I checked the CSS with my Firefox Web Developer Plugin and saw this:

http://xxx.xxx.xxx.xxx./Portals/0/portal.css?xxxxxx

#RightLinks li.icoNews img (line 71)

{
background-image: url("images/bike-news-icon.png");
background-repeat: no-repeat;
}

The question mark and number after the portal.css told me that that these link/icon styles were being generated from somewhere other than the normal stylesheet files.

I Googled "#RightLinks li.icoNews img" and one of the 4 results referenced "Site Settings" which pointed me in the right direction.

Eureka!

Admin > Site Settings > Stylesheet Editor tab - Ah, there are those pesky buggers:

/*  home page sidebar styles*/
#RightLinks .last { background:none;}
#RightLinks li.icoAbout img { background-image: url("images/bike-about-icon.png"); background-repeat: no-repeat;}
#RightLinks li.icoBike img { background-image: url("images/bike-icon.png"); background-repeat: no-repeat;}
#RightLinks li.icoNews img { background-image: url("images/bike-news-icon.png"); background-repeat: no-repeat;}

FINALLY!

What is that red shadow at the top of the DNN 6 DarkKnight Skin?

Along the same lines of my previous post, I've been deconstructing the new default Dark Knight Skin for DotNetNuke.

Among other things, I couldn't figure out where that red shadowy / gradient image was coming from at the top of the page.

Didn't take me TOO long to realize that it was actually a solid red background color that was behind the semi-transparent background image:

    #Header #ContentBG{width:960px;margin:auto;background:#ff0000 url(images/Header-BG-Variable.png) no-repeat center bottom;}

Change that to the solid color that you want to peep through and you're all set.

Change RADEditor to FCKEditor in DNN 5.6.*

Maybe I just haven't given RADEditor enough of a chance, but COME ON. Hitting enter causes a PAGE BREAK by default instead of a PARAGRAPH?

So, I've been painlessly changing my web.config from:


<htmlEditor defaultProvider="TelerikEditorProvider">

to

<htmlEditor defaultProvider="FckHtmlEditorProvider">

Saving, loading 'er up, and FCKEditor is back. Until today. When I loaded the changed web.config, I got this error when I tried to edit some text/html:

"Could not load RadEditor. Could not load RadEditor! Error while loading provider attributes: Object reference not set to an instance of an object."

Now, it is highly possible that I missed a step in my initial DNN installation that caused this to happen, but judging from the questions I've seen on the topic, I'm not the only one... SO ...

What I found in this post: http://www.dotnetnuke.com/Resources/Forums/forumid/108/postid/377722/scope/posts.aspx got me on the right track, but doesn't quite answer the question, because it again only says to change that one line in the web.config.

What I quickly noticed though, was that this poster's copy/paste of the web.config looked DIFFERENT than mine... Huh? My web.config was missing the whole "<add name... section for FckEditor. I pasted what was in this post:

  <add name="FckHtmlEditorProvider" type="DotNetNuke.HtmlEditor.FckHtmlEditorProvider.FckHtmlEditorProvider, DotNetNuke.FckHtmlEditorProvider" providerPath="~/Providers/HtmlEditorProviders/Fck/" CustomConfigurationPath="~/Providers/HtmlEditorProviders/Fck/custom/FCKConfig.js" EnhancedSecurityDefault="false" SecureConfigurationPath="~/Providers/HtmlEditorProviders/Fck/custom/FCKConfigSecure.js" ImageGalleryPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" ImageUploadPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" ImageAllowedFileTypes="gif,png,bmp,jpg" FlashGalleryPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" FlashUploadPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" FlashAllowedFileTypes="fla,swf" LinksGalleryPath="~/Providers/HtmlEditorProviders/Fck/fcklinkgallery.aspx" DynamicStylesGeneratorPath="~/Providers/HtmlEditorProviders/Fck/FCKStyles.aspx" DynamicStylesCaseSensitive="true" DynamicStylesGeneratorFilter="controlpanel|filemanager|mainmenu|wizard" StaticStylesFile="~/Providers/HtmlEditorProviders/Fck/FCKeditor/fckstyles.xml" StylesDefaultMode="Static" DynamicCSSGeneratorPath="~/Providers/HtmlEditorProviders/Fck/FCKCSS.aspx" StaticCSSFile="~/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/css/fck_editorarea.css" CSSDefaultMode="static" spellCheck="ieSpell" AvailableToolbarSkins="Office2003,Silver" DefaultToolbarSkin="Office2003" AvailableToolBarSets="DNNDefault,Default,NoGallery,Basic" DefaultToolbarSet="DNNDefault" DefaultImageGallerySkin="Default" DefaultFlashGallerySkin="Default" DefaultLinksGallerySkin="Default" FCKDebugMode="false" UseFCKSource="false" OptionsOpenMode="ShowModalDialog" CustomOptionsDialog="Admin" />

and Voila - uploaded and FCKEditor is working again. Strange but true. Well not really strange, cuz clearly the web.config needs this piece to work, but strange as to why it wasn't there in the first place. Maybe I'll do some digging later, but for now wanted to post this in case it helps someone else.

Since the above will not likely copy/paste pretty, here's a text file of the code to change RADEditor to FckEditor.

Embedding MailChimp Form in DotNetNuke, BVCommerce, or most ASP.NET websites.

A client of ours has an eCommerce website built on asp.net. He wanted a MailChimp email newsletter sign-up form on his site. He copied and pasted the MailChimp-generated code, and seeing as that the MailChimp code contained <form></form> tags, it didn’t work. (And... it also "broke" the search functionality in IE and wreaked other havoc, but that's another post).

I Googled for solutions and MailChimp’s info wasn’t very helpful (or, maybe I should say, was sort of helpful but not the answer I wanted), so I went more general about adding forms onto a page that already contains the form tags inherent to asp.net pages.

I had remembered seeing a similar solution on Mitchel Seller’s website about the "adding forms to DNN" conundrum and used that as a starting point.

Here’s what I ended up doing … NOTE: This generated code from MailChimp is the version with Javascript disabled, but it looked like the code between the form tags was the same, so just sticking with the basics.

Old MailChimp Form code (with my changes in Green)

Also note: In the interest of time, I just did a quick copy/paste of these code examples, so they are NOT formatted to copy/paste for you.

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
    #mc_embed_signup fieldset {position: relative;}
    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
    .mc-field-group {overflow:visible;}
</style>
<![endif]-->

<div id="mc_embed_signup">
<form action="http://yoururlhere.us1.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
    <fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #FFFFFF;color: #000;text-align: left;">
    <legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #666666;background: #CCCCCC;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join our mailing list</span></legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
        <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
            <div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
            <div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
        </div>
        <div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
    </fieldset>   
    <a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>

<!--End mc_embed_signup—>

New MailChimp form code that WORKS in ASP.NET!

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
    #mc_embed_signup fieldset {position: relative;}
    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
    .mc-field-group {overflow:visible;}
</style>
<![endif]-->

<div id="mc_embed_signup"><!-- I totally removed the Initial form tag and everything in it -->

<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #FFFFFF;color: #000;text-align: left;">
    <legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #666666;background: #CCCCCC;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join our mailing list</span></legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
        <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
            <div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
            <div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
        </div>
        <div><!-- Then added the onClick line in input section --><input type="submit" onClick=this.form.action='http://yoururlhere.us1.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxx';this.form.submit(); value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
    </fieldset>   
    <a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>

</div>

<!--End mc_embed_signup-->

How to add HTML and other code snippets to a Website built with DotNetNuke

iStock_000008392391Small Kevin wrote an article called Simple ASP.NET & VB.NET example code for Authorize.net's AIM API for a new Web Programming Tips & Tricks section of our website. He wanted to provide some code examples to accompany the article. Sure, that would be easy (I thought). After about 8 hours of digging, making configuration changes to fckeditor, monkeying around with <code></code>, <pre></pre> and <textarea></textarea> and even iframes to no avail, I finally found a workaround that, well... works.

The problem was, I could get the code pasted into the HTML editor to display correctly by copying/pasting the code, choosing "Raw" for rendering, and clicking update. Fine. Done. BUT, if you went to edit the content of that code at all, fckeditor would muck up the code so that it no longer displayed in a way that was helpful or coherent. The rabbit trail was long and drawn out as I tried different configuration options in the fckeditor.js file, but nothing worked. At that point, I didn't know whether the problem was with fckeditor or DNN's implementation of the fckeditor, and Googling dozens of phrases and following many potential leads turned up nothing of use. There are some HTML and "script injector" modules, but I didn't really want to go that route.

My initial workaround was using an iframe or object tag to link to a text file. It worked OK for the web.config code and .vb code, but IE didn't want to render the code of the example ASPX file. Rats.

Then, not sure how or why, a lightbulb went off. I had already divided the three different code sections into 3 separate modules earlier when I was messing around to keep things simple. Hey, guess what? Modules have HEADERS and footers. And guess what else, those header sections completely bypass any built-in text/html editors in DNN and RENDER THE CODE THE WAY YOU WANT IT TO DISPLAY! Woo HOO.

So, instead of banging your head against the wall if you want to insert code/html snippet examples for HTML tutorials, skinning tutorials, etc. you can use the trusty header. OK, maybe not the best solution ever, but it made me happy today. There has GOT to be a better way to do it out there somewhere, and I'd be thrilled if someone could point me in the direction of that elusive solution.

If you want your code to display nicely like it would for real, I found this great site: http://simplebits.com/cgi-bin/simplecode.pl. You copy/paste your code snippet into the top dialog box, hit "process" and voila! ... nicely formatted code to copy/paste into the header of your module. Don't worry, your code example can easily be copied/pasted withOUT all of the extra formatting stuff. Then throw a heading tag in at the top to identify it, and you're ready to educate the world with your clever code examples.

 Search
  

 Categories
  

 Join our Email List!





  

Register  |  Login