Having an issue with editing widgets

Topics: Controls
Oct 13, 2010 at 10:30 PM
Edited Oct 13, 2010 at 10:32 PM

Now that I have everything in the blog working, I am trying to format it to look like my client's website. Should be easy using CSS right? Well I am having an issue with a widget that I added. I log in as the Admin, I've added the HTML cod for the widget (just a simple text box - gets it's .css from a style sheet I imported and I can see using firebug that it IS getting the correct .css) BUT - I can not get the text box to align to the top of the widget frame. It keeps adding Style="Top:35px;" and when I check the firebug the style is a separate element outside my .css! I can't seem to track this down! Any assistance would be greatly appreciated. Here is the HTML code from my firebug inspection:

<div class="widget textbox" id="widget1ef27b78-0218-420c-bfda-038163510def">
<a class="delete" href="javascript:void(0)" onclick="BlogEngine.widgetAdmin.removeWidget('1ef27b78-0218-420c-bfda-038163510def');
return false"
title="Delete widget">X</a> <a class="edit" href="javascript:void(0)" onclick="BlogEngine.widgetAdmin.editWidget('TextBox', '1ef27b78-0218-420c-bfda-038163510def');
return false"
title="Edit widget">Edit</a> <a class="move" href="javascript:void(0)" onclick="BlogEngine.widgetAdmin.initiateMoveWidget('1ef27b78-0218-420c-bfda-038163510def');
return false"
title="Move widget">Move</a> <h4>Don't forget...</h4><div class="content"><p class="SidebarTop" style="top: 35px;"><strong></strong>
<span style="text-decoration: underline;">Monday October 11,</span><br> Canadian Thanksgiving<br><br>
Tuesday October 12,<br> Friendship Luncheon, Pan-American Day<br> <br> Saturday October 16,<br> Art in the Park</p></div></div>

 

The biggest issue is that every time I try to edit this from the Control panel, I do it in the HTML code, remove the Style="Top: 35px;" and try to remove the title (it isn't formatting the title correctly - you can see the strong tags above - the title is supposed to be inside there and I have remved the checkbox to show the title several times!) but the problem arises when I update the HTML part of the textbox widget, then save it - it WON'T close the window that was opened to do the editing and therefore will NOT save the changes! Can anyone please help with this? Really - just making CSS changes should be simple! UGH!

Thanks for any and all help!

Coleen

Coordinator
Oct 14, 2010 at 7:58 AM

Everything in the <div class="content"> tag is coming from the widget contents.  So I think that SidebarTop is coming from your Textbox widget.

If you are editing in HTML mode, there's an Update button in the bottom left (which might be a little too low on the screen).  Clicking that "accepts" the HTML and brings you back to the WYSIWYG editor.  You can then click the normal Save button.  This is what you're doing?  If you don't edit in HTML mode and just use the WYSIWYG editor, does the Save button work?

You could try highlighting all the text in the WYSIWYG editor and click the "Remove formatting" toolbar icon.  That could help if there's something strange going on.  There's a "Cleanup messy code" toolbar icon too that may help, but usually Remove Formatting is better.  If you use Cleanup messy code, I think you need to highlight the text first that you want to cleanup.

You could try creating a new Textbox widget and pasting in the contents from the original Textbox widget.

Just a bunch of miscellaneous ideas!

Oct 14, 2010 at 1:12 PM

"Clicking that "accepts" the HTML and brings you back to the WYSIWYG editor.  You can then click the normal Save button.  This is what you're doing?"

Yes, that is exactly what I am doing. The problem is that after I click on the Save button, it stays in the "editing window" (the window doesn't close and there is no longer a save, button or ANY kind of formatting available. As for the Remove formatting icon and the clean up messy code icons - I never see those. Something obviously isn't working correctly!

Here is a link to a screen shot of what is happening. What you see here is the widget window after I have done all the changes. It won't close and there is no way to close it without just closing the IIS window, which then loses all the changes that I just made! http://img441.imageshack.us/img441/575/widgetscreenshot.jpg

Thanks very much for your help, I appreciate it.

Oct 14, 2010 at 5:53 PM

The other thing I need to be able to do is to add a flash file to the widgets section. It is a simple file that is the size of the right-hand column and needs to display. I have it working exactly like I need it to in my original .net application for my client - how do I add "Media" or flash to the widgets? Thanks again for any help.

Coordinator
Oct 14, 2010 at 6:12 PM

In your screenshot, I can see an error message on the left hand side.  I can't see the entire error message, but are you running this site on .NET 4.0 ?

If so, and you haven't already, in the web.config file, add requestValidationMode="2.0" to the existing <httpRuntime> tag.

<httpRuntime ..... requestValidationMode="2.0"/>
Not having this on .NET 4.0 can prevent the contents of the WYSIWYG editor (contents = HTML tags) from correctly being posted to the server when trying to save.

For adding Flash, there's a couple of ways.  See this post (last message on Jan 24 2009), where "media" is added to the list of plugins and to theme_advanced_buttons1.  This change should be made to the edit.ascx file in the widgets\TextBox folder.

Oct 14, 2010 at 7:15 PM

HI Ben, thanks! Yes, I am running this on .Net 4.0 - in fact I just had to re-install everything on my husband's "Server" machine because the graphic card o ,y laptop is going out. Luckily I was able to back everything up and get it transferred to the PC and everything is working fine, but of course I still have the issue with the widget editor - however now I can actually see the error message - here is a new screen shot: http://img96.imageshack.us/img96/6395/blogwidgeterror.jpg I thought I had all the references in my web.config file but I guess not - I don't seem to have  that that reference.  Where in my web.config file (under which section) does that go? Thanks again!

Oct 14, 2010 at 7:34 PM

Also, I am sorry to be such a pain, but to be honest, after reading through the link on the "TinyMCE and object tags..." thread you posted, I really don't have a clue what that means. I have a simple .swf file (that works perfectly as long as I have the ASPNetFlash.NET3.dll file installed in my Bin directory) in my VB.Net web application (and I do have it in my bin directory in this project), and it was a simple matter of dropping the .swf file into the right-hand frame of that app.

Now, it seems I can't just drop it in a text box - I can't get it to reference correctly. I honestly am NOT a JS or C# programmer. I am pretty good at Plain HTML, CSS and decent at VB.Net. So, I have no idea where I should try to drop this .swf file in the widget section.  Are there any discussions on adding flash files to the widget section that are a little more rudimentary? Sorry I am such a simpleton, but I really haven't a clue what is being discussed in the link you sent. (shrugs)

Coordinator
Oct 14, 2010 at 7:50 PM

The web.config file is in the root folder of your blog.  In there, there's an existing <httpRuntime> tag.  You would want to add "requestValidationMode="2.0" to the tag.  So the entire tag will look like:

 

<httpRuntime enableVersionHeader="false" useFullyQualifiedRedirectUrl="true"
maxRequestLength="16384" executionTimeout="3600"
requestLengthDiskThreshold="16384" requestValidationMode="2.0"/>

(I added the last part to it)

For adding Flash, in the widgets\TextBox folder is a file named edit.ascx.  If you open that up, you will want to add two things as indicated in that other post.

plugins: "inlinepopups,fullscreen,contextmenu,emotions,table,iespell,media",

theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,
justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,|,iespell,link,unlink,sub,sup,removeformat,
cleanup,charmap,emotions,media",

I added "media" in both spots.  After you do this, when you open up the TextBox widget for editing, there will be a new toolbar icon -- far right.  It's the Media toolbar icon.  When you click it, it'll open up a dialog window that will allow you to enter the SWF details.  When you click OK, it will generate the <object> tag for you.

Oct 14, 2010 at 8:37 PM

Thanks a lot Ben! I did open the web.config file and added this:

 <httpRuntime requestValidationMode="2.0" />
    <pages validateRequest="false" />

under the <system.web> tag but it gave a huge config error so I tried what you sent (I actually double checked because one of the errors I got was that the httpRuntime already existed) so when I looked at it all it was missing was the  requestValidationMode="2.0"  -  I added that and you are most definitely my HERO 'cause now it works! Thank you so very much!

Now I"m off to make the changes that you suggested for the .swf file to see if I can finally get this thing done! I will let you (and any others having widget issues with flash files) know how it works.

I seriously can't thank you enough! (Bows to the master!) ;-)

Coleen

Oct 15, 2010 at 12:59 AM

Got it to work! Thank you SO much for all of your help! Once I was able to get the Media tool bar it was pretty simple!

One thing I will say about editing flash in a widget is that you have to put the styles directly into the HTML code - it doesn't take the styling from the .css files so you have to add it to the HTML of the widget, "behind" the Flash code. Also, I was using code for an ASPNet Flash App and the widget uses x-shockwave-flash, so once I took out all my code pointing to the ASPFlash - it worked like a charm.

Thanks again for all the help, it is greatly appreciated!

Coleen

Oct 15, 2010 at 2:52 PM

One last issue! The flash is working in every page that is in the root of the project; however, I have one page that is in another directory, because this is where the photohandler is. The photoalbum page does not display the flash and I know it's because of the relative path - this works:

<param name="src" value="themes/RoyalBlue/Images/CorozalTodayAds.swf" />
But if I change the path to reference the root as:
<param name="src" value="~/themes/RoyalBlue/Images/CorozalTodayAds.swf" />
It does not work on any of the pages! Is there another way to reference the root yet still have those pages in the root access it? I am not certain about using the <%=Utils.AbsoluteWebRoot %> in the code for this. I have tried it as:
<param name="src" value="<%=Utils.AbsoluteWebRoot%>themes/RoyalBlue/Images/CorozalTodayAds.swf" />

But it does ot work. Any suggestions?

TIA!

Coordinator
Oct 15, 2010 at 6:07 PM

If the blog is located in the root of the website, I would add a leading forward slash at the beginning of the VALUE.

<param name="src" value="/themes/RoyalBlue/Images/CorozalTodayAds.swf" />

Or if the blog is installed in a subfolder such as "blog" as an example, you can do the same thing by including the subfolder name:

<param name="src" value="/blog/themes/RoyalBlue/Images/CorozalTodayAds.swf" />

Oct 15, 2010 at 7:20 PM

The blog is the root file but the issue seems to be that the photoalbum resides in another directory. I tried

<param name="src" value="/themes/RoyalBlue/Images/CorozalTodayAds.swf" />
and I also tried it with the ~/ and ../ to get it to work in the photoalbum page. No luck, and the moment that I add ~/ or ../ or <%=Utils.AbsoluteWebRoot%>, then the flash does not work in any of the pages! Ugh! it makes no sense - other than that the flash file is reading only at the root level and won't go to any sub-directory level. Really - once I fix this issue, I am ready to publish this website for my client! (bangs head!) Once again thanks very much for your help with this!

Coordinator
Oct 15, 2010 at 8:23 PM

Is the SWF file not located in /themes/RoyalBlue/Images/CorozalTodayAds.swf ?  You can also use a fully qualified URL, i.e.

http://www.example.com/themes/RoyalBlue/Images/CorozalTodayAds.swf

Is the photoalbum the SWF, or something else?  The Flash <object> tag needs an SWF.  That's provided to the <object> tag via this "src" <param> tag.  All that's needed is to provide a valid URL to the SWF.  The URL can either start with a forward slash, or it can be a fully qualified URL, like the one above.  You can test the fully qualified URL by putting it in your browser's address bar.  The SWF should start playing in the browser.

Oct 15, 2010 at 8:37 PM
Edited Oct 15, 2010 at 9:07 PM

The hierarchy is this:

 

Root (Testblog)
    lots of directories & files ...
    theme
        RoyalBlue
            images
                 CorozalTodayAds.swf
    default.aspx
    aboutus.aspx
    photos
        photoalbum.aspx
    widgets
        Textbox
                 edit.ascx
   more files...        

So as you can see, the .swf file is located in the theme/images directory. The Photoalbum is in the Photo directory. Everything else (default.aspx, aboutus.aspx) is directly under the root level.  So when I put in the path for the flash I put it in as themes/RoyalBlue/Images/CorozalTodayAds.swf because the themes directory is at the root level. Unfortunately, it seems that since the photoalbum.aspx is not at the root level (and can't be in order for the photohandler to work correctly) the photoalbum page can't seem to get the path of the .swf file (at least that's my understanding of the problem) and all attempts to access the theme directory using the standard methods don't work. Not only do they not work for the photoalbum.aspx page, but they also make the flash stop working at the root level as well. I am stymied...

 

Your help is greatly appreciated!

Coordinator
Oct 15, 2010 at 9:01 PM

I'm not clear on what photoalbum.aspx is for?  I was thinking you added this Flash tag to a TextBox widget.  A widget is normally shown on all pages of the site.  So if you are on the homepage (default.aspx), the TextBox widget would be there and displaying the Flash object.  It would point to the SWF file.  So in this case, what significance does photoalbum.aspx have?

Oct 15, 2010 at 9:18 PM
Edited Oct 15, 2010 at 9:24 PM

The photos directory is specifically to hold the files needed for the photohnadler (photoalbum - see here:  http://photohandler.codeplex.com/ ) the photos directory has nothing to do with the .swf other than the flash does not display in the photoalbum.aspx page.

I created the photoalbum.aspx page using the theme master page and it works perfectly - except that the .swf doesn't display on this page!

So to answer your question - I did add the .swf file through the widget text box. As you say, the widgets are supposed to display on every page - including the pages that I added manually (and this does work on my classifiedads.aspx page because the classifiedads.aspx is in the root directory, along with the default and about us pages!)

I don't think this has anything to do with the photo handler  - I believe it has to do with the fact that the path for the .swf file points at a root level to the theme/images directories and the photoalbum.aspx page obviously can't "read" the .swf file because the path is at the root level and the photoalbum.aspx is not at the root level.

Does that make more sense?

So the problem is that the flash works perfectly on every single page, except for the photoalbum.aspx page. I can't for the life of me figure out how to code the path to the .swf file so that the photoalbum.aspx page will "see" it!

Coordinator
Oct 15, 2010 at 9:32 PM

I see, makes sense.  This probably also means that if you were to pull up an individual post where the URL is something like /post/2010/10/15/post-name.aspx, the SWF would also not work on that page too since you are not in the root directory at that time.

Have you looked at View Source in your browser to see what the entire <object> and/or <embed> tags look like on the actual page?  If you do a View Source (right-click, View Source), search for the relevant section and make sure the values you see that point to the SWF look correct.  If you'd like, you can even paste that section here.  The section will be the <object> tag, and possibly an embedded <embed> tag too.

If you haven't yet, I would also try putting in the fully qualified URL to the SWF.  So instead of /themes/RoyalBlue ..., try http://www.example.com/themes/RoyalBlue/....

Oct 15, 2010 at 9:48 PM

Ben, once again you have come through! Thank you, thank you! Bless you for all the time you have spent helping me with this! (Can I say I love you?) lol!

I did have to put it in my localhost URL (for now, when I upload this to the hosting site I'll add in the correct http://www.corozaltoday/theme/images...) but that worked - for ALL pages! You are most definitely my HERO! xoxo

Coleen