How do I edit header of page in V8

[chris ashdown]

Using smart theme, trying to arrange log so that the rest of the header is white to match the header, plus the menu's moved to use up the white space.

Picture of what I mean

Header code

<table width="100%" cellspacing="0" cellpadding="0" border="5"
<tr>
<td><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22"><actinic:variable name="CompanyLogoImage" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:variable name="BrochureLogoImage" /></actinic:block></td>
<td align="right">
&nbsp;
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="5" class="secondbar" style="background-image:url('theme_secondbar_background.gif');">
<tr>
<td>
<actinic:variable name="QuickSearchBar" />
</td>
<td align="left">
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22">
<actinic:variable name="BrochureNavBar" value="Brochure Nav Bar Text Link List" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22">
<actinic:variable name="NavigationBar" value="Horizontal Nav Bar Text Links" />
</actinic:block>
</td>
</tr>
</table>

[pinbrook]

Chris, if you change your view from advanced to basicview you will be able to see the table code more clearly.

in the layout code window, top left icon, 2 arrows facing each other, click it to return to basic view.

Then search box code is this - <actinic:variable name="QuickSearchBar" />

and the nav is <actinic:variable name="BrochureNavBar" value="Brochure Nav Bar Text Link List" />

or post again with the basic view to make things easier - I think!

[chris ashdown]

Thanks Jo,

But how do I physically move them so they are parcially over the logo and not seperately below it?

[cdicken]

But how do I physically move them so they are parcially over the logo and not seperately below it?

Well it's tricky to physically move something that isn't physical

You cannot have code overlapping with an image that is inserted with an <img> tag. So what you are asking for is impossible.

However, it is possible to set the logo image as being the background image of a table, and then you can put the quick search bar and navigation bar in the table. Here is some code:

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-image:url('theme_corporate_logo.gif'); background-repeat: no-repeat; height: auto;">
   <tr>
      <td align="right">
         <actinic:variable name="QuickSearchBar" />
      </td>
   </tr>
   <tr>
      <td align="center">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22">
            <actinic:variable name="BrochureNavBar" value="Brochure Nav Bar Text Link List" />
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22">
            <actinic:variable name="NavigationBar" value="Horizontal Nav Bar Text Links" />
         </actinic:block>
      </td>
   </tr>
</table>

Replace 'theme_corporate_logo.gif' with the filename of your image, and replace 'height: auto;' with the height of your logo image.

[Jan]

This will get you part way to what you want

Go to design tab, click on the header area and you should see Layout Code - Smart Header Area in the code pane.

Replace the first table definition

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-image:url('theme_topbar_background.gif');">
<tr>
<td><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22"><actinic:variable name="CompanyLogoImage" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:variable name="BrochureLogoImage" /></actinic:block></td>
<td align="right">
&nbsp;
</td>
</tr>
</table>

With

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-image:url('theme_topbar_background.gif');">
<tr>
<td><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22"><actinic:variable name="CompanyLogoImage" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22"><actinic:variable name="BrochureLogoImage" /></actinic:block></td>
<td align="right">
&nbsp;
</td>
<td>
<actinic:variable name="QuickSearchBar" />
</td>
</tr>
<tr>
<td align="centre">
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22">
<actinic:variable name="BrochureNavBar" value="Brochure Nav Bar Text Link List" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22">
<actinic:variable name="NavigationBar" value="Horizontal Nav Bar Text Links" />
</actinic:block>
</td>
</tr>
</table>

Then click on the search box you want to remove and click on the up arrow in the code pane to move up to the parent, you should be at layout code, smart header area, remove this

<td>
<actinic:variable name="QuickSearchBar" />
</td>

This worked with my upgraded mole end site, but didn't work with the default V8 site - probably because a large image is included, so try it and if it doesn't work, remove or make the image smaller.

I hope this works, if not apologies.

Regards.

[pinbrook]

Of course another way to do it is with css, see my current trial design at http://grail.pinbrook.net/acatalog/Clothing.html

This has a very similar layout to what you are trying to acheive but it does it all with css and not a table, tr, td in sight.

[RuralWeb]

I see your template business is starting up jo

[pinbrook]

yep its coming along quite nicely

they are all going to be css. So its good practice getting to grips with both the design of V8 and css

It only took me a day to get the horizontal nav written!

[RuralWeb]

It only took me a day to get the horizontal nav written

So we should see the first one for sale about Christmas 2009

[chris ashdown]

Many thanks to you all for the time and effort, I will have a busy Monday and Tuesday by the looks of it.

Question
With the idea of keeping the site as clean as possible, as I will already be using a couple of Normans add ons, would the CSS be the better long term solution

Jo could you elaberate further on what I would need to do please if I use the css route

[pinbrook]

if you are going down the css route you really need to choose cleancss as your theme, and navigation (fixed layout) List in boxes, new products, fixed layout list in boxes etc etc etc.