Resolved- Changing the header in allcss template

nootkan

#5
Thanks Michael, I got it to work by changing the .banner, search_box code to show just the background image without the logo background-image: url(vifeheader5.gif);  and then added background-image: url(vifeheader4.gif);
background-repeat: no-repeat;
with the logo to the .banner code.  Thanks again for your input, greatly appreciated.

BlackTiger

You define the image as background of the two classes banner and search_box so the image behind the searchbox is no repeat. You have to put the background-image directives into the next rule below.

regards
Michael

nootkan

#3
Sorry but I'm running this on my computer at home with easywamp server.  The search bar is in the banner which I like actually.  Here is the original code from the template that I changed:

}
.banner, .search_box {
   height: 80px;
   background-image: url(header.jpg);
   background-repeat: repeat-x;
   font-size: 20px;
   font-weight: bold;
   color: #FFFFFF;
   text-align: center;
   padding-top: 20px;
}
.banner {
   width: 530px;
   padding-left: 20px;
   float: left;
   text-align: left;
}
.search_box {
   float: right;
   clear: right;
   width: 200px;
}
.search_string {
   width: 100px;
   height: 16px;
   font-size: 10px;
   vertical-align: middle;
}
.search_submit {
   width: 50px;
   height: 22px;
   font-size: 10px;
   vertical-align: middle;
}
.highlight {
   background-color: #D0D0D0;
}
.banner a {
   color: #FFFFFF;
}


Not sure what to give you for the classes as I'm a noob when it comes to php.  Here's the script inside the body tag for index.php:

<body>

<div class="main">
   
   <div class="banner">
       <a href="<?php echo WB_URL?>/" target="_top"><?php echo WEBSITE_TITLE?></a>
       <font color="#D0D0D0">| <?php echo PAGE_TITLE?></font>
   </div>
   
   <div class="search_box">
       <?php if(SHOW_SEARCH) { ?>
       <form name="search" action="<?php echo WB_URL.'/search/index.php'?>" method="get">
       <input type="text" name="string" class="search_string" />
       <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
       </form>
       <?php ?>
   </div>

marathoner

You didn't provide a URL to see how you are using these classes but I would guess that the first time that you see it is because of the banner class and the second time that you're seeing it is because of the search_box class. Why are you placing the background image in the search_box class?

nootkan

#1
I've been trying to replace the image in the header with my own image and cannot seem to get it to work without repeating.  Here is the image:



Here is what is happening:



Here is the code I've been working with:
.banner, .search_box {
   height: 80px;
   background-image: url(vifeheader4.gif);
   background-repeat: no-repeat;
   font-size: 20px;
   font-weight: bold;
   color: #FFFFFF;
   text-align: center;
   padding-top: 20px;
}
.banner {
   width: 530px;
   padding-left: 20px;
   float: left;
   text-align: left;


I've tried a few things link placing the no-repeat after the image url changing the original script from background-image: repeat-x; to y etc.  Also tried changing banner width with no luck.  Nothing seems to work.  Any ideas?