Page 2 Edit Photoshop Header/ Insert in Skin

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

Edit Photoshop Header/ Insert in Skin

3/25/2008 5:31 PM

TechieOnna

Joined: 3/17/2008

Posts: 8

Re: Edit Photoshop Header/ Insert in Skin

Thank you for your responses.

Here are the products I purchased:

http://dnnstyles.net/semantic2/PresetColors/SemanticBlue/tabid/1378/language/en-US/Default.aspx

and

http://www.dnnstyles.net/Default.aspx?alias=www.dnnstyles.net/wraparound

As you will see with both of them, they come with Photoshop templates to change the header image. Outside of DNN, we would normally change the header with new images, save the file and insert it where it belongs to replace the existing image on the html page. With DNN, I do not understand, once I finish editing the Photoshop Header and save the image - what do we do after that? Where does it go? and How do we slice it up so that it can appear in the skin?

I was hoping it was easy as you change the Photoshop image, save it and then replace the image in the skin folder for "header" with the new image, and Voila! It appears :) -But no such luck. Ha ha! I think it is misleading because you think that is all you have to do, but it is much more complicated than that, and I am trying to understand how to do it.

Tell me what links you guys need to see too, and I will put it up for you :)

Thanks!

3/25/2008 11:57 PM

Cuong Dang

www.enlivenhq.com
Joined: 3/29/2006

Posts: 433

Re: Edit Photoshop Header/ Insert in Skin

TechieOnna,

Based on the link that you sent, it seems that they have their banner images live on the Portal of the site. Here is the path of their banner images: ~/Portals/36/Banner3.png

Associate your PortalID where your skins live, save your new banner and place it on the same Portal outside of the Skins folder. It should find the images.

Let me know if it works!

Cuong Dang
Co-founder: Enliven, dnnGallery
LinkedIn | Twitter
I'm the author of DNN and Web Standards Wrox Blox

3/26/2008 4:28 AM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Edit Photoshop Header/ Insert in Skin

......Outside of DNN, we would normally change the header with new images, save the file and insert it where it belongs to replace the existing image on the html page. With DNN, I do not understand, once I finish editing the Photoshop Header and save the image - what do we do after that? Where does it go? and How do we slice it up so that it can appear in the skin?

FYI, there should be no real difference between DNN and a normal HTML page, but the paths to use.

I this doesn't work, it's a problem with the skin not DNN, normally you should be able to replace the images without a problem.

DNN websites, modules, skins, hosting and support

3/26/2008 9:30 AM

Jeff Cochran

Joined: 6/3/2005

Posts: 2799

Re: Edit Photoshop Header/ Insert in Skin

TechieOnna wrote

Back to terminology again. :)

There is no "header image" here. There is a logo, the Semantec 2.0 part at the top, and a Banner, the girl's face. Both of these are separate graphic images. For the logo, upload a logo through the Admin menu, site settings. For the banner, find the file "Banner5-blue.jpg" and replace that with your new one, keeping the same name.

Jeff

3/26/2008 3:35 PM

TechieOnna

Joined: 3/17/2008

Posts: 8

Re: Edit Photoshop Header/ Insert in Skin

Ah, thank you very much! So, I have been trying to change the banner - eventually I would like to be able to change the header, but let me get the banner down first right? ;)

So this is great, we can see the banner image by viewing the source on the demo page. Before asking for help, I tried to do this same exercise by looking at the html file that is included with the skin package download. What comes up in the html is the following (and the images folder has png and gif files that are referenced here, but where are the banner files referenced? I only see [Banner Pane] I do not see any jpg files in any of the folders included with the package either. So, do we load the skin and then look at the DNN html to find the banner images so I can recreate them, rename them the same name and replace? Where are the jpg images stored? There are 8 different skins - how can I figure out the names of the banners for each skin if I can't see them? I am so confused Can you tell? HA! )

Here is the HTML code included with the skin package:

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="skin.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="960" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
    <td width="10" height="9"><img src="images/bdr_01.png" width="10" height="9" alt=""></td>
    <td width="1639" height="9" background="images/bdr_02.png"><img src="images/spacer.gif" width="9" height="9" alt=""></td>
    <td width="10" height="9"><img src="images/bdr_03.png" width="10" height="9" alt=""></td>
</tr>
<tr>
    <td width="10" background="images/bdr_04.png"><img src="images/spacer.gif" width="9" height="9" alt=""></td>
    <td valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="5"><img src="images/spacer.gif" width="10" height="7"></td>
        <td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td><table id="Table_" width="100%" height="104" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="9" height="88" rowspan="2" valign="bottom"><img src="images/hdr_01.png" width="19" height="56" alt=""></td>
                    <td width="641" rowspan="2" class="logoAREA">[logo]</td>
                    <td valign="bottom"><table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
                        <tr>
                          <td height="44"><div align="right" class="style1">[login] [user] [currentdate]</div></td>
                        </tr>
                    </table></td>
                    <td width="9" rowspan="2" valign="bottom"><img src="images/hdr_05.png" width="9" height="56" alt=""></td>
                  </tr>
                  <tr>
                    <td height="56" valign="bottom"><table id="Table_2" width="100%" height="56" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="14" height="56"><img src="images/hdr_03.png" width="14" height="56" alt=""></td>
                          <td background="images/hdr_04.png"><table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
                              <tr>
                                <td height="26"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td class="searchBG"><div align="right">[search]</div></td>
                                    </tr>
                                </table></td>
                              </tr>
                          </table></td>
                        </tr>
                    </table></td>
                  </tr>
                </table>
                  <table id="Table_3" width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="9" height="40"><img src="images/hdr_06.png" width="19" height="40" alt=""></td>
                      <td background="images/hdr_07.png"><span class="style1"> [solpartmenu]</span></td>
                      <td width="9"><img src="images/hdr_08.png" width="9" height="40" alt=""></td>
                    </tr>
                </table></td>
            </tr>
          </table>
            <table width="100%" height="1" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" class="BannerPane" id="BannerPane" runat="server" visible="false"></td>
              </tr>
            </table>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="1"><img src="images/spacer.gif" width="10" height="7"></td>
              </tr>
            </table>
          <table id="Table_4" width="100%" height="28" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="7"><img src="images/crumb_01.png" width="7" height="28" alt=""></td>
                <td background="images/crumb_02.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><span class="style1">You Are Here: [breadcrumb] </span></td>
                      <td><div align="right">[language]</div></td>
                    </tr>
                </table></td>
                <td width="7"><img src="images/crumb_03.png" width="7" height="28" alt=""></td>
              </tr>
            </table>
          <table width="100%" height="1" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" class="TopPane" id="TopPane" runat="server" visible="false"></td>
              </tr>
            </table>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" class="TopLeftPane" id="TopLeftPane" runat="server" visible="false"></td>
                <td valign="top" class="TopRightPane" id="TopRightPane" runat="server" visible="false"></td>
              </tr>
            </table>
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
              
              <tbody>
                <tr>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td valign="top" class="LeftPane" id="LeftPane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td width="100%" valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr bgcolor="#FFFFFF">
                        <td valign="top" class="ContentPane" id="ContentPane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td valign="top" class="RightPane" id="RightPane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                </tr>
              </tbody>
            </table>
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
              
              <tbody>
                <tr>
                  <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="MidLeftPane" id="MidLeftPane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="MiddlePane" id="MiddlePane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="MidRightPane" id="MidRightPane" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                </tr>
              </tbody>
            </table>
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
              
              <tbody>
                <tr>
                  <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="BottomColumn1" id="BottomColumn1" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="BottomColumn2" id="BottomColumn2" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="BottomColumn3" id="BottomColumn3" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                  <td valign="top" class="navThirdLevelDivider"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="BottomColumn4" id="BottomColumn4" runat="server" visible="false"></td>
                      </tr>
                  </table></td>
                </tr>
              </tbody>
            </table>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" class="BottomPane" id="BottomPane" runat="server" visible="false"></td>
              </tr>
          </table></td>
        <td width="5"><img src="images/spacer.gif" width="10" height="7"></td>
      </tr>
    </table></td>
    <td width="10" background="images/bdr_06.png"><img src="images/spacer.gif" width="9" height="9" alt=""></td>
</tr>
<tr>
    <td width="10" height="58" background="images/bdr_04.png"><img src="images/spacer.gif" width="9" height="9" alt=""></td>
    <td height="58" valign="bottom" bgcolor="#FFFFFF"><table width="99%" height="58" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_5">
      <tr>
        <td width="8" height="58"><img src="images/ftr_01.png" width="15" height="58" alt=""></td>
        <td height="58" background="images/ftr_02.png"><div align="center"><span class="WhiteTEXT">          [copyright], Please Read:
          [privacy] and [terms] </span></div></td>
        <td width="8" height="58"><img src="images/ftr_03.png" width="15" height="58" alt=""></td>
      </tr>
    </table></td>
    <td width="10" height="58" background="images/bdr_06.png"><img src="images/spacer.gif" width="9" height="9" alt=""></td>
</tr>
</table>

</body>
</html>

Page 2 of 2

Home

Using DNN Platf...

Skins, Themes, ...

Edit Photoshop Header/ Insert in Skin

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)