Custom Header

[mfranzel]

Hi, I'm really new at this whole thing and I've been looking all over for something that will just tell me the simplest way to add a custom header/ footer. Can someone with good skills PLEASDE help me? Thanks! Matt.

[Nibbler]

Use the method described in the documentation.

http://coppermine-gallery.net/demo/cpg14x/docs/index.htm#admin_theme_include_path_start

[mfranzel]

I already looked at that and I don't understand it. I need someone to provide me with detailed notes. Please?!?!?!

[Joachim Müller]

if you need a static footer, just edit themes/yourtheme/template.html with a plain text editor and add/change whatever HTML code you like. The custom header Nibbler refered to above is meant for including dynamic content using PHP, so you should at least know your way around in basic PHP. You need to enter a relative path there to a custom PHP script. A relative path from here (this page) to the index page of the demo would e.g. be ../demo/cpg14x/index.php

[mfranzel]

Great! Thank you so much! But if I do want my website navigation structure to be inserted into the gallery how do I do it. I use a website made with CSS. the whole CSS file looks like this:

Code Select Expand


body {
background:#8b8b8b;
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

a {
color:#505050;
font-weight:bold;
text-decoration:none;
}

a:hover {
color:#808080;
text-decoration:underline;
}

p {
line-height:1.5em;
margin:0 0 15px;
}

/*** Main container ***/

#container {
background:#f0f0f0 url(img/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;
}

/*** Header section ***/

#sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}

#sitename h1,#sitename h2 {
font-weight:400;
letter-spacing:-2px;
margin:0;
padding:0;
}

#sitename h1 {
font-size:2.4em;
padding-top:20px;
}

#sitename h2 {
font-size:1.6em;
}

[size=10pt][size=10pt][size=10pt][size=10pt][size=10pt][size=10pt]/*** Horizontal menu ***/

#mainmenu {
float:left;
margin-bottom:25px;
}

#mainmenu ul {
font-size:16px;
margin:0;
padding:0;
}

#mainmenu li {
float:left;
height:35px;
list-style:none;
margin:0;
padding:0;
}

#mainmenu a {
border-right:1px solid #b0b0b0;
color:#606060;
display:block;
font-size:0.7em;
padding:11px 10px 10px;
text-transform:uppercase;
}

#mainmenu a:hover {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

#mainmenu a.current {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

/*** Content wrap ***/

#wrap {
clear:both;
font-size:0.9em;
padding:0;
}

/*** Sidebars ***/

#leftside,#rightside {
margin:0;
padding:0 10px 10px;
width:165px;
}

#leftside {
float:left;
margin-right:10px;
}

#rightside {
float:right;
margin-left:10px;
}

#leftside h1,#rightside h1 {
color:#505050;
font-size:1.6em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 12px;
}

#leftside h2,#rightside h2 {
font-size:1.1em;
margin:0 0 20px;
}

#leftside p,#rightside p {
font-size:0.9em;
line-height:1.4em;
margin:0 0 16px 10px;
}

.linklist {
list-style:none;
margin:0 0 16px 10px;
padding:0;
}

.linklist li {margin-bottom:0.7em;}

/*** Sidebar menu ***/

.nav {
background:#e8e9ea;
border:1px solid #b0b0b0;
color:#606060;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
position:relative;
text-transform:uppercase;
width:140px;
}

.nav:hover,.active {
background:#f8f9fa;
border:1px solid #909090;
color:#303030;
text-decoration:none;
}

.sub {
font-size:0.8em;
letter-spacing:1px;
margin:3px 0 2px 10px;
padding:4px 2px 2px 8px;
width:125px;
}

/*** Content ***/

#content,#contentalt {
background-color:#fafcff;
border:1px solid #909090;
color:#2a2a2a;
padding:15px 20px 5px;
}

#content {margin:0 200px;}
#contentalt {margin:0 200px 0 20px;}

#content h1,#content h2,#contentalt h1,#contentalt h2 {
background-color:inherit;
color:#606060;
font-size:1.8em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 15px;
padding:0;
}

#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}

#content img,#contentalt img {
border:1px solid #b0b0b0;
float:left;
margin:5px 15px 6px;
padding:5px;
}

/*** Footer ***/

#footer {
background:#8b8b8b url(img/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:20px 0;
text-align:center;
width:100%;
}

#footer a {
color:#d0d0d0;
font-weight:bold;
}

/*** Various classes ***/

.thumbnail {
background:#fafbfc;
border:1px solid #b0b0b0;
margin:0 0 10px 10px;
padding:5px;
}

.searchform {margin:0;}

.searchbox {
background:#f0f0f0;
border:1px solid #b0b0b0;
margin:0 4px 0 0;
width:100px;
}

.searchbutton {
background:#f0f0f0;
border:1px solid #b0b0b0;
}

.clearingdiv {
clear:both;
height:30px;
width:1px;
}

.hide {display:none;}

/*** Text format ***/

.intro {
font-size:1.1em;
font-weight:bold;
letter-spacing:-1px;
}

.small {font-size:0.8em;}
.large {font-size:1.4em;}
.center {text-align:center;}
.right {text-align:right;}

/*** End of file ***/

But I think this part is the part that is the navigation:

Code Select Expand

/*** Header section ***/

#sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}

#sitename h1,#sitename h2 {
font-weight:400;
letter-spacing:-2px;
margin:0;
padding:0;
}

#sitename h1 {
font-size:2.4em;
padding-top:20px;
}

#sitename h2 {
font-size:1.6em;
}

[size=10pt][size=10pt][size=10pt][size=10pt][size=10pt][size=10pt]/*** Horizontal menu ***/

#mainmenu {
float:left;
margin-bottom:25px;
}

#mainmenu ul {
font-size:16px;
margin:0;
padding:0;
}

#mainmenu li {
float:left;
height:35px;
list-style:none;
margin:0;
padding:0;
}

#mainmenu a {
border-right:1px solid #b0b0b0;
color:#606060;
display:block;
font-size:0.7em;
padding:11px 10px 10px;
text-transform:uppercase;
}

#mainmenu a:hover {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

#mainmenu a.current {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}


Is this right? Well if it is, than how do I make that show at the top of my gallery? Thanks!

Matt

[Joachim Müller]

surprisingly, CSS stuff doesn't go into template.html, but style.css.
Please read the docs first.

[mfranzel]

Great! Thank you so much! I got it all working and it looks great!

Matthew

[azjennifer]

About the bgnd gfx for Hardwire and the code driving the theme....

Where is the code to get rid of the bgnd image for hardwire? 

my page is at:
http://wickedmag.com/cpg143/index.php

and the page to make the change to get rid of the image behind the new banner.

thanks,

jt

code followes--------TEMPLATE------ FOR template.html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
<link rel="stylesheet" type="text/css" href="themes/hardwired/style.css" />
<style type="text/css">
<!--
.style1 {font-size: x-large}
-->
</style>
{META}
<script type="text/javascript" src="scripts.js" ></script>
<!-- $Id: template.html,v 1.12 2005/12/04 03:22:35 donnoman Exp $ -->
</head>
{CUSTOM_HEADER}
<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td width="54" rowspan="3" id="far-left"><img src="themes/hardwired/images/header.jpg" width="54" height="14" alt="" /></td>
    <td width="18" class="middle-left"><img src="themes/hardwired/images/header.jpg" width="18" height="14" alt="" /></td>
    <td width="801" height="144" align="left" class="right-banner">
        <div class="left-banner">
<!--        <div class="gal_name">{GAL_NAME}Wicked Mag Photo Gallery</div>
-->       
<div class="gal_name style1"><img src="themes/hardwired/images/header.jpg" width="800" height="115" /></div>
<!--  <div class="gal_description">{GAL_DESCRIPTION}</div>
-->
   <div class="gal_description">Your Extreme Trucking Photo album</div>
       </div>
    </td>
    <td width="19" class="middle-right"><img src="themes/hardwired/images/header.jpg" width="19" height="14" alt="" /></td>
    <td width="54" rowspan="3" class="far-right"><img src="themes/hardwired/images/header.jpg" width="53" height="14" alt="" /></td>
  </tr>
  <tr>
    <td width="18" class="middle-left">&nbsp;</td>
    <td class="gallery"><div align="right" class="topmenu"> {SYS_MENU} </div>
      <br />
      <div align="left" class="topmenu">{SUB_MENU}</div> <br />
      <div align="center"> {THEME_SELECT_LIST} {LANGUAGE_SELECT_LIST} </div>
      <br />
      {ADMIN_MENU} {GALLERY}</td>
    <td width="19" class="middle-right">&nbsp;</td>
  </tr>
  <tr valign="baseline">
    <td width="18" class="middle-left"><img src="themes/hardwired/images/header.jpg" width="18" height="31" alt="" /></td>
    <td class="bottom-middle">&nbsp;</td>
    <td width="19" class="middle-right"><img src="themes/hardwired/images/header.jpg" width="19" height="31" alt="" /></td>
  </tr>
</table>
<br />
<div align="center"> {LANGUAGE_SELECT_FLAGS} <br />
  <br />
</div>
{CUSTOM_FOOTER}
{VANITY}
</body>
</html>

[Joachim Müller]

The background graphics are determined in themes/hardwired/style.css (body definition), not in template.html. Not a bright idea to hijack a thread that is marked as "solved" that deals with a different issue. Locking thread.