DotNetNuke - Make Header a Pane


Author Message
Mike

Posted: 5/21/2010
Quote message 

One thing I see this lacking is the ability to create panes. For instance, I would like to have a "Header Pane". This way, I can designate the header image to be different for different pages. Has anyone been able to do this with the software? Thanks in advance for your answers.
 
mwoffenden

Posted: 5/21/2010
Quote message 

Currently, there's no way to do this using Artisteer. You would have to create your Artisteer skin and then add the DNN header token by editing the ASCX file.
 
Miguel

Posted: 5/28/2010
Quote message 

Quote mwoffenden:

Currently, there's no way to do this using Artisteer. You would have to create your Artisteer skin and then add the DNN header token by editing the ASCX file.


What if i just want to place a module there? It would be like having another pane just at the side of the logo... we could put any module there!

 
mwoffenden

Posted: 5/28/2010
Quote message 

Yes. Just setup a pane where you need it in the header, and you can use any module there.
 
Miguel Clara

Posted: 5/28/2010
Quote message 


I'm trying... but I simple isn't there...

Very odd, because I'm sure I'm not using an ID that's already in use
 
Miguel Clara

Posted: 6/1/2010
Quote message 


I want the "TopHeader" pane to display side by side with the logo, but I can't make it work... must be something in CSS ofc... but the closest I got was to put bellow the logo assuming the full width of the header :|

My Idea is to have the Header with

LOGO (left side) || PANE (right side with a 20 px margin from the logo)
 
Steven Nestler

Posted: 6/1/2010
Quote message 

Miguel,I, too, would like to do that. I would love to put the Active Social welcome center into the header, near the logo. Being able to insert a module into the header would be great!
I hope the folks from Artisteer are listening.
 
Miguel Clara

Posted: 6/2/2010
Quote message 

Quote Steven Nestler:

Miguel,I, too, would like to do that. I would love to put the Active Social welcome center into the header, near the logo. Being able to insert a module into the header would be great!
I hope the folks from Artisteer are listening.


Yeah Steve it does make all sense, a pane up there would be great, any module can look great there, and I could even make it different for every page, I'm trying to edit the files but I can't make it work :(
 
BarryZ

Posted: 6/6/2010
Quote message 

Just because you cannot add things via an interface like Artiseer, doesn't mean you can't have what you want.
Open the default.aspx file of the skin, and place any html in there you want. People who know how to build html pages in Notepad are at an advantage.
To add a space for a header section with logo on the left and words on the right, here's the html code:

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD><IMG SRC="/portals/0/1usalogo.gif" WIDTH="200" HEIGHT="75" ALIGN="BOTTOM" BORDER="0"></TD>
<TD WIDTH="5%">&nbsp;</TD>
<TD><A HREF="http://www.1usa.com/"><FONT SIZE="6" FACE="Arial">1USA.Com is the Best ISP in America</FONT></A></TD>
</TR>
</TABLE>

Adjust size of table cells as necessarry.
Remove the table border when finished.
BarryZ
 
Miguel Clara

Posted: 6/7/2010
Quote message 

Thanks BarryZ but we know that...

We are obviously talking about editing the files here...

I keep trying with div's and it doesn't work....

The table is ofc a way to do it... much like the other panes artister creates, like user1 and user2
 
Miguel Clara

Posted: 6/7/2010
Quote message 


oh one other thing... I want to use the dnn:LOGO not just and image, and I think that's actually what's messing with my div styles!
 
Miguel Clara

Posted: 6/7/2010
Quote message 


lol I was applying the wrong #"name" for the ID.... opera helped me with the "Inspect Code thing".... (similar tool to firebug on FF)

Anyway here goes an example of what I did:

Page.ascx

<div class="art-header">
<div class="art-header-Logo">
<dnn:LOGO ID="DNN_SiteLogo" runat="server" /></div>
<div id="TopHeader" visible="false" runat="server"></div>


NOTE that I'm using DNN logo and not the art-logo-jpeg section that artister creates!

So my CSS is this:


div.art-header-Logo
{
position: absolute;
z-index: -1;
width: 50%;
float: left;
}

#dnn_TopHeader
{
width: 50%;
z-index: -1;
float: right;
}


/*div.art-header-jpeg
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 988px;
height: 175px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}*/

Note that I commented the art-header-jpeg just because its not in use but if anyone else use that instead of DNN logo than just use #dnn_TopHeader style in art-header-jpeg

and its done :)

the 50% width can be change to another % or px value!
 
Steven

Posted: 6/9/2010
Quote message 

Miguel,
That sounds great! So, you've succeeded? Can you give me a URL so I can see what you've done?
Thanks,
Steven
 
Miguel

Posted: 6/11/2010
Quote message 


Here Steven: http://tiny.cc/7empt

Now I only need to place a nice menu.... The client want something similiar to this:

http://ilovecolors.com.ar/wp-content/uploads/jquery-slide-menu-revisited/

or this: http://www.alohatechsupport.net/examples/image-menu-1.html

Just with 3 or 4 of the links... I like the second, but this one will be more tricky to put there... but I thibk the HTML module might do it :P



 
Steven

Posted: 6/11/2010
Quote message 

Miguel, thanks.
So the menu placeholder you have for that site is a pane with the html module?
That's exactly what I need.
I tried the code you posted above, but I broke the skin; I'll have to put some time into implementing it.
My site is: http://ipsophoto.com, and I'm trying to put the Welcome center into the header.

Thanks again,
Steven
 
Miguel Clara

Posted: 6/12/2010
Quote message 

It may be because of the LOGO tag...

If you want send me the skin ziped to miguelmclara (at) hotmail (dot) com I'll see what is brocking it... I have a local DNN test site so I can "play with it"
and see what's wrong.


 
Miguel Clara

Posted: 6/12/2010
Quote message 

* broking
 
Lynda Jewell

Posted: 6/17/2010
Quote message 

Miguel,

I am having a simular type issue. I need to place (or move) the current Header pane to a place in the Header (the header looks like an open book). I need to be able to put a text module there that differes for each page, so having a banner pane in the header is a must.

I am new to CSS and HTML (although I have been able to follow what you all are doing). And your example puts a picture in place - will it put the pane in place and make it assignable?

Lynda
 
BarryZ

Posted: 6/17/2010
Quote message 

Lynda:
I would imagine that you can turn off the Header section by clicking on the relevant icon in Artisteer, then rebuild the skin, then place a Module in TopPane and a vertical menu can go into Sidebar1. How would that work for you?
You'd need to find a module that displays random images.
If you need a different photo for each page that would be displayed every time only on that page, then it would be easiest to insert a Text-Html module on each page and have it only display a certain image.

BarryZ

 
Lynda Jewell

Posted: 6/18/2010
Quote message 

BarryZ,

I tried that and did not get the results I need. I definitely have a header section with a static graphic. The Menu is horizontal beneath the header. What I need is a Banner pane that sits in the header section that allows me to add a module (any type of module) to it. In my case it will be a text module. (that shows random text as the "page is turned")

If I understand the code example above - it is adding a new pane called TopHeader
It modifies the Page.ascx file to defined the existance of TopHeader
It then modifies the CSS file to define the location and placement of dnn_TopHeader.
It goes further by assigning a file the the pane. In my case I whould not do this, as I just want the pane.
Am I missing anything else?

Lynda

 
barryz

Posted: 6/18/2010
Quote message 

Lynda:
I did not write or recommend the code above, Miguel Clara did. I have not tested the code.
Take a regular html page and you will see formatting among the content. All that DNN does is pull the content from the database and add html formatting to the content via the Source View like in the text-html module... then dynamically insert it onto the page. Likewise, Artisteer is a program that also generates html - which goes into the page.ascx file... and all of the Artisteer tags are controlled by the .css files - instead of putting the attributes directly in the page.ascx file. The result is a complete WYSIWYG (supposedly) from start to finish.
The point here: It still takes the knowledge of basic html in order to make changes or add new features or overcome limitations imposed by either DNN or the authoring package, Artisteer.

You can open page.ascx file and insert text and images directly.
You can go one step further and let DNN manage the text or images by running the content through a Module - via the DNN tags.... and you can go one step further by controlling all of the formatting via .css and Artisteer.

I've found out that if you insert content into sections of the page.ascx file done by Artisteer... but don't have a corresponding section in the .css file, it will blow up the page. This is not an adverse statement about Artisteer... it's just the way the program works. I've also run across limitations using DreamWeaver and other programs. A good Web Designer knows the underlying html code and can decide when to program directly on the page, via DNN, or in the Artisteer software.
Part of the problem of Web Designers is also learning to identify the DNN tags and the Artisteer tags, and to choose the method that best fits the situation.
If the top graphic and words will be changing, or will be changed by a user, then run it through DNN, which means you need to create a section with a DNN tag. If the top graphic and words only need to be changed by you, the Web Designer, then you can bypass all of the DNN and Artisteer complicaitons by simply adding the new content directly in the page.ascx file. Miguel's code above is a way to run the code through Artisteer. There are many ways to solve a situation, and I have found that the simpler ways take a lot less time to do.

I will work at assembling a few sample pages to show the differences - particularly about Header images and placement of words and number of lines.

BarryZ
www.1usa.com
Reading PA
 
Doug

Posted: 7/15/2010
Quote message 

This would be a great feature for artisteer to implement. We need to be able to run a module in a header if our application of the site requires it. Could this be put on a wishlist somewhere.

I have a need for this and really do not have the time to set down and create this feature. I thought artisteer would relieve the headache of building code.

If I could get a fix to make the logo and text on the left and have the right side of header allow me to insert the module that would be great.
 
BarryZ

Posted: 7/17/2010
Quote message 

Wouldn't it be easier to choose "plain' for the header, and move the Menu down... then you would have TopPane for modules or whatever you wanted to use it for.
If you want two DNN modules side by side, search snowcovered.com for 'module wrapper'. For rotating banners at the top, just use the DNN Banner module.

BarryZ

 
Doug

Posted: 7/26/2010
Quote message 

I have tried leaving the header blank, but when I try to put a module in it, it fails to show. Its like the header in artisteer is not a pane.

If I am wrong, can you be a little more specific in how to accomplish this task.

Thx
 
Carla

Posted: 11/22/2010
Quote message 

Hi I am wondering how to add a separate menu list into the header section of my skin. I want certain menu items to be displayed in the header only, ex. Contact Us, Search Module, Login etc.

I am very new to all this and would greatly appreciate some advice on how to achieve this.

Thanks