Hi,
I'm quite new to Dnn, but I'm getting there. I have a site that has a contentpane that is separated into four sections. The contentpane section is a large square block with 3 smaller square blocks horizontally placed below the large square. The large block has an image inside it when you load the site, as does the smaller blocks. When a visitor comes to the site and mouse overs the smaller blocks, I need the image in the large block to change via that mouse over to a associated image. From what I've seen this functionality should be simple a DNN module - I've seen some amazing modules through my learning so far, but I'm not sure what the functionality I described above is called and through my searches I've yet to locate a tutorial or module that might help me accomplish the actions I need.

I'm sure they are out there, and this is probably a simple fix, but I really could use some suggestions or just someone to point me in the right direction, through a tutorial or a module to resolve this.

Any help in this area is greatly appreciated as I continue my adventure in learning the in-and-outs of DNN.

Thank you for taking the time to read my post.

Are you doing this with a Text/HTML module? Or is your question about how to do it?

If you are doing it with the Text/HTML module, one approach is to use CSS with the hover property to change the background image. You can do a simple test applying the class "left" to a div and use:

.left
{
background-color: Red;
height: 400px;
}
div .left:hover
{
background-color: blue;
}

Mousing over the div will result in the background color changing from red to blue.

If you can do this in HTML/CSS, you can do it with the Text/HTML module and CSS.

Joseph,
Thank you for your quick response. To be honest, I hadn't used a module. I have basically set up the divs in the ascx file and have been populating it through the css file. Below is what I have been working on.

ascx -------------------------------

<div class="ContentPane" runat="server" id="ContentPane" visible="true">
class "maincontent"
id=subcontent1
id=subcontent2
id=subcontent3

(please ignore missing coding above - just couldn't get it to paste correctly -so I shorthanded it)

css ---------------------------------

/* Content block sections ---------------------------------*/
.ContentPane
{
float: left;
width: 615px;
height: 440px;
background-color: White;
border: 1px solid black;
}

.maincontent
{
width: 602px;
height: 300px;
margin: 3px 0 1px 2px; /* top right bottom left */
background-image: url(images/main_content_home_image.png);
border: 1px solid black;
}

#subcontent1
{
float: left;
width: 192px;
height: 117px;
margin: 3px 0 0 5px;
background-image: url(images/bottom_box_orgs.png);
border: 1px solid black;

}

#subcontent2
{
float: left;
width: 192px;
height: 117px;
margin: 3px 0 0 10px;
background-image: url(images/bottom_box_video.png);
border: 1px solid black;
}

#subcontent3
{
float: left;
width: 192px;
height: 117px;
margin: 3px 0 0 10px;
background-image: url(images/bottom_box_emr_connections.png);
border: 1px solid black;
}

The #subcontent images do not change, but when the visitor hovers over the image, the .maincontent changes to the appropriate larger subcontent image. I had not actually thought to use the html/css module... I'm still stumbling my way through this and have yet to get a full grasp of the modules that are available.

Would it be better for me to work within the html/css module or continue the method in the css file? Continuing any farther than I have come in the css file as noted above, is pushing the limits of my knowledge.

I will experiment with the html/css module if you think this is the correct path I should be on - (does that mean what I've done is not needed to be located in the css file?-- Sorry here for my ignorance, I am still trying to learn how the module, the ascx, and css file all fit together.-- I finally get the ascx and the css relationship, but the use of modules (the great thing about DNN) is still quite a mystery to me).

Is it possible for you to explain or show an example as to how the functionality I'm looking for could be achieved?

Many thanks for your help!


Side NOTE:
I just installed the text/html module in the footerpane to experiment a bit. Wow... nice! (I feel like an idiot for not knowing the most basic module) I placed an image inside it as well as text, which helped me resolve an issue I was having developing the footer w/o the module. Thank you for that insight. I haven't figured out the .maincontent part yet, but I'm assuming this is the path I should be on.

Any additional insight on this would be great.

I will continue to experiment -- the adventure continues.

I am not sure which ascx file you are referring to. Hopefully it is your skin's ascx file and not the default page.

As you are a newcomer, I'd recommend that you review some of our introductory tutorials. They will get you started with the fundamentals.

As for your questions, you should consider putting all "content" in modules. That's just the way that it is done. You could, if you wanted to, put one Text/HTML module on a page, and put all of your content in it. It's possible to do that, but breaking down the page to panes and putting different modules into the different panes is a better idea. And you can put more than one module in a pane.

The Text/HTML module is designed to accept any HTML that you want to put there. You can work in the Source mode with bare HTML. You can put divs and other tags there, assign classes, etc. You can put the CSS that goes with the HTML into the portal.css file (which you can edit from the Site Settings, Edit Stylesheet section.

When I am trying to figure out how to do things, I often work in an HTML editor and preview the results. I generally use Visual Studio because that is what I am familiar with. When I've got things done, copy the HTML to a Text/HTML module and add the CSS to portal.css. This is a good way to learn that sort of stuff.

Please continue to ask questions.

And, for pasting code, there is a code tag available in the editor. Wrap those tags around your code and it will post just fine.

Joe,
I just wanted to thank you for your help. I'm going back and using modules for the content, and learning as I go. I'm sure I'll keep ya busy with many more questions as my DNN adventure continues. Thank you again.

Hi Joe,
Back already... =)
I commented out the sub DIVs I was working with in the ascx file and the css file. Leaving me with only Class DIVs defined in those locations. - The only way i could figure out to place modules within the DIVs - in the controlpanel of the site under panes. The sub DIVs did not show up there only the Class ids showed up in that dropdown list. Well, things went pretty well I think, all the images float left and lined up as I was hoping. So, now I have the following code (just going to focus on one section - once I get a handle on that, it should apply to the rest) --

CSS file:
/* ------- Site Content Menu Section defined -------- */
.contentmenu
{
float: left;
width: 870px;
height: 90px;
margin-top: 10px;
background-color: White;

ASCX file:



I have inserted One html/text module inside the contentmenu section. Adding content within the modules rich text editor, I added 15 images (these are to be rollover buttons) that correctly lined up horizontally within the section.

HTML code:



Here is where I hit the wall...
Sorry for my inexperience here but... where and how do I modify settings inside the module? Do I set up the rollover actions in the Html? or somehow identify them (how do you associate these images in the module to the CSS file) in the CSS file. I'm under the impression that CSS is where the rollover actions should originate, but I'm lost as how to do this. (? inside the .contentmenu DIV and if so how do you associate the actual separate images to be modified?)

Thanks again for any insight on my situation.

When you refer to the ascx file, are you referring to a skin file?

I have a feeling that you are doing bad things to your skin file. You MUST have one pane named ContentPane, or you will have serious trouble.

If you are NOT talking about the skin file, then you need to back up and learn about skins and DotNetNuke skinning. We have some really good tutorials that will introduce you to the basic concepts of a DotNetNuke site.

And, if can attach your skin file to a reply, I can download it and take a look at it.

Yes, I am referring to a skin
I have attached the zip of the skin for your review.

Note: http://www.ehrselector.com This is the site I am trying to reproduce in DNN just for your reference.

Until I hear from you again... I'm going to investigate
"The Text/HTML module is designed to accept any HTML that you want to put there. You can work in the Source mode with bare HTML. You can put divs and other tags there, assign classes, etc. You can put the CSS that goes with the HTML into the portal.css file (which you can edit from the Site Settings, Edit Stylesheet section.

When I am trying to figure out how to do things, I often work in an HTML editor and preview the results. I generally use Visual Studio because that is what I am familiar with. When I've got things done, copy the HTML to a Text/HTML module and add the CSS to portal.css. This is a good way to learn that sort of stuff."

-- from your previous posts, to try and get a better handle on this process.

One side question on this --
When you say...

"work in the Source mode with bare HTML. You can put divs and other tags there, assign classes, etc."

- do you mean working in the module option - user control / resource file?
Or do you mean working in the module option with the Rich Text Editor ?

Side note: I haven't worked with an html file very much in building this site. I believe I used it initially, but after I had the aspx file, that is where I have been setting up the structure (classes and instances) and the properties of the classes I identified inside the css file.

I'm not really sure about the relationship between the HTML file and the aspx file.

Bless you for your patience.
I look forward to your suggestions.

Any thoughts on this?


Trying to create a rollover image inside the html/text module.


I think I got it... well at least the first step... I added an id to the html code for the image...
....src="http://www.dnncreative.com/Portals/7/subscriber_login_1.png" id="subscriber_login" />

Now I am able to style the image inside the css file.

The adventure continues... going to try to actually make the rollover through the css file.

Remove the line in the ascx file that references the css file, as it is not needed. You've named the css file so that it will be included automatically.

If you change these styles to what is shown:

.windowpane
{
width: 100%;
margin: 0 auto;
padding: 0;
background-color: #424242;

}

/* whole browser definitions-------------------------------*/
.skinmaster
{
width: 870px;
margin: auto;

}

You will get something that is centered and is the width that, I think, you want.

That will get you something to work with.

I would leave out all of the divs you have removed with comments. Then you can start putting in things to add the background images as needed.

Hi Joe
Thank you, that did help center the skin.
I also removed all the commented out statements (I was just trying to keep up with my changes as I experimented with the skin)

As far as the rollovers that I have been attempting:
I went inside the text/html module >edit content <html>view
and went to the code of an icon image that I had placed in the module and added an ID -- id="icon_question", this gave me the ability to access the style of the image through the css file.

<code>
<img alt="" width="11" height="33" id="icon_question" src="http://www.dnncreative.com/Portals/7/icon_question_mark2.png" />
</code>

Just experimenting here - to see what would happen. I went to the CSS file and added the following:

<code>
#icon_question:hover
{
border: 1px solid black;
}
</code>

On 'hover' the specified image now shows a border.

This was a great break though for me, as I now had some way of effecting the image within the module. Elementary steps, but progress none the less.

Now that I have this ability to effect the image, I am trying to change images when the visitor hovers over it (ie rollover). I would list all the things I have tried... but I have yet to have any success with those, so I'll just ask if you have any further suggestions for the code to accomplish this, instead of showing my failed attempts.

I think CSS is where I should be attempting this, but I'm really not sure.

Thank you again for your patience.

Now that you have had some successes, it's probably a good time to step back, take a deep breath and then study up on HTML and CSS, and how they apply to DNN. We have some good tutorials that will introduce you to the basics of the DotNetNuke framework, and others on using HTML and CSS.

The Minimal Extropy skin and the basic home page that are created when you first load up DotNetNuke are packed with some good CSS and some CSS "tricks" that will help you get a good understanding of how to separate content from presentation with CSS in the context of DotNetNuke.

Also, if you'll refer back to the CSS I mentioned in an earlier message that might make more sense now:



Look at the .left:hover class. Replace the background-color with a background that references an image. Your biggest trick will be getting the URL to the image right. So, look at the source code that is generated and you'll be able to track it down.

Thank you again for your insight. I will dive deeper into .Net framework and see where it leads me.

I have a suggestion for DNNCreative. How about a tutorial/article on this topic - Creating image rollovers buttons in DNN =D I think it would help many people in many different situations. I greatly appreciate the knowledge that this site provides, and think this would be a wonderful addition.

And I know I would want to see how the DNN gurus handle it - learning the right way the first time is always a good thing.

OK, but this has nothing to do with .NET. It is "just" HTML and CSS ...

I agree, just would be nice to see one.

Here is an example:



The pictures are two of the windows sample pictures. Just put copies of them in the same directory as the html file.